Larmbox ElementsCSS Variables
Elements uses CSS variables to allow you to customize the look and feel of your application. Any CSS variable can be overridden by setting it in your own CSS.
Each component also creates its own CSS variables, mostly inherited from the global variables. They can be found in the Component Reference of each component.
Here is a list of the global CSS variables and their default values:
| Variable | Default Value |
|---|---|
| background-color | #fff |
| background-color--active | var(--background-color) |
| background-color--disabled | #f4f4f4 |
| background-color--focus | var(--background-color) |
| background-color--hover | #f2f2f2 |
| body-color | var(--background-color) |
| border-color | #dadada |
| border-color--disabled | var(--border-color) |
| border-color--focus | var(--border-color) |
| border-color--hover | var(--border-color) |
| border-radius | 0.25rem |
| border-width | 1px |
| box-shadow | 0 0 1px 1px rgba(0, 0, 0, 0.05) |
| contrast-color | #fff |
| contrast-color--disabled | var(--contrast-color) |
| contrast-color--focus | var(--contrast-color) |
| contrast-color--hover | var(--contrast-color) |
| feedback-background-color | var(--feedback-color) |
| feedback-background-color--active | var(--feedback-color--active) |
| feedback-background-color--disabled | var(--feedback-color--disabled) |
| feedback-background-color--focus | var(--feedback-color--focus) |
| feedback-background-color--hover | var(--feedback-color--hover) |
| feedback-border-color | var(--feedback-color--hover) |
| feedback-border-color--active | var(--feedback-border-color) |
| feedback-border-color--disabled | #adc9f3 |
| feedback-border-color--focus | var(--feedback-border-color) |
| feedback-border-color--hover | #801a3d |
| feedback-box-shadow-color | #df2b2b36 |
| feedback-color | #b22454 |
| feedback-color--active | var(--feedback-color) |
| feedback-color--disabled | #70aaff |
| feedback-color--focus | var(--feedback-color) |
| feedback-color--hover | #991f48 |
| feedback-contrast-color | var(--contrast-color) |
| feedback-contrast-color--disabled | var(--feedback-contrast-color) |
| focus-shadow-size | 4px |
| font-size | 1rem |
| font-size-lg | 1.125rem |
| font-size-md | var(--font-size) |
| font-size-sm | 0.875rem |
| font-weight-bold | 700 |
| font-weight-light | 300 |
| font-weight-medium | 500 |
| font-weight-normal | 400 |
| font-weight-semibold | 600 |
| line-height | 1.65 |
| placeholder-color | gray |
| placeholder-color--disabled | var(--placeholder-color) |
| placeholder-color--focus | var(--placeholder-color) |
| placeholder-color--hover | var(--placeholder-color) |
| primary-background-color | var(--primary-color) |
| primary-background-color--active | var(--primary-color--active) |
| primary-background-color--disabled | var(--primary-color--disabled) |
| primary-background-color--focus | var(--primary-color--focus) |
| primary-background-color--hover | var(--primary-color--hover) |
| primary-border-color | var(--primary-color--hover) |
| primary-border-color--active | var(--primary-border-color) |
| primary-border-color--disabled | #91bdff |
| primary-border-color--focus | var(--primary-border-color) |
| primary-border-color--hover | #2057a8 |
| primary-box-shadow-color | #2b73df35 |
| primary-color | #2c4bff |
| primary-color--active | var(--primary-color) |
| primary-color--disabled | #70aaff |
| primary-color--focus | var(--primary-color) |
| primary-color--hover | #2665c4 |
| primary-contrast-color | var(--contrast-color) |
| primary-contrast-color--disabled | var(--primary-contrast-color) |
| spacing | 1rem |
| spacing-lg | 1.25rem |
| spacing-md | 1rem |
| spacing-sm | 0.75rem |
| spacing-xl | 1.5rem |
| spacing-xs | 0.5rem |
| text-color | #2c3e50 |
| text-color--disabled | var(--text-color--light) |
| text-color--focus | var(--text-color) |
| text-color--hover | var(--text-color) |
| text-color--light | #6c7782 |
| transition-time | .1s |
| transition-type | linear |