CSS Variables
CSS variables are intended only for use with Less files to leverage Houzz UI theming. They may not be available in every Jukwaa app!
Semantic Spacing
Commonly used sizes available for semantic spacing. When necessary any pixel value can be used if it’s a multiple of 4.
| Size | Value | Alias | CSS | |
| none | 0px | Zero | --space-zero | --space-none |
| xxSmall | 4px | XXS | --space-xxs | --space-xx-small |
| xSmall | 8px | XS | --space-xs | --space-x-small |
| small | 12px | S | --space-s | --space-small |
| medium | 16px | M | --space-m | --space-medium |
| large | 20px | L | --space-l | --space-large |
| xLarge | 24px | XL | --space-xl | --space-x-large |
| xxLarge | 32px | XXL | --space-xxl | --space-xx-large |
| xxxLarge | 48px | XXXL | --space-xxxl | --space-xxx-large |
| xxxxLarge | 64px | XXXXL | --space-xxxl | --space-xxxx-large |
A corresponding negative scale can be helpful when setting negative margins or positioning.
| Size | Value | Alias | CSS | |
| -xxSmall | -4px | -XXS | --space-xxs-negative | --space-xx-small-negative |
| -xSmall | -8px | -XS | --space-xs-negative | --space-x-small-negative |
| -small | -12px | -S | --space-s-negative | --space-small-negative |
| -medium | -16px | -M | --space-m-negative | --space-medium-negative |
| -large | -20px | -L | --space-l-negative | --space-large-negative |
| -xLarge | -24px | -XL | --space-xl-negative | --space-x-large-negative |
| -xxLarge | -32px | -XXL | --space-xxl-negative | --space-xx-large-negative |
| -xxxLarge | -48px | -XXXL | --space-xxxl-negative | --space-xxx-large-negative |
| -xxxxLarge | -64px | -XXXXL | --space-xxxl-negative | --space-xxxx-large-negative |