> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/entities/design/css-variables.md).
# CSS Variables
There are a lot of predefine CSS variables in Altrone. All the components uses these variables. Some of the variables change their values depending on the current theme.
## Colors
| Variable | Value |
| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **`background`** | #FFFFFF
#010b18 (in dark mode)
|
| **`surface`** | #FAFAFA
#121212 (in dark mode)
|
| **`surfaceTransparent`** | rgba(107, 138, 153, 0.2)
rgba(18, 18, 18, 0.7) (in dark mode)
|
| **`surfaceTrasparentHover`** | rgba(107, 138, 153, 0.3)
rgba(107, 138, 153, 0.4) (in dark mode)
|
| **`surfaceGlass`** | rgba(250, 250, 250, 0.8)
rgba(33, 33, 33, 0.8) (in dark mode)
|
| **`metalTop`** ** ****new** | #EAE9E9
#434445 (in dark mode)
|
| **`metalBottom`** ** ****new** | #AAAAAA
#2F2F2F (in dark mode)
|
| **`textColor`** | #202124
#FAFAFA (in dark mode)
|
| **`secondaryTextColor`** | `#6b8a99` |
| **`dividerColor`** | #EEEEEE
#455A64 (in dark mode)
|
| **`borderColor`** | #ECEFF1
#37474F (in dark mode)
|
| **`accent`** | #03A9F4
#0288d1 (in dark mode)
|
| **`accentFocus`** | `rgba(3, 164, 244, 0.75)` |
| **`accentHover`** | `#9bd1ee` |
| **`accentBorderColor`** | rgba(3, 164, 244, 0.15)
#01579b (in dark mode)
|
| **`accentText`** | `#007ac1` |
| **`textColorOnAccent`** | `#FFFFFF` |
| **`highlight`** | `rgba(3, 164, 244, 0.25)` |
| **`highlightHover`** | `rgba(3, 164, 244, 0.4)` |
| **`textOnHighlight`** | #202124
#FAFAFA (in dark mode)
|
| **`success`** | `#4caf50` |
| **`successBorderColor`** | `rgba(76, 175, 80, 0.15)` |
| **`successText`** | `#087f23` |
| **`successHighlight`** | `rgba(76, 175, 80, 0.35)` |
| **`textOnSuccessHighlight`** | #202124
#FAFAFA (in dark mode)
|
| **`textColorOnSuccess`** | `#FFFFFF` |
| **`danger`** | `#E53935` |
| **`dangerBorderColor`** | `rgba(229, 57, 53, 0.15)` |
| **`dangerText`** | `#ba000d` |
| **`dangerHighlight`** | `rgba(229, 57, 53, 0.35)` |
| **`textOnDangerHighlight`** | #202124
#FAFAFA (in dark mode)
|
| **`textColorOnDanger`** | `#FFFFFF` |
| **`disabledText`** | `#9E9E9E` |
| **`placeholderText`** | `#BDBDBD` |
| **`importantText`** | `#E53935` |
| **`blackout`** | `rgba(0, 0, 0, 0.4)` |
## Sizes
| Variable | Value |
| ------------------------- | ------ |
| **`gap`** | `4px` |
| **`smallControlHeight`** | `28px` |
| **`controlHeight`** | `34px` |
| **`largeControlHeight`** | `42px` |
| **`xlargeControlHeight`** | `54px` |
## Font sizes
| Variable | Value |
| ----------------------------- | ------ |
| **`controlFontSizeSmall`** | `13px` |
| **`controlFontSize`** | `16px` |
| **`controlFontSizeLarge`** | `18px` |
| **`controlFontSizeXLarge`** | `24px` |
| **`bodySmallFontSize`** | `14px` |
| **`bodySmallLineHeight`** | `18px` |
| **`bodySmallFontWeight`** | `400` |
| **`bodyFontSize`** | `16px` |
| **`bodyLineHeight`** | `22px` |
| **`bodyFontWeight`** | `400` |
| **`bodyLargeFontSize`** | `18px` |
| **`bodyLargeLineHeight`** | `26px` |
| **`bodyLargeFontWeight`** | `400` |
| **`labelSmallFontSize`** | `11px` |
| **`labelSmallLineHeight`** | `16px` |
| **`labelSmallFontWeight`** | `500` |
| **`labelFontSize`** | `12px` |
| **`labelLineHeight`** | `16px` |
| **`labelFontWeight`** | `500` |
| **`labelLargeFontSize`** | `14px` |
| **`labelLargeLineHeight`** | `20px` |
| **`labelLargeFontWeight`** | `500` |
| **`titleSmallFontSize`** | `16px` |
| **`titleSmallLineHeight`** | `20px` |
| **`titleSmallFontWeight`** | `600` |
| **`titleFontSize`** | `18px` |
| **`titleLineHeight`** | `24px` |
| **`titleFontWeight`** | `600` |
| **`titleLargeFontSize`** | `22px` |
| **`titleLargeLineHeight`** | `28px` |
| **`titleLargeFontWeight`** | `600` |
| **`headlineSmallFontSize`** | `24px` |
| **`headlineSmallLineHeight`** | `32px` |
| **`headlineSmallFontWeight`** | `700` |
| **`headlineFontSize`** | `28px` |
| **`headlineLineHeight`** | `36px` |
| **`headlineFontWeight`** | `700` |
| **`headlineLargeFontSize`** | `32px` |
| **`headlineLargeLineHeight`** | `40px` |
| **`headlineLargeFontWeight`** | `700` |
| **`displaySmallFontSize`** | `36px` |
| **`displaySmallLineHeight`** | `44px` |
| **`displaySmallFontWeight`** | `700` |
| **`displayFontSize`** | `45px` |
| **`displayLineHeight`** | `52px` |
| **`displayFontWeight`** | `700` |
| **`displayLargeFontSize`** | `57px` |
| **`displayLargeLineHeight`** | `64px` |
| **`displayLargeFontWeight`** | `700` |
## Roundings
| Variable | Value |
| --------------------------------------------------------------------------------------------------------- | ------ |
| **`circleRounding`** ** ****new** | `50%` |
| **`outerRounding`** ** ****new** | `20px` |
| **`сontainerRounding`** ** ****new** | `12px` |
| **`controlRounding`** ** ****new** | `8px` |
| **`innerRounding`** ** ****new** | `6px` |
## Other
| Variable | Value |
| ------------------------ | ----------------------------------------------------------------------------------------- |
| **`shadow`** | rgba(0, 0, 0, 0.1)
rgba(0, 0, 15, 0.5) (in dark mode)
|
| **`transitionDuration`** | `0.2s` |
## History
* **`Altrone 2.0`**:
* added `metalTop`
* added `metalBottom`
* added `circleRounding`
* added `outerRounding`
* added `containerRounding`
* added `controlRounding`
* added `innerRounding`
* **`Altrone 1.3`**:
* added `highlightHover`
* **`Altrone 1.0`**: initial release