blueprint/lib/mappings.js

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: ["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,
};