# wots-ui-chameleon

Sass Framework (Chameleon) for Wots UI

# Color Paletter (set-color-palette):

-   **primary**: used for background, darker version for borders, lighter for hover effects
-   **secondary**: background for secondary content
-   **tertiary**: badges and off-layout uses

# Color classes keys

-   **bkg**: background-color
-   **box**: background-color, border-color, color
-   **brd**: border-color
-   **bsh**: box-shadow
-   **clr**: color
-   **hgl**: highlight effect on hover
-   **pal**: theme variables

# All abbreviations

-   **flx**: Flex
-   **grd**: Grid
-   **asr**: Aspect Ratio
-   **ff**: Font Family
-   **fs**: Font Size
-   **fw**: Font Weight
-   **fit**: Width and/or Height
-   **obj**: Object Fit and Position
-   **ovf**: Overflow
-   **pos**: Positioning and Position
-   **siz**: Size
-   **txt**: Text
-   **typ**: Typography presets