release
This commit is contained in:
commit
47f67eea8c
43 changed files with 5819 additions and 0 deletions
648
lib/mappings.js
Normal file
648
lib/mappings.js
Normal file
|
|
@ -0,0 +1,648 @@
|
|||
const STYLE_MAPPINGS = {
|
||||
centered: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
padding: "2rem",
|
||||
width: "100%",
|
||||
},
|
||||
spaced: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: "1.5rem",
|
||||
width: "100%",
|
||||
},
|
||||
responsive: {
|
||||
flexWrap: "wrap",
|
||||
gap: "2rem",
|
||||
},
|
||||
horizontal: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: "1.5rem",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
},
|
||||
vertical: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1.5rem",
|
||||
width: "100%",
|
||||
},
|
||||
grid: {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "2rem",
|
||||
width: "100%",
|
||||
padding: "2rem 0",
|
||||
},
|
||||
wide: {
|
||||
width: "100%",
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
padding: "0 2rem",
|
||||
},
|
||||
alternate: {
|
||||
backgroundColor: "#0d1117",
|
||||
padding: "5rem 0",
|
||||
width: "100%",
|
||||
},
|
||||
sticky: {
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
right: "0",
|
||||
zIndex: "1000",
|
||||
backgroundColor: "rgba(13, 17, 23, 0.95)",
|
||||
backdropFilter: "blur(12px)",
|
||||
borderBottom: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
},
|
||||
|
||||
huge: {
|
||||
fontSize: "clamp(2.5rem, 5vw, 4rem)",
|
||||
fontWeight: "800",
|
||||
lineHeight: "1.1",
|
||||
letterSpacing: "-0.02em",
|
||||
color: "#ffffff",
|
||||
marginBottom: "1.5rem",
|
||||
textAlign: "center",
|
||||
},
|
||||
large: {
|
||||
fontSize: "clamp(1.5rem, 3vw, 2rem)",
|
||||
lineHeight: "1.3",
|
||||
color: "#ffffff",
|
||||
fontWeight: "600",
|
||||
marginBottom: "1rem",
|
||||
},
|
||||
small: {
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.5",
|
||||
color: "#8b949e",
|
||||
},
|
||||
bold: {
|
||||
fontWeight: "600",
|
||||
color: "#ffffff",
|
||||
},
|
||||
subtle: {
|
||||
color: "#8b949e",
|
||||
lineHeight: "1.6",
|
||||
marginBottom: "0.5rem",
|
||||
},
|
||||
|
||||
light: {
|
||||
backgroundColor: "transparent",
|
||||
color: "#8b949e",
|
||||
padding: "0.875rem 1.75rem",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
cursor: "pointer",
|
||||
fontWeight: "500",
|
||||
fontSize: "0.95rem",
|
||||
transition: "all 0.2s ease",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textDecoration: "none",
|
||||
":hover": {
|
||||
color: "#e6edf3",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
borderColor: "#6b7280",
|
||||
},
|
||||
},
|
||||
|
||||
raised: {
|
||||
backgroundColor: "#111827",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
padding: "2rem",
|
||||
transition: "all 0.2s ease",
|
||||
":hover": {
|
||||
transform: "translateY(-2px)",
|
||||
boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
|
||||
borderColor: "#3b82f6",
|
||||
},
|
||||
},
|
||||
prominent: {
|
||||
backgroundColor: "#3b82f6",
|
||||
color: "#ffffff",
|
||||
padding: "0.875rem 1.75rem",
|
||||
borderRadius: "12px",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontWeight: "500",
|
||||
fontSize: "0.95rem",
|
||||
transition: "all 0.2s ease",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textDecoration: "none",
|
||||
":hover": {
|
||||
backgroundColor: "#2563eb",
|
||||
transform: "translateY(-1px)",
|
||||
boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: "#1f2937",
|
||||
color: "#e6edf3",
|
||||
padding: "0.875rem 1.75rem",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
cursor: "pointer",
|
||||
fontWeight: "500",
|
||||
fontSize: "0.95rem",
|
||||
transition: "all 0.2s ease",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textDecoration: "none",
|
||||
":hover": {
|
||||
backgroundColor: "#374151",
|
||||
borderColor: "#6b7280",
|
||||
transform: "translateY(-1px)",
|
||||
},
|
||||
},
|
||||
compact: {
|
||||
padding: "0.75rem",
|
||||
borderRadius: "12px",
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
color: "#e6edf3",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
":hover": {
|
||||
backgroundColor: "#1f2937",
|
||||
borderColor: "#3b82f6",
|
||||
transform: "translateY(-1px)",
|
||||
},
|
||||
},
|
||||
|
||||
navbar: {
|
||||
backgroundColor: "rgba(13, 17, 23, 0.95)",
|
||||
backdropFilter: "blur(12px)",
|
||||
padding: "1rem 2rem",
|
||||
width: "100%",
|
||||
borderBottom: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000,
|
||||
"> *": {
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
},
|
||||
section: {
|
||||
padding: "5rem 0",
|
||||
backgroundColor: "#0d1117",
|
||||
marginTop: "5rem",
|
||||
"> *": {
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
},
|
||||
},
|
||||
card: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1.5rem",
|
||||
height: "100%",
|
||||
backgroundColor: "#111827",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
padding: "2rem",
|
||||
transition: "all 0.2s ease",
|
||||
marginBottom: "1rem",
|
||||
"> title": {
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: "600",
|
||||
color: "#ffffff",
|
||||
marginBottom: "0.5rem",
|
||||
},
|
||||
"> text": {
|
||||
color: "#8b949e",
|
||||
lineHeight: "1.6",
|
||||
},
|
||||
cursor: "default",
|
||||
},
|
||||
links: {
|
||||
display: "flex",
|
||||
gap: "2rem",
|
||||
alignItems: "center",
|
||||
"> *": {
|
||||
color: "#8b949e",
|
||||
textDecoration: "none",
|
||||
transition: "all 0.2s ease",
|
||||
fontSize: "0.95rem",
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
color: "#e6edf3",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
input: {
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
borderRadius: "12px",
|
||||
padding: "0.875rem 1.25rem",
|
||||
color: "#e6edf3",
|
||||
width: "100%",
|
||||
transition: "all 0.2s ease",
|
||||
outline: "none",
|
||||
fontSize: "0.95rem",
|
||||
":focus": {
|
||||
borderColor: "#3b82f6",
|
||||
boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.15)",
|
||||
},
|
||||
"::placeholder": {
|
||||
color: "#8b949e",
|
||||
},
|
||||
},
|
||||
textarea: {
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
borderRadius: "12px",
|
||||
padding: "0.875rem 1.25rem",
|
||||
color: "#e6edf3",
|
||||
width: "100%",
|
||||
minHeight: "120px",
|
||||
resize: "vertical",
|
||||
transition: "all 0.2s ease",
|
||||
outline: "none",
|
||||
fontSize: "0.95rem",
|
||||
":focus": {
|
||||
borderColor: "#3b82f6",
|
||||
boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.15)",
|
||||
},
|
||||
},
|
||||
select: {
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
borderRadius: "12px",
|
||||
padding: "0.875rem 2.5rem 0.875rem 1.25rem",
|
||||
color: "#e6edf3",
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
appearance: "none",
|
||||
fontSize: "0.95rem",
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\")",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "right 1rem center",
|
||||
backgroundSize: "1.5em 1.5em",
|
||||
transition: "all 0.2s ease",
|
||||
":focus": {
|
||||
borderColor: "#3b82f6",
|
||||
boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.15)",
|
||||
},
|
||||
},
|
||||
checkbox: {
|
||||
appearance: "none",
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
backgroundColor: "#111827",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
position: "relative",
|
||||
marginRight: "0.75rem",
|
||||
":checked": {
|
||||
backgroundColor: "#3b82f6",
|
||||
borderColor: "#3b82f6",
|
||||
"::after": {
|
||||
content: '"✓"',
|
||||
position: "absolute",
|
||||
color: "white",
|
||||
fontSize: "0.85rem",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
},
|
||||
},
|
||||
":hover": {
|
||||
borderColor: "#3b82f6",
|
||||
},
|
||||
},
|
||||
radio: {
|
||||
appearance: "none",
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
borderRadius: "50%",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
backgroundColor: "#111827",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
marginRight: "0.75rem",
|
||||
":checked": {
|
||||
borderColor: "#3b82f6",
|
||||
borderWidth: "4px",
|
||||
backgroundColor: "#ffffff",
|
||||
},
|
||||
":hover": {
|
||||
borderColor: "#3b82f6",
|
||||
},
|
||||
},
|
||||
progress: {
|
||||
appearance: "none",
|
||||
width: "100%",
|
||||
height: "0.75rem",
|
||||
borderRadius: "999px",
|
||||
overflow: "hidden",
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: "#111827",
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: "#3b82f6",
|
||||
transition: "width 0.3s ease",
|
||||
},
|
||||
"::-moz-progress-bar": {
|
||||
backgroundColor: "#3b82f6",
|
||||
transition: "width 0.3s ease",
|
||||
},
|
||||
},
|
||||
slider: {
|
||||
appearance: "none",
|
||||
width: "100%",
|
||||
height: "0.5rem",
|
||||
borderRadius: "999px",
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
cursor: "pointer",
|
||||
"::-webkit-slider-thumb": {
|
||||
appearance: "none",
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#3b82f6",
|
||||
border: "2px solid #ffffff",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
":hover": {
|
||||
transform: "scale(1.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
switch: {
|
||||
appearance: "none",
|
||||
position: "relative",
|
||||
width: "3.5rem",
|
||||
height: "1.75rem",
|
||||
backgroundColor: "#111827",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
borderRadius: "999px",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
marginRight: "0.75rem",
|
||||
":checked": {
|
||||
backgroundColor: "#3b82f6",
|
||||
borderColor: "#3b82f6",
|
||||
"::after": {
|
||||
transform: "translateX(1.75rem)",
|
||||
},
|
||||
},
|
||||
"::after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: "0.2rem",
|
||||
left: "0.2rem",
|
||||
width: "1.25rem",
|
||||
height: "1.25rem",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#ffffff",
|
||||
transition: "transform 0.2s ease",
|
||||
},
|
||||
},
|
||||
badge: {
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0.375rem 0.875rem",
|
||||
borderRadius: "999px",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: "500",
|
||||
backgroundColor: "#111827",
|
||||
color: "#e6edf3",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
minWidth: "4rem",
|
||||
transition: "all 0.2s ease",
|
||||
},
|
||||
alert: {
|
||||
padding: "1rem 1.5rem",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
backgroundColor: "#111827",
|
||||
color: "#e6edf3",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
fontSize: "0.95rem",
|
||||
},
|
||||
tooltip: {
|
||||
position: "relative",
|
||||
display: "inline-block",
|
||||
":hover::after": {
|
||||
content: "attr(data-tooltip)",
|
||||
position: "absolute",
|
||||
bottom: "120%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
padding: "0.5rem 1rem",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "#111827",
|
||||
color: "#e6edf3",
|
||||
fontSize: "0.875rem",
|
||||
whiteSpace: "nowrap",
|
||||
zIndex: "1000",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
border: "1px solid rgba(48, 54, 61, 0.6)",
|
||||
},
|
||||
},
|
||||
link: {
|
||||
color: "#e6edf3",
|
||||
textDecoration: "none",
|
||||
transition: "all 0.2s ease",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
":hover": {
|
||||
color: "#3b82f6",
|
||||
},
|
||||
},
|
||||
media: {
|
||||
display: "block",
|
||||
maxWidth: "100%",
|
||||
height: "auto",
|
||||
borderRadius: "8px",
|
||||
transition: "all 0.2s ease",
|
||||
":hover": {
|
||||
transform: "scale(1.01)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const ELEMENT_MAPPINGS = {
|
||||
page: {
|
||||
tag: "meta",
|
||||
defaultProps: [],
|
||||
},
|
||||
section: {
|
||||
tag: "section",
|
||||
defaultProps: ["wide"],
|
||||
},
|
||||
title: {
|
||||
tag: "h1",
|
||||
defaultProps: ["bold"],
|
||||
},
|
||||
subtitle: {
|
||||
tag: "h2",
|
||||
defaultProps: ["bold", "large"],
|
||||
},
|
||||
text: {
|
||||
tag: "p",
|
||||
defaultProps: [],
|
||||
},
|
||||
button: {
|
||||
tag: "button",
|
||||
defaultProps: ["prominent"],
|
||||
},
|
||||
"button-secondary": {
|
||||
tag: "button",
|
||||
defaultProps: ["secondary"],
|
||||
},
|
||||
"button-light": {
|
||||
tag: "button",
|
||||
defaultProps: ["light"],
|
||||
},
|
||||
"button-compact": {
|
||||
tag: "button",
|
||||
defaultProps: ["compact"],
|
||||
},
|
||||
link: {
|
||||
tag: "a",
|
||||
defaultProps: ["link"],
|
||||
},
|
||||
card: {
|
||||
tag: "div",
|
||||
defaultProps: ["raised", "card"],
|
||||
},
|
||||
grid: {
|
||||
tag: "div",
|
||||
defaultProps: ["grid", "responsive"],
|
||||
},
|
||||
horizontal: {
|
||||
tag: "div",
|
||||
defaultProps: ["horizontal", "spaced"],
|
||||
},
|
||||
vertical: {
|
||||
tag: "div",
|
||||
defaultProps: ["vertical"],
|
||||
},
|
||||
list: {
|
||||
tag: "ul",
|
||||
defaultProps: ["bullet"],
|
||||
},
|
||||
cell: {
|
||||
tag: "td",
|
||||
defaultProps: [],
|
||||
},
|
||||
row: {
|
||||
tag: "tr",
|
||||
defaultProps: [],
|
||||
},
|
||||
table: {
|
||||
tag: "table",
|
||||
defaultProps: ["table"],
|
||||
},
|
||||
codeblock: {
|
||||
tag: "pre",
|
||||
defaultProps: ["code"],
|
||||
},
|
||||
navbar: {
|
||||
tag: "nav",
|
||||
defaultProps: ["navbar", "sticky"],
|
||||
},
|
||||
links: {
|
||||
tag: "div",
|
||||
defaultProps: ["links"],
|
||||
},
|
||||
input: {
|
||||
tag: "input",
|
||||
defaultProps: ["input"],
|
||||
},
|
||||
textarea: {
|
||||
tag: "textarea",
|
||||
defaultProps: ["textarea"],
|
||||
},
|
||||
checkbox: {
|
||||
tag: "input",
|
||||
defaultProps: ["checkbox"],
|
||||
},
|
||||
radio: {
|
||||
tag: "input",
|
||||
defaultProps: ["radio"],
|
||||
},
|
||||
select: {
|
||||
tag: "select",
|
||||
defaultProps: ["select"],
|
||||
},
|
||||
progress: {
|
||||
tag: "progress",
|
||||
defaultProps: ["progress"],
|
||||
},
|
||||
slider: {
|
||||
tag: "input",
|
||||
defaultProps: ["slider"],
|
||||
},
|
||||
switch: {
|
||||
tag: "input",
|
||||
defaultProps: ["switch"],
|
||||
},
|
||||
badge: {
|
||||
tag: "span",
|
||||
defaultProps: ["badge"],
|
||||
},
|
||||
alert: {
|
||||
tag: "div",
|
||||
defaultProps: ["alert"],
|
||||
},
|
||||
tooltip: {
|
||||
tag: "span",
|
||||
defaultProps: ["tooltip"],
|
||||
},
|
||||
description: {
|
||||
tag: "meta",
|
||||
defaultProps: [],
|
||||
},
|
||||
keywords: {
|
||||
tag: "meta",
|
||||
defaultProps: [],
|
||||
},
|
||||
author: {
|
||||
tag: "meta",
|
||||
defaultProps: [],
|
||||
},
|
||||
media: {
|
||||
tag: "media",
|
||||
defaultProps: ["media"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
STYLE_MAPPINGS,
|
||||
ELEMENT_MAPPINGS,
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue