feat: Update to API references look and feel (#343)
Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com> Co-authored-by: zakariasaad <zakaria.elas@gmail.com> Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com> Co-authored-by: olivermrbl <oliver@mrbltech.com>
This commit is contained in:
Kasper Fabricius Kristensen
co-authored by
Vadim Smirnov
zakariasaad
Vilfred Sikker
olivermrbl
Vadim Smirnov
zakariasaad
Vilfred Sikker
olivermrbl
parent
40400b483c
commit
143f06aa39
@@ -0,0 +1,2 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default ["40em", "52em", "64em"]
|
||||
@@ -0,0 +1,174 @@
|
||||
export const buttons = {
|
||||
pillActive: {
|
||||
cursor: "pointer",
|
||||
backgroundColor: "transparent",
|
||||
color: "dark",
|
||||
height: "40px",
|
||||
outline: 0,
|
||||
borderRadius: "3px",
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
boxShadow: "pillActive",
|
||||
"&:focus": {
|
||||
boxShadow: "pillActiveFocus",
|
||||
},
|
||||
},
|
||||
pill: {
|
||||
cursor: "pointer",
|
||||
backgroundColor: "transparent",
|
||||
color: "dark",
|
||||
height: "40px",
|
||||
outline: 0,
|
||||
borderRadius: "3px",
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
boxShadow: "pill",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
minHeight: "28px",
|
||||
fontWeight: "500",
|
||||
color: "light",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
backgroundColor: "danger",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonBoxShadowHover",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
minHeight: "24px",
|
||||
height: "28px",
|
||||
fontWeight: "500",
|
||||
color: "dark",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
backgroundColor: "lightest",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonBoxShadowHover",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
"&:disabled": {
|
||||
cursor: "not-allowed",
|
||||
pointerEvents: "none",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
green: {
|
||||
height: "30px",
|
||||
color: "lightest",
|
||||
backgroundColor: "#53725D",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowFocus",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
height: "30px",
|
||||
color: "light",
|
||||
backgroundColor: "dark",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowFocus",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
height: "30px",
|
||||
color: "white",
|
||||
backgroundColor: "medusaGreen",
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "ctaBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: "ctaBoxShadowHover",
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
cursor: "not-allowed",
|
||||
pointerEvents: "none",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
height: "30px",
|
||||
color: "white",
|
||||
backgroundColor: "#b02b13",
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "ctaBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: "ctaBoxShadowHover",
|
||||
},
|
||||
},
|
||||
trigger: {
|
||||
bg: "faded",
|
||||
alignItems: "baseline",
|
||||
fontSize: "13px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}
|
||||
|
||||
export default buttons
|
||||
@@ -0,0 +1,11 @@
|
||||
export default {
|
||||
primary: "#B27979",
|
||||
secondary: "#79B28A",
|
||||
medusaGreen: "#3ecf8e",
|
||||
lightest: "#fefefe",
|
||||
light: "#f0f0f0",
|
||||
gray: "#a3acb9",
|
||||
dark: "#454545",
|
||||
darkest: "#212121",
|
||||
placeholder: "#a3acb9",
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
invalidInput: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "invalidBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "danger",
|
||||
},
|
||||
},
|
||||
input: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "inputBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "placeholder",
|
||||
},
|
||||
},
|
||||
textarea: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "inputBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "placeholder",
|
||||
},
|
||||
},
|
||||
dropdown: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonPrimaryBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonPrimaryBoxShadowHover",
|
||||
},
|
||||
|
||||
"&:active": {
|
||||
boxShadow: "buttonPrimaryBoxShadowActive",
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import "../fonts/index.css"
|
||||
|
||||
import breakpoints from "./breakpoints"
|
||||
import buttons from "./buttons"
|
||||
import spacing from "./spacing"
|
||||
import shadows from "./shadows"
|
||||
import forms from "./forms"
|
||||
import labels from "./labels"
|
||||
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
sizes: {
|
||||
headerHeight: "50px",
|
||||
},
|
||||
links: {
|
||||
topbar: {
|
||||
fontFamily: "body",
|
||||
fontSize: "2",
|
||||
textDecoration: "none",
|
||||
color: "dark",
|
||||
},
|
||||
},
|
||||
text: {
|
||||
labels,
|
||||
largest: {
|
||||
fontFamily: "body",
|
||||
fontSize: "22px",
|
||||
fontweight: "300",
|
||||
lineHeight: "1.5",
|
||||
letterSpacing: "normal",
|
||||
},
|
||||
large: {
|
||||
fontFamily: "body",
|
||||
fontSize: "18px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "-0.5px",
|
||||
},
|
||||
medium: {
|
||||
fontFamily: "body",
|
||||
fontSize: "16px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "normal",
|
||||
},
|
||||
base: {
|
||||
fontFamily: "body",
|
||||
fontsize: "14px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "-0.25px",
|
||||
},
|
||||
small: {
|
||||
fontFamily: "body",
|
||||
fontSize: "12px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "12px",
|
||||
letterSpacing: "0px",
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
primary: "#53725D",
|
||||
secondary: "#79B28A",
|
||||
danger: "#FF7675",
|
||||
placeholder: "#a3acb9",
|
||||
dark: "#0a3149",
|
||||
darkContrast: "#0a314940",
|
||||
light: "#ffffff",
|
||||
faded: "#eef0f5",
|
||||
fadedContrast: "#eef0f540",
|
||||
},
|
||||
borders: {
|
||||
hairline: "1px solid #E3E8EE",
|
||||
},
|
||||
fontSizes: [12, 14, 16, 18, 22],
|
||||
fonts: {
|
||||
body:
|
||||
"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif",
|
||||
heading: "system-ui, sans-serif",
|
||||
monospace: "Menlo, monospace",
|
||||
},
|
||||
breakpoints,
|
||||
spacing,
|
||||
mediaQueries: {
|
||||
small: `@media screen and (min-width: ${breakpoints[0]})`,
|
||||
medium: `@media screen and (min-width: ${breakpoints[1]})`,
|
||||
large: `@media screen and (min-width: ${breakpoints[2]})`,
|
||||
},
|
||||
grid: {
|
||||
selectedShadow: `
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(206, 208, 190, 0.56) 0px 0px 0px 2px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
header: {
|
||||
padding: 2,
|
||||
fontSize: 1,
|
||||
fontFamily: "body",
|
||||
},
|
||||
data: {
|
||||
padding: 2,
|
||||
fontSize: 1,
|
||||
fontFamily: "body",
|
||||
},
|
||||
},
|
||||
shadows,
|
||||
variants: {
|
||||
loginCard: {
|
||||
boxShadow: "buttonBoxShadow",
|
||||
borderRadius: "3px",
|
||||
},
|
||||
badge: {
|
||||
fontSize: "0",
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
borderRadius: "3px",
|
||||
minWidth: "unset",
|
||||
px: "1",
|
||||
},
|
||||
},
|
||||
forms,
|
||||
buttons,
|
||||
radii: {
|
||||
small: "8px",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export const labels = {
|
||||
required: {
|
||||
color: "danger",
|
||||
fontSize: 0,
|
||||
},
|
||||
GET: {
|
||||
color: "#4159de",
|
||||
},
|
||||
POST: {
|
||||
color: "#09825d",
|
||||
},
|
||||
DELETE: {
|
||||
color: "#b50a0a",
|
||||
},
|
||||
}
|
||||
|
||||
export default labels
|
||||
@@ -0,0 +1,119 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
pill: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 0px 5px 0px;
|
||||
`,
|
||||
pillActive: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px
|
||||
`,
|
||||
pillActiveFocus: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px
|
||||
`,
|
||||
invalidBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(255, 66, 87, 0.8) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
inputBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
inputBoxShadowHover: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
buttonBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
buttonBoxShadowHover: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
buttonBoxShadowActive: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px;
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
tagBoxShadow: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgb(190, 191, 208) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 62, 87, 0.22) 0px 0px 0px 2px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px;
|
||||
`,
|
||||
ctaBoxShadow: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0.12) 0px 1px 1px 0px,
|
||||
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(60,66,87,0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
ctaBoxShadowHover: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0.12) 0px 1px 1px 0px,
|
||||
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(62, 207, 142, 0.25) 0px 3px 9px 0px;
|
||||
rgba(62, 207, 142, 0.25) 0px 2px 5px 0px;
|
||||
`,
|
||||
|
||||
sidebarShadow: `
|
||||
inset -1px 0 0 0 #eef0f5
|
||||
`,
|
||||
topbarShadow: `
|
||||
0 2px 5px 0 rgb(59 65 94 / 10%), 0 1px 1px 0 rgb(0 0 0 / 7%)
|
||||
`,
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default [0, 4, 8, 16, 32, 64]
|
||||
Reference in New Issue
Block a user