preset-default
@morfeo/preset-default is the fastest way to start using morfeo with 2 complete themes!
It expose 2 themes, light and dark, you can you use these themes as they are or customize them to fit your design!
Installation
with npm:
npm install @morfeo/preset-default
or yarn:
yarn add @morfeo/preset-default
Usage
import { initPreset } from '@morfeo/preset-default';
initPreset();
Or alternatively
import { lightTheme, darkTheme } from '@morfeo/preset-default';
morfeo.setTheme('light', { ...lightTheme, ...yourOverrides });
The preset expose 2 themes, one light and one dark:
import { lightTheme, darkTheme } from '@morfeo/preset-default';
If you like our themes, you can easily use them in your app with the initPreset function:
import { initPreset } from '@morfeo/preset-default';
morfeo.setCurrentTheme('light'); // Used by default
// OR
morfeo.setCurrentTheme('dark');
You can use these themes as they are or customize theme to fit your design:
import { darkTheme, lightTheme } from '@morfeo/preset-default';
morfeo.setTheme('dark', {
...darkTheme,
colors: myDarkColors,
});
morfeo.setTheme('light', {
...darkTheme,
colors: myLightColors,
});
Default Light Theme
{
"borders": {
"none": {
"width": "none",
"style": "none"
},
"strong": {
"width": "l",
"style": "solid",
"color": "text"
},
"medium": {
"width": "m",
"style": "solid",
"color": "text"
},
"thin": {
"width": "s",
"style": "solid",
"color": "text"
}
},
"borderStyles": {
"dashed": "dashed",
"dotted": "dotted",
"double": "double",
"groove": "groove",
"hidden": "hidden",
"none": "none",
"solid": "solid"
},
"borderWidths": {
"none": "0px",
"2xs": "0.2px",
"xs": "0.5px",
"s": "1px",
"m": "2px",
"l": "4px",
"xl": "6px",
"2xl": "8px"
},
"breakpoints": {
"lg": "1920px",
"md": "1366px",
"sm": "768px",
"xs": "375px"
},
"colors": {
"gray.darkest": "#2f2f2f",
"gray.darker": "#575757",
"gray.dark": "#6C6C6C",
"gray": "#828282",
"gray.light": "#d3d7db",
"gray.lighter": "#dee1e4",
"gray.lightest": "#f5f6f7",
"primary.darkest": "#0047b3",
"primary.darker": "#0057d9",
"primary.dark": "#005ce6",
"primary": "#0066ff",
"primary.light": "#1a75ff",
"primary.lighter": "#267dff",
"primary.lightest": "#4d94ff",
"secondary.darkest": "#991968",
"secondary.darker": "#ba1f7e",
"secondary.dark": "#c52085",
"secondary": "#db2494",
"secondary.light": "#df3a9f",
"secondary.lighter": "#e045a4",
"secondary.lightest": "#e666b4",
"error.lightest": "#ff918b",
"error.lighter": "#ff665d",
"error.light": "#ff584e",
"error": "#ff3b30",
"error.dark": "#ff1e12",
"error.darker": "#ff1003",
"error.darkest": "#d40b00",
"success.lightest": "#0ffea3",
"success.lighter": "#01ed93",
"success.light": "#01e38d",
"success": "#01ce80",
"success.dark": "#01b973",
"success.darker": "#01af6d",
"success.darkest": "#01905a",
"warning.lightest": "#fdd596",
"warning.lighter": "#fcc269",
"warning.light": "#fcbc59",
"warning": "#fbb03b",
"warning.dark": "#faa41d",
"warning.darker": "#fa9e0d",
"warning.darkest": "#d58304",
"accent.darkest": "#227b8b",
"accent.darker": "#2996a9",
"accent.dark": "#2b9eb3",
"accent": "#30b0c7",
"accent.light": "#3fbbd1",
"accent.lighter": "#49bed3",
"accent.lightest": "#67c9da",
"disabled": "#bcbcbc",
"white": "#ffffff",
"black": "#000000",
"background": "#ffffff",
"invertedBackground": "#000000",
"text": "#2f2f2f",
"invertedText": "#ececec",
"headText": "#000000",
"invertedHeadText": "#ffffff"
},
"components": {
"List": {
"tag": "ul",
"style": {
"my": "l",
"listStyle": "none",
"ml": "none",
"pl": "none"
},
"variants": {
"item": {
"tag": "li",
"style": {
"mt": "none",
"mb": "xs",
"pl": "xs",
"textIndent": "1em",
"position": "relative",
"&:before": {
"pr": "s",
"display": "inline-block",
"content": "\"•\"",
"fontWeight": "bold"
}
}
},
"item.arrow": {
"tag": "li",
"style": {
"componentName": "List",
"variant": "item",
"&:before": {
"pr": "s",
"display": "inline-block",
"fontWeight": "bold",
"content": "\"►\"",
"fontSize": "xs"
}
}
},
"item.outlinedBullet": {
"tag": "li",
"style": {
"componentName": "List",
"variant": "item",
"&:before": {
"pr": "s",
"display": "inline-block",
"fontWeight": "bold",
"content": "\"○\""
}
}
}
}
},
"Container": {
"tag": "div",
"style": {
"componentName": "Box",
"width": {
"xs": "100",
"sm": "100",
"md": "960px",
"lg": "960px"
},
"px": {
"xs": "s",
"sm": "s",
"md": "xs",
"lg": "xs"
},
"color": "text"
},
"variants": {
"fluid": {
"style": {
"width": "100"
}
},
"noGutter": {
"style": {
"px": "none"
}
},
"gridGutter": {
"style": {
"px": {
"xs": "2xs",
"sm": "2xs",
"md": "none",
"lg": "none"
}
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Grid": {
"tag": "div",
"style": {
"componentName": "Box",
"variant": "row"
},
"variants": {
"item": {
"style": {
"p": "xs",
"width": {
"xs": "100",
"sm": "50",
"md": "25",
"lg": "25"
}
}
},
"item.1": {
"style": {
"p": {
"xs": "xs",
"sm": "xs",
"md": "xs",
"lg": "xs"
},
"width": "8.3%"
}
},
"item.2": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "16.6%"
}
},
"item.3": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "25%"
}
},
"item.4": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "33.3%"
}
},
"item.5": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "41.6%"
}
},
"item.6": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "50%"
}
},
"item.7": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"p": "2xs",
"minWidth": "58.3%"
}
},
"item.8": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "66.6%"
}
},
"item.9": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "75"
}
},
"item.10": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "83.3%"
}
},
"item.11": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "91.6%"
}
},
"item.12": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "100%"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Button": {
"tag": "button",
"style": {
"px": "s",
"py": "2xs",
"bg": "invertedBackground",
"corner": "xs",
"color": "invertedText",
"cursor": "pointer",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"fontSize": "m",
"fontFamily": "default",
"fontWeight": "light",
"border": "none",
"overflow": "hidden",
"position": "relative",
"transition": "medium",
"&:after": {
"content": "\"\"",
"color": "error",
"position": "absolute",
"top": "none",
"left": "none",
"size": "100",
"bg": "white",
"opacity": "light",
"clipPath": "circle(0%)",
"transition": "medium"
},
"&:hover": {
"&:after": {
"clipPath": "circle(80%)"
}
},
"&:active": {
"bg": "primary.light",
"&:after": {
"clipPath": "circle(20%)"
}
}
},
"variants": {
"inverted": {
"style": {
"bg": "background",
"color": "text"
}
},
"small": {
"style": {
"fontSize": "s",
"px": "xs"
}
},
"small.inverted": {
"style": {
"componentName": "Button",
"variant": "small",
"bg": "background",
"color": "text"
}
},
"small.primary": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "primary"
}
},
"small.secondary": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "secondary"
}
},
"small.warning": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "warning"
}
},
"small.error": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "error"
}
},
"small.success": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "success"
}
},
"primary": {
"style": {
"color": "white",
"bg": "primary"
}
},
"secondary": {
"style": {
"color": "white",
"bg": "secondary"
}
},
"warning": {
"style": {
"color": "white",
"bg": "warning"
}
},
"error": {
"style": {
"color": "white",
"bg": "error"
}
},
"success": {
"style": {
"color": "white",
"bg": "success"
}
},
"round": {
"style": {
"size": "m",
"px": "none",
"py": "none",
"corner": "round",
"lineHeight": "none",
"letterSpacing": "none"
}
},
"round.inverted": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "text",
"bg": "background"
}
},
"round.primary": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "primary"
}
},
"round.secondary": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "secondary"
}
},
"round.success": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "success"
}
},
"round.warning": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "warning"
}
},
"round.error": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "error"
}
},
"round.small": {
"style": {
"componentName": "Button",
"variant": "round",
"size": "s",
"fontSize": "xs"
}
},
"round.small.inverted": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "text",
"bg": "background"
}
},
"round.small.primary": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "primary"
}
},
"round.small.secondary": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "secondary"
}
},
"round.small.success": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "success"
}
},
"round.small.warning": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "warning"
}
},
"round.small.error": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "error"
}
},
"round.large": {
"style": {
"componentName": "Button",
"variant": "round",
"size": "xl"
}
},
"round.large.inverted": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "text",
"bg": "background"
}
},
"round.large.primary": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "primary"
}
},
"round.large.secondary": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "secondary"
}
},
"round.large.success": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "success"
}
},
"round.large.warning": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "warning"
}
},
"round.large.error": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "error"
}
},
"group": {
"style": {
"corner": "none",
"borderRight": "medium",
"borderRightColor": "white",
"&:first-child": {
"cornerBottomLeft": "xs",
"cornerTopLeft": "xs",
"borderRight": "medium",
"borderRightColor": "white"
},
"&:last-child": {
"cornerBottomRight": "xs",
"cornerTopRight": "xs"
}
}
}
}
},
"Checkbox": {
"tag": "input",
"props": {
"type": "checkbox"
},
"style": {
"size": "xs",
"mr": "xs"
},
"variants": {}
},
"CheckboxContainer": {
"tag": "div",
"style": {
"pb": "l",
"display": "flex",
"alignItems": "flex-start"
},
"variants": {}
},
"CheckboxLabel": {
"tag": "label",
"style": {
"componentName": "Typography",
"variant": "p",
"mb": "none",
"position": "relative",
"top": "-5px"
},
"variants": {}
},
"GroupButtonContainer": {
"style": {
"componentName": "Box",
"variant": "row"
},
"variants": {}
},
"Input": {
"tag": "input",
"style": {
"width": "100",
"minWidth": "100",
"py": "2xs",
"px": "2xs",
"fontSize": "m",
"fontWeight": "light",
"fontFamily": "default",
"corner": "xs",
"boxSizing": "border-box !important",
"bg": "white",
"color": "gray.darkest",
"border": "none",
"outline": "thin",
"lineHeight": "none",
"position": "relative",
"&:focus": {
"outline": "strong",
"outlineColor": "primary",
"color": "gray.dark"
}
},
"variants": {
"error": {
"style": {
"outlineColor": "error",
"outline": "strong"
}
},
"success": {
"style": {
"outlineColor": "success",
"outline": "strong"
}
},
"warning": {
"style": {
"outlineColor": "warning",
"outline": "strong"
}
},
"small": {
"style": {
"fontSize": "s",
"py": "2xs",
"px": "2xs",
"lineHeight": "none"
}
},
"small.error": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "error",
"outline": "strong"
}
},
"small.warning": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "warning",
"outline": "strong"
}
},
"small.success": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "success",
"outline": "strong"
}
}
}
},
"InputContainer": {
"tag": "div",
"style": {
"position": "relative",
"mb": "l",
"display": "flex",
"flexDirection": "column"
},
"variants": {}
},
"InputFeedback": {
"tag": "p",
"style": {
"fontSize": "xs",
"fontFamily": "default",
"fontWeight": "bold",
"lineHeight": "none",
"letterSpacing": "body",
"mt": "2xs"
},
"variants": {
"error": {
"style": {
"color": "error"
}
},
"warning": {
"style": {
"color": "warning"
}
},
"success": {
"style": {
"color": "success"
}
}
}
},
"Label": {
"tag": "label",
"style": {
"fontSize": "s",
"fontFamily": "default",
"fontWeight": "medium",
"letterSpacing": "body",
"lineHeight": "none",
"mb": "2xs"
},
"variants": {
"small": {
"style": {
"fontSize": "xs"
}
}
}
},
"Footer": {
"tag": "footer",
"style": {
"componentName": "Box",
"width": "100",
"py": "2xl",
"minHeight": "200px",
"px": {
"xs": "s",
"sm": "s",
"md": "m",
"lg": "m"
},
"color": "text"
},
"variants": {
"primary": {
"style": {
"bg": "primary",
"color": "white"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Header": {
"tag": "header",
"style": {
"componentName": "Box",
"display": "flex",
"alignItems": "center",
"px": {
"xs": "s",
"sm": "s",
"md": "m",
"lg": "m"
},
"width": "100",
"minHeight": "60px",
"color": "text"
},
"variants": {
"primary": {
"style": {
"bg": "primary",
"color": "white"
}
},
"primary.fixed": {
"style": {
"position": "fixed",
"top": "none",
"left": "none",
"bg": "primary",
"color": "white",
"zIndex": "highest"
}
},
"fixed": {
"style": {
"position": "fixed",
"top": "none",
"left": "none",
"zIndex": "highest"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Main": {
"tag": "main",
"style": {
"componentName": "Box",
"width": "100",
"minHeight": "calc(100vh - 260px)"
},
"variants": {},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Page": {
"tag": "div",
"style": {
"componentName": "Box",
"width": "100",
"minHeight": "100vh",
"bg": "background"
},
"variants": {},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Section": {
"tag": "section",
"style": {
"componentName": "Box",
"width": "100",
"py": "2xl",
"display": "flex",
"alignItems": "center",
"flexDirection": "column"
},
"variants": {
"quarter": {
"style": {
"height": "25vh"
}
},
"half": {
"style": {
"height": "50vh"
}
},
"full": {
"style": {
"height": "100vh"
}
},
"quarter.primary": {
"style": {
"bg": "primary",
"height": "25vh"
}
},
"half.primary": {
"style": {
"bg": "primary",
"height": "50vh"
}
},
"full.primary": {
"style": {
"bg": "primary",
"height": "100vh"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Table": {
"tag": "table",
"style": {
"minWidth": "100",
"fontFamily": "default",
"fontSize": "m"
},
"variants": {}
},
"TableBody": {
"tag": "tbody",
"style": {},
"variants": {}
},
"TableCell": {
"tag": "td",
"style": {
"p": "xs"
},
"variants": {}
},
"TableHead": {
"tag": "thead",
"style": {
"borderBottom": "strong",
"fontFamily": "default",
"fontWeight": "bold"
},
"variants": {}
},
"TableHeadCell": {
"tag": "td",
"style": {
"p": "xs",
"textAlign": "left",
"textTransform": "uppercase"
},
"variants": {}
},
"TableRow": {
"tag": "tr",
"style": {
"&:nth-child(even)": {
"bg": "rgba(100,100,100,0.1)"
},
"&:last-child": {
"borderBottom": "strong"
}
},
"variants": {}
},
"TableRowDark": {
"tag": "tr",
"style": {
"&:nth-child(even)": {
"bg": "rgba(255,255,255,0.1)"
},
"&:last-child": {
"borderBottom": "strong"
}
},
"variants": {}
},
"Hr": {
"tag": "hr",
"style": {
"width": "100",
"border": "thin",
"mb": "l"
},
"variants": {
"primary": {
"style": {
"borderColor": "primary"
}
},
"reduced": {
"style": {
"mt": "none",
"pt": "none",
"mb": "xs"
}
},
"reduced.primary": {
"style": {
"borderColor": "primary",
"mt": "none",
"pt": "none",
"mb": "xs"
}
}
}
},
"Box": {
"tag": "div",
"style": {
"position": "relative",
"fontFamily": "default",
"boxSizing": "border-box"
},
"variants": {
"block": {
"style": {
"display": "block"
}
},
"column": {
"style": {
"display": "flex",
"flexDirection": "column",
"flexWrap": "wrap"
}
},
"row": {
"style": {
"display": "flex",
"flexDirection": "row",
"flexWrap": "wrap"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"size": "80px",
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Card": {
"tag": "div",
"style": {
"componentName": "Box",
"borderRadius": "m",
"shadow": "light",
"fontFamily": "default",
"color": "text",
"bg": "background",
"overflow": "hidden",
"border": "none",
"position": "relative"
},
"variants": {
"hoverable": {
"style": {
"cursor": "pointer",
"transition": "medium",
"&:hover": {
"transform": "translateY(-5px)",
"shadow": "strong"
}
}
},
"primary": {
"style": {
"bg": "primary",
"color": "white"
}
},
"warning": {
"style": {
"bg": "warning",
"color": "white"
}
},
"error": {
"style": {
"bg": "error",
"color": "white"
}
},
"success": {
"style": {
"bg": "success",
"color": "white"
}
},
"basic": {
"style": {
"shadow": "none"
},
"meta": {
"devtoolConfig": {
"background": "gray.lightest"
}
}
},
"outlined": {
"style": {
"componentName": "Card",
"variant": "basic",
"border": "thin",
"shadow": "none"
},
"meta": {
"devtoolConfig": {
"background": "white"
}
}
},
"outlined.primary": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "primary",
"shadow": "none"
}
},
"outlined.warning": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "warning",
"shadow": "none"
}
},
"outlined.error": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "error",
"shadow": "none"
}
},
"outlined.success": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "success",
"shadow": "none"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"size": "80px",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Typography": {
"tag": "p",
"style": {
"fontFamily": "default",
"color": "text",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
},
"variants": {
"p": {
"style": {
"fontSize": "m",
"fontWeight": "light",
"letterSpacing": "body",
"lineHeight": "body",
"mb": "s"
}
},
"p2": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "s"
}
},
"p3": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "xs"
}
},
"p4": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "2xs"
}
},
"h1": {
"tag": "h1",
"style": {
"color": "headText",
"fontSize": "2xl",
"fontWeight": "bold",
"letterSpacing": "heading",
"lineHeight": "none",
"mb": "xs"
}
},
"h2": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "xl"
}
},
"h3": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "l"
}
},
"h4": {
"tag": "h4",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "m"
}
},
"h5": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h2",
"fontWeight": "light"
}
},
"h6": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h3",
"fontWeight": "light"
}
},
"p.inverted": {
"style": {
"color": "invertedText",
"fontSize": "m",
"fontWeight": "light",
"letterSpacing": "body",
"lineHeight": "body"
}
},
"p2.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "s"
}
},
"p3.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "xs"
}
},
"p4.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "2xs"
}
},
"h1.inverted": {
"tag": "h1",
"style": {
"color": "invertedHeadText",
"fontSize": "2xl",
"fontWeight": "bold",
"letterSpacing": "heading",
"lineHeight": "heading"
}
},
"h2.inverted": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "xl"
}
},
"h3.inverted": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "l"
}
},
"h4.inverted": {
"tag": "h4",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "m"
}
},
"h5.inverted": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h2",
"fontWeight": "light"
}
},
"h6.inverted": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h3",
"fontWeight": "light"
}
},
"display": {
"tag": "h1",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "3xl",
"lineHeight": "none"
}
},
"link": {
"tag": "a",
"style": {
"color": "primary",
"fontWeight": "bold",
"cursor": "pointer",
"&:hover": {
"color": "primary.light"
}
}
},
"cta": {
"tag": "a",
"style": {
"cursor": "pointer",
"color": "primary",
"fontWeight": "bold",
"borderBottom": "strong",
"borderBottomColor": "primary",
"pb": "3xs",
"&:hover": {
"color": "primary.light",
"borderBottomColor": "primary.light"
}
}
},
"code": {
"tag": "code",
"style": {
"display": "block",
"fontFamily": "mono",
"lineHeight": "body",
"p": "xs",
"bg": "gray.darkest",
"color": "white",
"width": "100",
"boxSizing": "border-box",
"my": "l"
}
},
"quote": {
"style": {
"fontStyle": "italic",
"lineHeight": "body",
"color": "gray.light",
"my": "l",
"&:before": {
"content": "\"“\"",
"display": "inline"
},
"&:after": {
"content": "\"”\"",
"display": "inline"
}
}
},
"blockQuote": {
"style": {
"fontSize": "m",
"fontStyle": "italic",
"fontWeight": "light",
"lineHeight": "body",
"bg": "gray.lightest",
"color": "gray",
"p": "xs",
"boxSizing": "border-box",
"my": "l",
"width": "100",
"&:before": {
"content": "\"“\"",
"display": "inline"
},
"&:after": {
"content": "\"”\"",
"display": "inline"
}
}
}
}
}
},
"fonts": {
"mono": "'Red Hat Mono', monospace",
"default": "Montserrat"
},
"fontSizes": {
"2xs": ".5rem",
"xs": ".75rem",
"s": ".875rem",
"m": "1rem",
"l": "1.125rem",
"xl": "1.5rem",
"2xl": "2rem",
"3xl": "5rem",
"4xl": "7rem",
"none": "0"
},
"fontWeights": {
"thin": "100",
"extraLight": "200",
"light": "300",
"regular": "400",
"medium": "500",
"semiBold": "600",
"bold": "700",
"extraBold": "800",
"black": "900",
"extraBlack": "950"
},
"gradients": {
"primary": {
"colors": [
"primary",
"secondary"
]
},
"secondary": {
"colors": [
"light",
"white"
]
}
},
"letterSpacings": {
"body": "0.02rem",
"heading": "0.005rem",
"none": "0rem"
},
"lineHeights": {
"body": "1.7",
"heading": "1.5",
"none": "1"
},
"mediaQueries": {},
"opacities": {
"none": 0,
"light": 0.2,
"medium": 0.6,
"strong": 1
},
"radii": {
"2xs": "4px",
"xs": "8px",
"s": "12px",
"m": "16px",
"l": "20px",
"xl": "24px",
"2xl": "28px",
"none": "0px",
"round": "50%"
},
"shadows": {
"none": {
"color": "gray",
"opacity": "light",
"offset": {
"height": "none",
"width": "none"
},
"radius": "none"
},
"light": {
"color": "gray.lighter",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
},
"medium": {
"color": "gray.light",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
},
"strong": {
"color": "gray",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
}
},
"sizes": {
"25": "25%",
"50": "50%",
"75": "75%",
"100": "100%",
"2xs": "8px",
"xs": "16px",
"s": "24px",
"m": "32px",
"l": "40px",
"xl": "48px",
"2xl": "56px",
"25vh": "25vh",
"50vh": "50vh",
"75vh": "75vh",
"100vh": "100vh",
"25vw": "25vw",
"50vw": "50vw",
"75vw": "75vw",
"100vw": "100vw",
"none": "0px"
},
"spacings": {
"none": "0rem",
"3xs": ".25rem",
"2xs": ".5rem",
"xs": "1rem",
"s": "1.5rem",
"m": "2rem",
"l": "2.5rem",
"xl": "3rem",
"2xl": "3.5rem",
"3xl": "4rem",
"4xl": "5rem",
"5xl": "6rem"
},
"transitions": {
"slow": "1s ease",
"medium": ".6s ease",
"fast": ".3s ease",
"none": "0s"
},
"zIndices": {
"none": 0,
"lowest": -1,
"lower": 1,
"low": 10,
"high": 20,
"higher": 30,
"highest": 40
}
}
Default Dark Theme
{
"borders": {
"none": {
"width": "none",
"style": "none"
},
"strong": {
"width": "l",
"style": "solid",
"color": "text"
},
"medium": {
"width": "m",
"style": "solid",
"color": "text"
},
"thin": {
"width": "s",
"style": "solid",
"color": "text"
}
},
"borderStyles": {
"dashed": "dashed",
"dotted": "dotted",
"double": "double",
"groove": "groove",
"hidden": "hidden",
"none": "none",
"solid": "solid"
},
"borderWidths": {
"none": "0px",
"2xs": "0.2px",
"xs": "0.5px",
"s": "1px",
"m": "2px",
"l": "4px",
"xl": "6px",
"2xl": "8px"
},
"breakpoints": {
"lg": "1920px",
"md": "1366px",
"sm": "768px",
"xs": "375px"
},
"colors": {
"gray.darkest": "#2f2f2f",
"gray.darker": "#575757",
"gray.dark": "#6C6C6C",
"gray": "#828282",
"gray.light": "#d3d7db",
"gray.lighter": "#dee1e4",
"gray.lightest": "#f5f6f7",
"primary.darkest": "#0047b3",
"primary.darker": "#0057d9",
"primary.dark": "#005ce6",
"primary": "#0066ff",
"primary.light": "#1a75ff",
"primary.lighter": "#267dff",
"primary.lightest": "#4d94ff",
"secondary.darkest": "#991968",
"secondary.darker": "#ba1f7e",
"secondary.dark": "#c52085",
"secondary": "#db2494",
"secondary.light": "#df3a9f",
"secondary.lighter": "#e045a4",
"secondary.lightest": "#e666b4",
"error.lightest": "#ff918b",
"error.lighter": "#ff665d",
"error.light": "#ff584e",
"error": "#ff3b30",
"error.dark": "#ff1e12",
"error.darker": "#ff1003",
"error.darkest": "#d40b00",
"success.lightest": "#0ffea3",
"success.lighter": "#01ed93",
"success.light": "#01e38d",
"success": "#01ce80",
"success.dark": "#01b973",
"success.darker": "#01af6d",
"success.darkest": "#01905a",
"warning.lightest": "#fdd596",
"warning.lighter": "#fcc269",
"warning.light": "#fcbc59",
"warning": "#fbb03b",
"warning.dark": "#faa41d",
"warning.darker": "#fa9e0d",
"warning.darkest": "#d58304",
"accent.darkest": "#227b8b",
"accent.darker": "#2996a9",
"accent.dark": "#2b9eb3",
"accent": "#30b0c7",
"accent.light": "#3fbbd1",
"accent.lighter": "#49bed3",
"accent.lightest": "#67c9da",
"disabled": "#bcbcbc",
"white": "#ffffff",
"black": "#000000",
"background": "#000000",
"invertedBackground": "#ffffff",
"text": "#ececec",
"invertedText": "#2f2f2f",
"headText": "#ffffff",
"invertedHeadText": "#000000"
},
"components": {
"List": {
"tag": "ul",
"style": {
"my": "l",
"listStyle": "none",
"ml": "none",
"pl": "none"
},
"variants": {
"item": {
"tag": "li",
"style": {
"mt": "none",
"mb": "xs",
"pl": "xs",
"textIndent": "1em",
"position": "relative",
"&:before": {
"pr": "s",
"display": "inline-block",
"content": "\"•\"",
"fontWeight": "bold"
}
}
},
"item.arrow": {
"tag": "li",
"style": {
"componentName": "List",
"variant": "item",
"&:before": {
"pr": "s",
"display": "inline-block",
"fontWeight": "bold",
"content": "\"►\"",
"fontSize": "xs"
}
}
},
"item.outlinedBullet": {
"tag": "li",
"style": {
"componentName": "List",
"variant": "item",
"&:before": {
"pr": "s",
"display": "inline-block",
"fontWeight": "bold",
"content": "\"○\""
}
}
}
}
},
"Container": {
"tag": "div",
"style": {
"componentName": "Box",
"width": {
"xs": "100",
"sm": "100",
"md": "960px",
"lg": "960px"
},
"px": {
"xs": "s",
"sm": "s",
"md": "xs",
"lg": "xs"
},
"color": "text"
},
"variants": {
"fluid": {
"style": {
"width": "100"
}
},
"noGutter": {
"style": {
"px": "none"
}
},
"gridGutter": {
"style": {
"px": {
"xs": "2xs",
"sm": "2xs",
"md": "none",
"lg": "none"
}
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Grid": {
"tag": "div",
"style": {
"componentName": "Box",
"variant": "row"
},
"variants": {
"item": {
"style": {
"p": "xs",
"width": {
"xs": "100",
"sm": "50",
"md": "25",
"lg": "25"
}
}
},
"item.1": {
"style": {
"p": {
"xs": "xs",
"sm": "xs",
"md": "xs",
"lg": "xs"
},
"width": "8.3%"
}
},
"item.2": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "16.6%"
}
},
"item.3": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "25%"
}
},
"item.4": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "33.3%"
}
},
"item.5": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "41.6%"
}
},
"item.6": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"width": "50%"
}
},
"item.7": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"p": "2xs",
"minWidth": "58.3%"
}
},
"item.8": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "66.6%"
}
},
"item.9": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "75"
}
},
"item.10": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "83.3%"
}
},
"item.11": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "91.6%"
}
},
"item.12": {
"style": {
"componentName": "Grid",
"variant": "item.1",
"minWidth": "100%"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Button": {
"tag": "button",
"style": {
"px": "s",
"py": "2xs",
"bg": "invertedBackground",
"corner": "xs",
"color": "invertedText",
"cursor": "pointer",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"fontSize": "m",
"fontFamily": "default",
"fontWeight": "light",
"border": "none",
"overflow": "hidden",
"position": "relative",
"transition": "medium",
"&:after": {
"content": "\"\"",
"color": "error",
"position": "absolute",
"top": "none",
"left": "none",
"size": "100",
"bg": "white",
"opacity": "light",
"clipPath": "circle(0%)",
"transition": "medium"
},
"&:hover": {
"&:after": {
"clipPath": "circle(80%)"
}
},
"&:active": {
"bg": "primary.light",
"&:after": {
"clipPath": "circle(20%)"
}
}
},
"variants": {
"inverted": {
"style": {
"bg": "background",
"color": "text"
}
},
"small": {
"style": {
"fontSize": "s",
"px": "xs"
}
},
"small.inverted": {
"style": {
"componentName": "Button",
"variant": "small",
"bg": "background",
"color": "text"
}
},
"small.primary": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "primary"
}
},
"small.secondary": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "secondary"
}
},
"small.warning": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "warning"
}
},
"small.error": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "error"
}
},
"small.success": {
"style": {
"componentName": "Button",
"variant": "small",
"color": "white",
"bg": "success"
}
},
"primary": {
"style": {
"color": "white",
"bg": "primary"
}
},
"secondary": {
"style": {
"color": "white",
"bg": "secondary"
}
},
"warning": {
"style": {
"color": "white",
"bg": "warning"
}
},
"error": {
"style": {
"color": "white",
"bg": "error"
}
},
"success": {
"style": {
"color": "white",
"bg": "success"
}
},
"round": {
"style": {
"size": "m",
"px": "none",
"py": "none",
"corner": "round",
"lineHeight": "none",
"letterSpacing": "none"
}
},
"round.inverted": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "text",
"bg": "background"
}
},
"round.primary": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "primary"
}
},
"round.secondary": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "secondary"
}
},
"round.success": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "success"
}
},
"round.warning": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "warning"
}
},
"round.error": {
"style": {
"componentName": "Button",
"variant": "round",
"color": "white",
"bg": "error"
}
},
"round.small": {
"style": {
"componentName": "Button",
"variant": "round",
"size": "s",
"fontSize": "xs"
}
},
"round.small.inverted": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "text",
"bg": "background"
}
},
"round.small.primary": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "primary"
}
},
"round.small.secondary": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "secondary"
}
},
"round.small.success": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "success"
}
},
"round.small.warning": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "warning"
}
},
"round.small.error": {
"style": {
"componentName": "Button",
"variant": "round.small",
"color": "white",
"bg": "error"
}
},
"round.large": {
"style": {
"componentName": "Button",
"variant": "round",
"size": "xl"
}
},
"round.large.inverted": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "text",
"bg": "background"
}
},
"round.large.primary": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "primary"
}
},
"round.large.secondary": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "secondary"
}
},
"round.large.success": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "success"
}
},
"round.large.warning": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "warning"
}
},
"round.large.error": {
"style": {
"componentName": "Button",
"variant": "round.large",
"color": "white",
"bg": "error"
}
},
"group": {
"style": {
"corner": "none",
"borderRight": "medium",
"borderRightColor": "white",
"&:first-child": {
"cornerBottomLeft": "xs",
"cornerTopLeft": "xs",
"borderRight": "medium",
"borderRightColor": "white"
},
"&:last-child": {
"cornerBottomRight": "xs",
"cornerTopRight": "xs"
}
}
}
}
},
"Checkbox": {
"tag": "input",
"props": {
"type": "checkbox"
},
"style": {
"size": "xs",
"mr": "xs"
},
"variants": {}
},
"CheckboxContainer": {
"tag": "div",
"style": {
"pb": "l",
"display": "flex",
"alignItems": "flex-start"
},
"variants": {}
},
"CheckboxLabel": {
"tag": "label",
"style": {
"componentName": "Typography",
"variant": "p",
"mb": "none",
"position": "relative",
"top": "-5px"
},
"variants": {}
},
"GroupButtonContainer": {
"style": {
"componentName": "Box",
"variant": "row"
},
"variants": {}
},
"Input": {
"tag": "input",
"style": {
"width": "100",
"minWidth": "100",
"py": "2xs",
"px": "2xs",
"fontSize": "m",
"fontWeight": "light",
"fontFamily": "default",
"corner": "xs",
"boxSizing": "border-box !important",
"bg": "white",
"color": "gray.darkest",
"border": "none",
"outline": "thin",
"lineHeight": "none",
"position": "relative",
"&:focus": {
"outline": "strong",
"outlineColor": "primary",
"color": "gray.dark"
}
},
"variants": {
"error": {
"style": {
"outlineColor": "error",
"outline": "strong"
}
},
"success": {
"style": {
"outlineColor": "success",
"outline": "strong"
}
},
"warning": {
"style": {
"outlineColor": "warning",
"outline": "strong"
}
},
"small": {
"style": {
"fontSize": "s",
"py": "2xs",
"px": "2xs",
"lineHeight": "none"
}
},
"small.error": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "error",
"outline": "strong"
}
},
"small.warning": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "warning",
"outline": "strong"
}
},
"small.success": {
"style": {
"componentName": "Input",
"variant": "small",
"outlineColor": "success",
"outline": "strong"
}
}
}
},
"InputContainer": {
"tag": "div",
"style": {
"position": "relative",
"mb": "l",
"display": "flex",
"flexDirection": "column"
},
"variants": {}
},
"InputFeedback": {
"tag": "p",
"style": {
"fontSize": "xs",
"fontFamily": "default",
"fontWeight": "bold",
"lineHeight": "none",
"letterSpacing": "body",
"mt": "2xs"
},
"variants": {
"error": {
"style": {
"color": "error"
}
},
"warning": {
"style": {
"color": "warning"
}
},
"success": {
"style": {
"color": "success"
}
}
}
},
"Label": {
"tag": "label",
"style": {
"fontSize": "s",
"fontFamily": "default",
"fontWeight": "medium",
"letterSpacing": "body",
"lineHeight": "none",
"mb": "2xs"
},
"variants": {
"small": {
"style": {
"fontSize": "xs"
}
}
}
},
"Footer": {
"tag": "footer",
"style": {
"componentName": "Box",
"width": "100",
"py": "2xl",
"minHeight": "200px",
"px": {
"xs": "s",
"sm": "s",
"md": "m",
"lg": "m"
},
"color": "text"
},
"variants": {
"primary": {
"style": {
"bg": "primary",
"color": "white"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Header": {
"tag": "header",
"style": {
"componentName": "Box",
"display": "flex",
"alignItems": "center",
"px": {
"xs": "s",
"sm": "s",
"md": "m",
"lg": "m"
},
"width": "100",
"minHeight": "60px",
"color": "text"
},
"variants": {
"primary": {
"style": {
"bg": "primary",
"color": "white"
}
},
"primary.fixed": {
"style": {
"position": "fixed",
"top": "none",
"left": "none",
"bg": "primary",
"color": "white",
"zIndex": "highest"
}
},
"fixed": {
"style": {
"position": "fixed",
"top": "none",
"left": "none",
"zIndex": "highest"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Main": {
"tag": "main",
"style": {
"componentName": "Box",
"width": "100",
"minHeight": "calc(100vh - 260px)"
},
"variants": {},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Page": {
"tag": "div",
"style": {
"componentName": "Box",
"width": "100",
"minHeight": "100vh",
"bg": "background"
},
"variants": {},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Section": {
"tag": "section",
"style": {
"componentName": "Box",
"width": "100",
"py": "2xl",
"display": "flex",
"alignItems": "center",
"flexDirection": "column"
},
"variants": {
"quarter": {
"style": {
"height": "25vh"
}
},
"half": {
"style": {
"height": "50vh"
}
},
"full": {
"style": {
"height": "100vh"
}
},
"quarter.primary": {
"style": {
"bg": "primary",
"height": "25vh"
}
},
"half.primary": {
"style": {
"bg": "primary",
"height": "50vh"
}
},
"full.primary": {
"style": {
"bg": "primary",
"height": "100vh"
}
}
},
"meta": {
"devtoolConfig": {
"hide": true
}
}
},
"Table": {
"tag": "table",
"style": {
"minWidth": "100",
"fontFamily": "default",
"fontSize": "m"
},
"variants": {}
},
"TableBody": {
"tag": "tbody",
"style": {},
"variants": {}
},
"TableCell": {
"tag": "td",
"style": {
"p": "xs"
},
"variants": {}
},
"TableHead": {
"tag": "thead",
"style": {
"borderBottom": "strong",
"fontFamily": "default",
"fontWeight": "bold"
},
"variants": {}
},
"TableHeadCell": {
"tag": "td",
"style": {
"p": "xs",
"textAlign": "left",
"textTransform": "uppercase"
},
"variants": {}
},
"TableRow": {
"tag": "tr",
"style": {
"&:nth-child(even)": {
"bg": "rgba(100,100,100,0.1)"
},
"&:last-child": {
"borderBottom": "strong"
}
},
"variants": {}
},
"TableRowDark": {
"tag": "tr",
"style": {
"&:nth-child(even)": {
"bg": "rgba(255,255,255,0.1)"
},
"&:last-child": {
"borderBottom": "strong"
}
},
"variants": {}
},
"Hr": {
"tag": "hr",
"style": {
"width": "100",
"border": "thin",
"mb": "l"
},
"variants": {
"primary": {
"style": {
"borderColor": "primary"
}
},
"reduced": {
"style": {
"mt": "none",
"pt": "none",
"mb": "xs"
}
},
"reduced.primary": {
"style": {
"borderColor": "primary",
"mt": "none",
"pt": "none",
"mb": "xs"
}
}
}
},
"Box": {
"tag": "div",
"style": {
"position": "relative",
"fontFamily": "default",
"boxSizing": "border-box"
},
"variants": {
"block": {
"style": {
"display": "block"
}
},
"column": {
"style": {
"display": "flex",
"flexDirection": "column",
"flexWrap": "wrap"
}
},
"row": {
"style": {
"display": "flex",
"flexDirection": "row",
"flexWrap": "wrap"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"size": "80px",
"bg": "gray.lighter",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Card": {
"tag": "div",
"style": {
"componentName": "Box",
"borderRadius": "m",
"shadow": "none",
"fontFamily": "default",
"color": "text",
"bg": "background",
"overflow": "hidden",
"border": "thin",
"position": "relative",
"borderColor": "text"
},
"variants": {
"hoverable": {
"style": {
"cursor": "pointer",
"transition": "medium",
"&:hover": {
"shadow": "none",
"borderColor": "secondary"
},
"border": "thin"
}
},
"primary": {
"style": {
"bg": "primary",
"color": "white",
"border": "none"
}
},
"warning": {
"style": {
"bg": "warning",
"color": "white",
"border": "none"
}
},
"error": {
"style": {
"bg": "error",
"color": "white",
"border": "none"
}
},
"success": {
"style": {
"bg": "success",
"color": "white",
"border": "none"
}
},
"basic": {
"style": {
"shadow": "none",
"border": "none"
},
"meta": {
"devtoolConfig": {
"background": "gray.lightest"
}
}
},
"outlined": {
"style": {
"componentName": "Card",
"variant": "basic",
"border": "thin",
"shadow": "none"
},
"meta": {
"devtoolConfig": {
"background": "white"
}
}
},
"outlined.primary": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "primary",
"shadow": "none"
}
},
"outlined.warning": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "warning",
"shadow": "none"
}
},
"outlined.error": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "error",
"shadow": "none"
}
},
"outlined.success": {
"style": {
"componentName": "Card",
"variant": "outlined",
"borderColor": "success",
"shadow": "none"
}
}
},
"meta": {
"devtoolConfig": {
"style": {
"size": "80px",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
}
},
"Typography": {
"tag": "p",
"style": {
"fontFamily": "default",
"color": "text",
"WebkitFontSmoothing": "antialiased",
"MozOsxFontSmoothing": "grayscale"
},
"variants": {
"p": {
"style": {
"fontSize": "m",
"fontWeight": "light",
"letterSpacing": "body",
"lineHeight": "body",
"mb": "s"
}
},
"p2": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "s"
}
},
"p3": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "xs"
}
},
"p4": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "2xs"
}
},
"h1": {
"tag": "h1",
"style": {
"color": "headText",
"fontSize": "2xl",
"fontWeight": "bold",
"letterSpacing": "heading",
"lineHeight": "none",
"mb": "xs"
}
},
"h2": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "xl"
}
},
"h3": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "l"
}
},
"h4": {
"tag": "h4",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "m"
}
},
"h5": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h2",
"fontWeight": "light"
}
},
"h6": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h3",
"fontWeight": "light"
}
},
"p.inverted": {
"style": {
"color": "invertedText",
"fontSize": "m",
"fontWeight": "light",
"letterSpacing": "body",
"lineHeight": "body"
}
},
"p2.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "s"
}
},
"p3.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "xs"
}
},
"p4.inverted": {
"style": {
"componentName": "Typography",
"variant": "p",
"fontSize": "2xs"
}
},
"h1.inverted": {
"tag": "h1",
"style": {
"color": "invertedHeadText",
"fontSize": "2xl",
"fontWeight": "bold",
"letterSpacing": "heading",
"lineHeight": "heading"
}
},
"h2.inverted": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "xl"
}
},
"h3.inverted": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "l"
}
},
"h4.inverted": {
"tag": "h4",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "m"
}
},
"h5.inverted": {
"tag": "h2",
"style": {
"componentName": "Typography",
"variant": "h2",
"fontWeight": "light"
}
},
"h6.inverted": {
"tag": "h3",
"style": {
"componentName": "Typography",
"variant": "h3",
"fontWeight": "light"
}
},
"display": {
"tag": "h1",
"style": {
"componentName": "Typography",
"variant": "h1",
"fontSize": "3xl",
"lineHeight": "none"
}
},
"link": {
"tag": "a",
"style": {
"color": "primary",
"fontWeight": "bold",
"cursor": "pointer",
"&:hover": {
"color": "primary.light"
}
}
},
"cta": {
"tag": "a",
"style": {
"cursor": "pointer",
"color": "primary",
"fontWeight": "bold",
"borderBottom": "strong",
"borderBottomColor": "primary",
"pb": "3xs",
"&:hover": {
"color": "primary.light",
"borderBottomColor": "primary.light"
}
}
},
"code": {
"tag": "code",
"style": {
"display": "block",
"fontFamily": "mono",
"lineHeight": "body",
"p": "xs",
"bg": "gray.darkest",
"color": "white",
"width": "100",
"boxSizing": "border-box",
"my": "l"
}
},
"quote": {
"style": {
"fontStyle": "italic",
"lineHeight": "body",
"color": "gray.light",
"my": "l",
"&:before": {
"content": "\"“\"",
"display": "inline"
},
"&:after": {
"content": "\"”\"",
"display": "inline"
}
}
},
"blockQuote": {
"style": {
"fontSize": "m",
"fontStyle": "italic",
"fontWeight": "light",
"lineHeight": "body",
"bg": "gray.lightest",
"color": "gray",
"p": "xs",
"boxSizing": "border-box",
"my": "l",
"width": "100",
"&:before": {
"content": "\"“\"",
"display": "inline"
},
"&:after": {
"content": "\"”\"",
"display": "inline"
}
}
}
}
}
},
"fonts": {
"mono": "'Red Hat Mono', monospace",
"default": "Montserrat"
},
"fontSizes": {
"2xs": ".5rem",
"xs": ".75rem",
"s": ".875rem",
"m": "1rem",
"l": "1.125rem",
"xl": "1.5rem",
"2xl": "2rem",
"3xl": "5rem",
"4xl": "7rem",
"none": "0"
},
"fontWeights": {
"thin": "100",
"extraLight": "200",
"light": "300",
"regular": "400",
"medium": "500",
"semiBold": "600",
"bold": "700",
"extraBold": "800",
"black": "900",
"extraBlack": "950"
},
"gradients": {
"primary": {
"colors": [
"primary",
"secondary"
]
},
"secondary": {
"colors": [
"light",
"white"
]
}
},
"letterSpacings": {
"body": "0.02rem",
"heading": "0.005rem",
"none": "0rem"
},
"lineHeights": {
"body": "1.7",
"heading": "1.5",
"none": "1"
},
"mediaQueries": {},
"opacities": {
"none": 0,
"light": 0.2,
"medium": 0.6,
"strong": 1
},
"radii": {
"2xs": "4px",
"xs": "8px",
"s": "12px",
"m": "16px",
"l": "20px",
"xl": "24px",
"2xl": "28px",
"none": "0px",
"round": "50%"
},
"shadows": {
"none": {
"color": "gray",
"opacity": "light",
"offset": {
"height": "none",
"width": "none"
},
"radius": "none"
},
"light": {
"color": "gray.lighter",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
},
"medium": {
"color": "gray.light",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
},
"strong": {
"color": "gray",
"opacity": "light",
"offset": {
"height": "xl",
"width": "none"
},
"radius": "l"
}
},
"sizes": {
"25": "25%",
"50": "50%",
"75": "75%",
"100": "100%",
"2xs": "8px",
"xs": "16px",
"s": "24px",
"m": "32px",
"l": "40px",
"xl": "48px",
"2xl": "56px",
"25vh": "25vh",
"50vh": "50vh",
"75vh": "75vh",
"100vh": "100vh",
"25vw": "25vw",
"50vw": "50vw",
"75vw": "75vw",
"100vw": "100vw",
"none": "0px"
},
"spacings": {
"none": "0rem",
"3xs": ".25rem",
"2xs": ".5rem",
"xs": "1rem",
"s": "1.5rem",
"m": "2rem",
"l": "2.5rem",
"xl": "3rem",
"2xl": "3.5rem",
"3xl": "4rem",
"4xl": "5rem",
"5xl": "6rem"
},
"transitions": {
"slow": "1s ease",
"medium": ".6s ease",
"fast": ".3s ease",
"none": "0s"
},
"zIndices": {
"none": 0,
"lowest": -1,
"lower": 1,
"low": 10,
"high": 20,
"higher": 30,
"highest": 40
}
}