Just a simple components library for my own personal use!
CSS variables to customize:
| Variable | Description | Default |
|---|---|---|
--text-font-family |
Text font family | sans-serif |
--text-body-size |
Size of body text | 1em |
--text-h1-size |
Size of h1 text | 2em |
--text-h2-size |
Size of h2 text | 1.5em |
--text-label-size |
Size of labels for input components | 0.9em |
--text-helperText-size |
Size of helper text for input components | 0.75em |
--color-primary |
Primary theme color | blue |
--color-primary-contrastText |
Text color when background color is --color-primary |
white |
--color-secondary |
Secondary theme color | orange |
--color-secondary-contrastText |
Text color when background color is --color-secondary |
white |
--color-background |
Background color | white |
--color-background-contrastText |
Text color when background color is --color-background |
black |
--color-paper |
Background color for modals, dialogs, popups, snackbars, etc. | gray |
--color-paper-contrastText |
Text color when background color is --color-paper |
black |
--color-error |
Color to indicate errors | red |
--z-index-backdrop |
z-index of backdrops or overlays | 99 |
--z-index-snackbar |
z-index of snackbars | 100 |
--z-index-modal |
z-index of modals, dialogs, popups, etc. | 101 |
--z-index-tooltip |
z-index of tooltips | 102 |
--border-radius |
Border radius for buttons, input components, etc. | 0 |
--border-width |
Border width for buttons, input components, etc. | 1px |
--input-height |
[Only used in the Counter component] Calculated height of an Input component |
calc(37.6px + 8px) |
--hover-dim |
Filter effect to apply to buttons, etc. on hover | brightness(0.8) |
--table-cell-padding |
Padding for table cells | 8px |
--table-border-width |
Border width for tables | 3px |
--table-cell-border-width |
Border width for cells within tables | 2px |