# @liujip0/components

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`                |