docs: adds first version of REST docs (#116)
This commit is contained in:
Sebastian Rindom
@@ -0,0 +1 @@
|
||||
export default ["40em", "52em", "64em"]
|
||||
@@ -0,0 +1,168 @@
|
||||
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",
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
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,92 @@
|
||||
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,85 @@
|
||||
import React from "react"
|
||||
import { ThemeProvider as Provider } from "emotion-theming"
|
||||
|
||||
import breakpoints from "./breakpoints"
|
||||
import buttons from "./buttons"
|
||||
import spacing from "./spacing"
|
||||
import shadows from "./shadows"
|
||||
import forms from "./forms"
|
||||
import labels from "./labels"
|
||||
|
||||
export const theme = {
|
||||
labels,
|
||||
colors: {
|
||||
primary: "#53725D",
|
||||
secondary: "#79B28A",
|
||||
medusaGreen: "#53725D",
|
||||
danger: "#FF7675",
|
||||
muted: "#E3E8EE",
|
||||
lightest: "#fefefe",
|
||||
light: "#f0f0f0",
|
||||
dark: "#454545",
|
||||
darkest: "#212121",
|
||||
placeholder: "#a3acb9",
|
||||
},
|
||||
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,
|
||||
}
|
||||
|
||||
export const ThemeProvider = ({ children }) => (
|
||||
<Provider theme={theme}>{children}</Provider>
|
||||
)
|
||||
@@ -0,0 +1,17 @@
|
||||
export const labels = {
|
||||
required: {
|
||||
color: "danger",
|
||||
fontSize: 0,
|
||||
},
|
||||
GET: {
|
||||
color: "green",
|
||||
},
|
||||
POST: {
|
||||
color: "blue",
|
||||
},
|
||||
DELETE: {
|
||||
color: "danger",
|
||||
},
|
||||
}
|
||||
|
||||
export default labels
|
||||
@@ -0,0 +1,111 @@
|
||||
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;
|
||||
`,
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export default [0, 4, 8, 16, 32, 64]
|
||||
Reference in New Issue
Block a user