houzz-ui themes follow the Foundations defined by our design system.
Base Theme
Borders
Borders have 3 sizes: none, small, or medium
borders = {"none": "0","small": "1px solid","medium": "2px solid"}
Breakpoints
In styled-system, breakpoints are used to create responsive media queries based on array values for system-props. For example, if display is set to display={['none', 'block', 'flex']},
and breakpoints was [480, 960, 1200], the user would see the corresponding value at each min-width media query
breakpoints = ["480px","768px","1200px","1600px"]
Colors
View color scalesBorder Radius
Border radius sizes range from square to round
radii = {"square": "0px","none": "0px","small": "2px","medium": "4px","large": "8px","xLarge": "16px","round": "50%"}
Shadows
Three shadow levels are exposed + some focus helper. lvl is legacy, use the size values.
shadows = {"none": "none","lvl1": "0px 0px 8px rgba(114, 113, 105, 0.15)","lvl2": "0px 2px 16px rgba(114, 113, 105, 0.2)","lvl3": "0px 4px 20px rgba(114, 113, 105, 0.3)","small": "0px 0px 8px rgba(114, 113, 105, 0.15)","medium": "0px 2px 16px rgba(114, 113, 105, 0.2)","large": "0px 4px 20px rgba(114, 113, 105, 0.3)","focus": "0 0 0 3px rgba(114,113,105,0.6)"}
Space
Regular size (e.g. small, large, etc) & shorthand (S, L, XXS) are available. A negative scale is also exposed (prefix with -)
space = {"Zero": 0,"XXS": 4,"XS": 8,"S": 12,"M": 16,"L": 20,"XL": 24,"XXL": 32,"XXXL": 48,"XXXXL": 64,"-XXS": -4,"-XS": -8,"-S": -12,"-M": -16,"-L": -20,"-XL": -24,"-XXL": -32,"-XXXL": -48,"-XXXXL": -64,"none": 0,"xxSmall": 4,"xSmall": 8,"small": 12,"medium": 16,"large": 20,"xLarge": 24,"xxLarge": 32,"xxxLarge": 48,"xxxxLarge": 64,"-xxSmall": -4,"-xSmall": -8,"-small": -12,"-medium": -16,"-large": -20,"-xLarge": -24,"-xxLarge": -32,"-xxxLarge": -48,"-xxxxLarge": -64}
Typography
fontSizes = {"megaPlus": "40px","mega": "32px","xLarge": "28px","large": "24px","mediumPlus": "20px","medium": "20px","smallPlus": "18px","small": "16px","xSmall": "14px","tiny": "12px","inherit": "inherit"}
zIndices
zIndices = {"hide": -1,"backdrop": 500,"modal": 600,"popover": 610,"tooltip": 620}
Components
Some components allow style overrides if needed
Badge
badge = {"borderRadius": "medium","iconMarginRight": "XXS","accent": {"light": {"bg": "blue.tint4","color": "accent"},"core": {"bg": "accent","color": "content.inverse"},"dark": {"bg": "blue.shade4","color": "content.inverse"},"outline": {"color": "accent"},"outline-dark": {"color": "blue.shade4"}},"neutral": {"light": {"bg": "bg.accentTint","color": "neutral.black"},"core": {"bg": "neutral.gray700","color": "content.inverse"},"dark": {"bg": "neutral.black","color": "content.inverse"},"outline": {"color": "content.deemphasized"},"outline-dark": {"color": "neutral.black"}},"success": {"light": {"bg": "green.tint4","color": "neutral.black","> svg": {"color": "border.success"}},"core": {"bg": "green.core","color": "content.inverse"},"dark": {"bg": "green.shade3","color": "content.inverse"},"outline": {"color": "green.core"},"outline-dark": {"color": "green.shade3"}},"danger": {"light": {"bg": "red.tint4","color": "neutral.black","> svg": {"color": "border.danger"}},"core": {"bg": "danger","color": "content.inverse"},"dark": {"bg": "red.shade3","color": "content.inverse"},"outline": {"color": "danger"},"outline-dark": {"color": "red.shade3"}},"warning": {"light": {"bg": "yellow.tint4","color": "neutral.black","> svg": {"color": "border.warning"}},"core": {"bg": "warning","color": "neutral.black"},"dark": {"bg": "yellow.shade3","color": "content.inverse"},"outline": {"color": "warning"},"outline-dark": {"color": "yellow.shade3"}},"promotionalOffer": {"industryUpsell": {"bg": "blue.core","color": "content.inverse"}},"featureHighlighting": {"industryUpsell": {"bg": "yellow.tint2","color": "accent"}},"upgrade": {"industryUpsell": {"bg": "cyan.tint2","color": "accent"}},"premium": {"industryUpsell": {"bg": "green.tint2","color": "accent"}}}
Pill
pill = {"solid": {"neutral": {"backgroundColor": "bg.tertiary","&:not(span):hover": {"backgroundColor": "neutral.beige300"},"&:not(span):active": {"backgroundColor": "neutral.beige300"},"&:not(span):focus:not(:focus-visible)": {},"&:not(span):focus:not(:focus-visible,:active)": {}},"accent": {"backgroundColor": "bg.active","color": "accent","&:not(span):hover": {"color": "accent","bg": "bg.hover"},"&:not(span):focus": {"color": "accent"},"&:not(span):active": {"backgroundColor": "bg.active"},"&:not(span):visited": {"color": "accent"},"&:not(span):focus:not(:focus-visible)": {},"&:not(span):focus:not(:focus-visible,:active)": {}},"danger": {"backgroundColor": "bg.danger","color": "danger","&:not(span):hover": {"bg": "red.tint3","color": "danger"},"&:not(span):focus": {"color": "danger"},"&:not(span):active": {"backgroundColor": "red.tint3"},"&:not(span):visited": {"color": "danger"},"&:not(span):focus:not(:focus-visible)": {},"&:not(span):focus:not(:focus-visible,:active)": {}},"teal": {"backgroundColor": "teal.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "teal.tint3"},"&:not(span):active": {"backgroundColor": "teal.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"blue": {"backgroundColor": "blue.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "blue.tint3"},"&:not(span):active": {"backgroundColor": "blue.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"orange": {"backgroundColor": "orange.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "orange.tint3"},"&:not(span):active": {"backgroundColor": "orange.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"pink": {"backgroundColor": "pink.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "pink.tint3"},"&:not(span):active": {"backgroundColor": "pink.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"purple": {"backgroundColor": "purple.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "purple.tint3"},"&:not(span):active": {"backgroundColor": "purple.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"yellow": {"backgroundColor": "yellow.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "yellow.tint3"},"&:not(span):active": {"backgroundColor": "yellow.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}},"cyan": {"backgroundColor": "cyan.tint4","color": "content.primary","&:not(span):hover": {"backgroundColor": "cyan.tint3"},"&:not(span):active": {"backgroundColor": "cyan.tint4"},"&:not(span):visited": {"color": "content.primary"},"&:not(span):focus:not(:focus-visible)": {}}}}