radium

import { radium } from '@cozmos-ui/themes';

{
  "config": {
    "id": "radium",
    "initialColorModeName": "light",
    "useBorderBox": false,
    "useColorSchemeMediaQuery": true,
    "useCustomProperties": true,
    "useRootStyles": true
  },
  "breakpoints": [
    "640px",
    "896px",
    "1024px",
    "1280px",
    "1440px"
  ],
  "colors": {
    "primary": "#006E56",
    "secondary": "#3c5aaf",
    "accent": "#694cae",
    "muted": "#6b6e76",
    "danger": "#b93740",
    "background": "#fff",
    "border": "#e9e9ea",
    "text": "#121316",
    "inputBg": "#fff",
    "inputBorder": "#e2e2e3",
    "layersBg": "#fff",
    "popoverBg": "#fff",
    "surfaces": [
      "#fff",
      "#f7f7f8",
      "#f3f3f3",
      "#eee",
      "#ececec",
      "#e9e9ea",
      "#e4e5e5",
      "#e2e2e3",
      "#ddddde",
      "#dbdbdc"
    ],
    "surfaceBg": "#fff",
    "surfacesDark": [
      "#121316",
      "#191a1c",
      "#1d1e21",
      "#222326",
      "#242528",
      "#27282a",
      "#2c2c2f",
      "#2e2f31",
      "#333436",
      "#353638"
    ],
    "surfacesLight": [
      "#fff",
      "#f7f7f8",
      "#f3f3f3",
      "#eee",
      "#ececec",
      "#e9e9ea",
      "#e4e5e5",
      "#e2e2e3",
      "#ddddde",
      "#dbdbdc"
    ],
    "modes": {
      "dark": {
        "primary": "#00c096",
        "secondary": "#6383da",
        "accent": "#9478d4",
        "muted": "#94979e",
        "danger": "#df636b",
        "background": "#121316",
        "border": "#27282a",
        "text": "#fff",
        "inputBg": "#121316",
        "inputBorder": "#2e2f31",
        "layersBg": "#191a1c",
        "popoverBg": "#222326",
        "surfaces": [
          "#121316",
          "#191a1c",
          "#1d1e21",
          "#222326",
          "#242528",
          "#27282a",
          "#2c2c2f",
          "#2e2f31",
          "#333436",
          "#353638"
        ],
        "surfaceBg": "#191a1c"
      }
    }
  },
  "fonts": {
    "body": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
    "heading": "inherit",
    "monospace": "\"Fira Code\", monospace"
  },
  "fontSizes": [
    12,
    14,
    16,
    20,
    24,
    32,
    48,
    64,
    72
  ],
  "fontWeights": {
    "body": 400,
    "bold": 500,
    "link": 500,
    "heading": 700
  },
  "lineHeights": {
    "body": 1.6,
    "dense": 1.4,
    "heading": 1.2,
    "roomy": 1.8
  },
  "letterSpacings": {
    "dense": "-0.015em",
    "heading": ""
  },
  "radii": [
    0,
    4,
    8,
    10,
    12,
    16,
    32
  ],
  "shadows": [
    "none",
    "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
    "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)",
    "0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)",
    "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
    "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)",
    "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)",
    "0px 4px 5px -2px rgba(0,0,0,0.2), 0px 7px 10px 1px rgba(0,0,0,0.14), 0px 2px 16px 1px rgba(0,0,0,0.12)",
    "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
    "0px 5px 6px -3px rgba(0,0,0,0.2), 0px 9px 12px 1px rgba(0,0,0,0.14), 0px 3px 16px 2px rgba(0,0,0,0.12)",
    "0px 6px 6px -3px rgba(0,0,0,0.2), 0px 10px 14px 1px rgba(0,0,0,0.14), 0px 4px 18px 3px rgba(0,0,0,0.12)"
  ],
  "space": [
    0,
    4,
    8,
    16,
    24,
    32,
    48,
    64,
    80,
    100
  ],
  "zIndices": {
    "alert": 11,
    "drawer": 10,
    "layoutHeader": 1,
    "modal": 10,
    "menu": 9,
    "popover": 9,
    "tooltip": 9
  },
  "buttons": {
    "sm": {
      "variant": "button",
      "height": 26,
      "px": 10,
      "fontSize": 0
    },
    "md": {
      "variant": "button",
      "height": 34,
      "minWidth": 70,
      "px": 14,
      "fontSize": 1
    },
    "lg": {
      "variant": "button",
      "height": 40,
      "px": 18,
      "fontSize": 2
    }
  },
  "text": {
    "body": {
      "fontFamily": "body",
      "fontWeight": "body",
      "lineHeight": "body"
    },
    "heading": {
      "fontFamily": "heading",
      "fontWeight": "heading",
      "lineHeight": "heading",
      "letterSpacing": "heading"
    }
  },
  "prism": {
    "backgroundColor": "surfacesDark.1",
    "color": "#ffffff",
    ".comment,.block-comment,.prolog,.doctype,.cdata,.shebang": {
      "color": "#999999"
    },
    ".comment": {
      "fontStyle": "italic"
    },
    ".property,.number,.function-name,.constant,.symbol,.deleted": {
      "color": "#5a9bcf"
    },
    ".boolean": {
      "color": "#F78C6C"
    },
    ".tag": {
      "color": "#f07178"
    },
    ".script": {
      "color": "inherit"
    },
    ".attr-name": {
      "color": "#C792EA"
    },
    ".attr-value": {
      "color": "#8dc891"
    },
    ".string": {
      "color": "#C3E88D"
    },
    ".punctuation": {
      "color": "#89DDFF"
    },
    ".selector,.char,.builtin,.inserted": {
      "color": "#D8DEE9"
    },
    ".function": {
      "color": "#82AAFF"
    },
    ".operator,.entity,.url,.variable": {
      "color": "#C792EA"
    },
    ".keyword": {
      "color": "#C792EA"
    },
    ".at-rule,.class-name": {
      "color": "#FFCB6B"
    },
    ".important": {
      "fontWeight": "400"
    },
    ".bold": {
      "fontWeight": "bold"
    },
    ".italic": {
      "fontStyle": "italic"
    },
    ".namespace": {
      "opacity": 0.7
    },
    ".highlight": {
      "background": "hsla(0, 0%, 40%, .5)"
    }
  },
  "code": {
    "variant": "prism",
    "fontFamily": "monospace",
    "fontSize": 1,
    "lineHeight": "20px",
    "bg": "surfacesDark.1"
  },
  "layers": {
    "drawer": {
      "container": {
        "variant": "layout.container",
        "py": 4
      }
    },
    "modal": {
      "container": {
        "variant": "layout.container",
        "py": 4
      }
    }
  },
  "layout": {
    "gutterX": 2,
    "gutterY": 3,
    "container": {
      "px": 4,
      "minWidth": 0
    },
    "header": {
      "height": 66,
      "bg": "background",
      "borderRight": "none",
      "borderRightColor": [
        null,
        null,
        "border"
      ],
      "borderBottom": "1px solid",
      "borderColor": "border",
      "borderTop": "1px solid transparent",
      "boxShadow": "0 2px 4px rgb(0 0 0 / 2%)"
    },
    "headerContent": {
      "variant": "layout.container",
      "mx": "auto"
    },
    "footer": {
      "py": 1
    },
    "footerContent": {
      "variant": "layout.container",
      "mx": "auto"
    },
    "main": {
      "variant": "layout.container",
      "width": "100%",
      "mx": "auto",
      "pt": 6,
      "pb": 6
    },
    "shell": {
      "gridTemplateColumns": [
        null,
        null,
        "250px 1fr",
        null,
        "260px 1fr"
      ],
      "gridAutoRows": "auto 1fr auto",
      "gridTemplateAreas": [
        "\"header\" \"main\" \"footer\"",
        null,
        "\"header header\" \"sidebar main\" \"sidebar footer\""
      ],
      "gridColumnGap": [
        null,
        null,
        null,
        2,
        3
      ]
    },
    "sidebar": {
      "variant": "layout.container",
      "pt": 6,
      "pb": 3,
      "borderRight": "1px solid",
      "borderColor": "border"
    },
    "sidebarMobile": {
      "variant": "layout.sidebar"
    }
  },
  "tableContainer": {
    "overflowX": "auto"
  },
  "nav": {
    "container": {
      "mx": -4,
      "mt": 2,
      "my": 0
    },
    "link": {
      "display": "block",
      "px": 4,
      "py": 2,
      "color": "text",
      "textDecoration": "none",
      "fontSize": 2,
      "fontWeight": "bold",
      "lineHeight": 1.64,
      "opacity": 0.9,
      "&:hover:not(.active)": {
        "bg": "surfaces.1",
        "opacity": 1
      },
      "&:focus-visible:not(.active)": {
        "bg": "surfaces.1",
        "opacity": 1
      },
      "&.active": {
        "bg": "surfaces.2",
        "opacity": 1
      }
    },
    "subLink": {
      "variant": "nav.link",
      "pl": 5,
      "fontSize": 1,
      "lineHeight": "dense",
      "color": "muted",
      "fontWeight": "body",
      "opacity": 1,
      "&.active": {
        "color": "text",
        "fontWeight": "bold"
      }
    },
    "dropdownLink": {
      "variant": "nav.link",
      "display": "flex",
      "alignItems": "center",
      "px": 3,
      "fontWeight": "body",
      "fontSize": 1
    },
    "tabLink": {
      "display": "block",
      "position": "relative",
      "px": 2,
      "py": 3,
      "color": "text",
      "textDecoration": "none",
      "fontSize": 2,
      "fontWeight": "bold",
      "&:after": {
        "position": "absolute",
        "bottom": 0,
        "left": 0,
        "height": 3,
        "width": "100%",
        "bg": "primary",
        "content": "\"\"",
        "opacity": 0,
        "transform": "translateY(3px)",
        "transition": "opacity 150ms ease-in-out, transform 150ms ease-in-out"
      },
      "&:hover": {
        "color": "primary"
      },
      "&:focus-visible": {
        "color": "primary"
      },
      "&.active": {
        "fontWeight": "heading",
        "&:after": {
          "opacity": 1,
          "transform": "translateY(0)"
        }
      }
    }
  },
  "styles": {
    "root": {
      "fontSize": 2,
      "fontFamily": "body",
      "fontWeight": "body",
      "lineHeight": "body",
      "textSizeAdjust": "100%"
    },
    "img": {
      "maxWidth": "100%",
      "height": "auto",
      "verticalAlign": "middle"
    },
    "a": {
      "color": "primary",
      "fontWeight": "link",
      "textDecoration": "none",
      "cursor": "pointer",
      "&:hover": {
        "textDecoration": "underline"
      }
    },
    "h1": {
      "variant": "text.heading",
      "mt": 1,
      "mb": 5,
      "fontSize": 5
    },
    "h2": {
      "variant": "text.heading",
      "mt": 4,
      "mb": 4,
      "fontSize": 4
    },
    "h3": {
      "variant": "text.heading",
      "mt": 3,
      "mb": 3,
      "fontSize": 3
    },
    "h4": {
      "variant": "text.heading",
      "mt": 2,
      "mb": 2,
      "fontSize": 2
    },
    "h5": {
      "variant": "text.heading",
      "mt": 2,
      "mb": 2,
      "fontSize": 1
    },
    "h6": {
      "variant": "text.heading",
      "mt": 2,
      "mb": 2,
      "fontSize": 0
    },
    "ul": {
      "p": 0,
      "m": 0,
      "mb": 3,
      "listStyle": "none"
    },
    "ol": {
      "p": 0,
      "m": 0,
      "mb": 3,
      "ml": 2,
      "listStylePosition": "inside",
      "listStyleImage": "none"
    },
    "li": {
      "mb": 1,
      "pl": 0,
      "ol": {
        "my": 2,
        "ml": 3
      },
      "ul": {
        "my": 2,
        "ml": 3
      },
      "p": {
        "mb": 2
      }
    },
    "p": {
      "mt": 0,
      "mb": 3
    },
    "table": {
      "p": 0,
      "m": 0,
      "borderCollapse": "collapse",
      "borderSpacing": 0,
      "width": "100%",
      "fontSize": 1
    },
    "th": {
      "px": 3,
      "py": 3,
      "textAlign": "left",
      "borderBottom": "1px solid",
      "borderColor": "border",
      "lineHeight": "heading",
      "fontWeight": "heading"
    },
    "td": {
      "px": 3,
      "py": 3,
      "textAlign": "left",
      "borderTop": "1px solid",
      "borderColor": "border",
      "lineHeight": "dense"
    },
    "blockquote": {
      "my": 5,
      "mx": 0,
      "px": 3,
      "py": 2,
      "fontWeight": "bold",
      "borderLeftStyle": "solid",
      "borderLeftWidth": "3px",
      "borderLeftColor": "border",
      "fontSize": 2,
      "> p": {
        "m": 0
      }
    },
    "b": {
      "fontWeight": "bold"
    },
    "strong": {
      "fontWeight": "bold"
    },
    "code": {
      "variant": "code"
    },
    "pre": {
      "variant": "code",
      "mt": 0,
      "mb": 6,
      "py": 3,
      "px": 3,
      "borderRadius": 4,
      "border": "1px solid",
      "borderColor": "surfacesDark.5",
      "whiteSpace": "pre-wrap",
      "wordBreak": "break-word",
      "height": "auto",
      "overflowX": "auto"
    },
    "inlineCode": {
      "variant": "code",
      "py": "0.2em",
      "px": "0.5em",
      "bg": "surfaces.3",
      "color": "text",
      "borderRadius": 2,
      "fontSize": "0.85em",
      "verticalAlign": "middle",
      "lineHeight": "inherit",
      "whiteSpace": "nowrap"
    },
    "hr": {
      "height": 0,
      "my": 3,
      "border": 0
    }
  }
}