# CSS Variables
### Theme
Set up your max viewport size.
| Variable name | Value |
| ------------- | ------ |
| bt-page-width | 1366px |
### Font sizes
Define your font sizes. By default Bricks Boilerplate uses fluid values. There are many sites where you can calculate and generate fluid sizes, e.g. this one:
{% hint style="info" %}
Just Bricks version calculates REM to PX as it is, meaning 1rem = 16px. It doesnt change the root font size to 62.5% but keep it as it is => 100%.
{% endhint %}
| Variable name | Value |
| ------------- | ---------------------------------------------- |
| bt-text-s | clamp(0.875rem, 0.875rem + 0.000cqi, 0.875rem) |
| bt-text-m | clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem) |
| bt-text-l | clamp(1.250rem, 1.115rem + 0.450cqi, 1.500rem) |
| bt-h6 | clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem) |
| bt-h5 | clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem) |
| bt-h4 | clamp(1.250rem, 1.115rem + 0.450cqi, 1.500rem) |
| bt-h3 | clamp(1.563rem, 1.327rem + 0.787cqi, 1.999rem) |
| bt-h2 | clamp(1.953rem, 1.569rem + 1.284cqi, 2.665rem) |
| bt-h1 | clamp(2.441rem, 1.842rem + 2.003cqi, 3.552rem) |
| bt-h0 | clamp(3.052rem, 2.143rem + 3.036cqi, 4.735rem) |
### Spacings
Used for paddings and margins...
| Variable name | Value |
| ------------- | ------------------------------------------ |
| bt-space-xxs | clamp(0.63rem, 0.52rem + 0.38cqi, 0.84rem) |
| bt-space-xs | clamp(0.84rem, 0.69rem + 0.51cqi, 1.13rem) |
| bt-space-s | clamp(1.13rem, 0.92rem + 0.68cqi, 1.5rem) |
| bt-space-m | clamp(1.5rem, 1.23rem + 0.90cqi, 2rem) |
| bt-space-l | clamp(2rem, 1.64rem + 1.20cqi, 2.67rem) |
| bt-space-xl | clamp(2.67rem, 2.19rem + 1.60cqi, 3.55rem) |
| bt-space-xxl | clamp(3.55rem, 2.91rem + 2.14cqi, 4.74rem) |
For section spacings or larger spaces, you can use these:
| Variable name | Value |
| -------------------- | -------------------------------------------- |
| bt-space-section-xxs | clamp(1.9rem, 1.56rem + 1.14cqi, 2.53rem) |
| bt-space-section-xs | clamp(2.53rem, 2.08rem + 1.52cqi, 3.38rem) |
| bt-space-section-s | clamp(3.38rem, 2.77rem + 2.03cqi, 4.5rem) |
| bt-space-section-m | clamp(4.5rem, 3.69rem + 2.71cqi, 6rem) |
| bt-space-section-l | clamp(6rem, 4.92rem + 3.61cqi, 8rem) |
| bt-space-section-xl | clamp(8rem, 6.56rem + 4.81cqi, 10.66rem) |
| bt-space-section-xxl | clamp(10.66rem, 8.74rem + 6.41cqi, 14.21rem) |
### Border radius
There are 2 variables for you to use for border radius. One is to unify all the border radius and second is to achieve circle borders.
| Variable name | Value |
| ---------------- | -------- |
| bt-radius | 0.375rem |
| bt-radius-circle | 50% |
### Colors
Bricks Boilerplate comes with 2 sets of colors, each with 12 shades. Their origin is from where each shade has its own purpose.
**Neutral colors:**
| Variable name | Value | Purpose |
| ------------- | ------- | ----------------------------------- |
| bt-neutral-1 | #fcfcfc | Backgrounds |
| bt-neutral-2 | #f9f9f9 | Backgrounds |
| bt-neutral-3 | #f0f0f0 | Interactive components |
| bt-neutral-4 | #e8e8e8 | Interactive components |
| bt-neutral-5 | #e0e0e0 | Interactive components |
| bt-neutral-6 | #d9d9d9 | Borders and separators |
| bt-neutral-7 | #cecece | Borders and separators |
| bt-neutral-8 | #bbb | Borders, focus rings, disabled text |
| bt-neutral-9 | #8d8d8d | Solid backgrounds, disabled text |
| bt-neutral-10 | #838383 | Solid backgrounds, disabled text |
| bt-neutral-11 | #646464 | Secondary text, links |
| bt-neutral-12 | #202020 | High-contrast text |
**Brand colors**
Change this to match your project style. You can use this tool to generate shades and tints for your brand color: or pick one from Radix colors:
Main primary color is --bt-brand-9, so you should set your main shade for that css variable.
| Variable name | Value | Purpose |
| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bt-brand-1 | #fdfdfe | Backgrounds |
| bt-brand-2 | #f7f8ff | Backgrounds |
| bt-brand-3 | #edeffe | Interactive components |
| bt-brand-4 | #e1e5ff | Interactive components |
| bt-brand-5 | #d2d7ff | Interactive components |
| bt-brand-6 | #c1c8ff | Borders and separators |
| bt-brand-7 | #abb4f9 | Borders and separators |
| bt-brand-8 | #8d99ef | Borders, focus rings, disabled text |
| **bt-brand-9** | #2c46fc | Solid backgrounds, disabled text - **this is your primary brand color** |
| bt-brand-10 | #0037e9 | Solid backgrounds, disabled text |
| bt-brand-11 | #3a4cc7 | Secondary text, links |
| bt-brand-12 | #1f275c | High-contrast text |
### Transitions
| Variable name | Value |
| -------------------- | ----- |
| bt-transition-fast | 0.2s |
| bt-transition-medium | 0.4s |
| bt-transition-slow | 0.7s |
### Widths
| Variable name | Value |
| ----------------------- | ------------------------------ |
| bt-width-full | 100% |
| bt-width-half-container | calc(var(--bt-page-width) / 2) |
| bt-width-s | 25rem |
| bt-width-m | 37.5rem |
| bt-width-l | 56.25rem |
| bt-width-xl | 70rem |