chakra-ui/dist/CSSReset/index.js

Responsive and accessible React UI components built with React and Emotion

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n        /* Normalize CSS */\n        html {\n          -webkit-font-smoothing: antialiased;\n          -webkit-text-size-adjust: 100%;\n          text-rendering: optimizelegibility;\n        }\n\n        body {\n          margin: 0;\n        }\n\n        main {\n          display: block;\n        }\n\n        h1 {\n          font-size: 2em;\n          margin: 0.67em 0;\n        }\n\n        hr {\n          box-sizing: content-box;\n          height: 0;\n          overflow: visible;\n        }\n\n        pre {\n          font-family: monospace, monospace;\n          font-size: 1em;\n        }\n\n        a {\n          background-color: transparent;\n        }\n\n        abbr[title] {\n          border-bottom: none;\n          text-decoration: underline;\n          text-decoration: underline dotted;\n        }\n\n        b,\n        strong {\n          font-weight: bolder;\n        }\n\n        code,\n        kbd,\n        samp {\n          font-family: monospace, monospace;\n          font-size: 1em;\n        }\n\n        small {\n          font-size: 80%;\n        }\n\n        sub,\n        sup {\n          font-size: 75%;\n          line-height: 0;\n          position: relative;\n          vertical-align: baseline;\n        }\n\n        sub {\n          bottom: -0.25em;\n        }\n\n        sup {\n          top: -0.5em;\n        }\n\n        img {\n          border-style: none;\n        }\n\n        button,\n        input,\n        optgroup,\n        select,\n        textarea {\n          font-family: inherit;\n          font-size: 100%;\n          line-height: 1.15;\n          margin: 0;\n        }\n\n        button,\n        input {\n          overflow: visible;\n        }\n\n        button,\n        select {\n          text-transform: none;\n        }\n\n        button,\n        [type=\"button\"],\n        [type=\"reset\"],\n        [type=\"submit\"] {\n          -webkit-appearance: button;\n        }\n\n        button::-moz-focus-inner,\n        [type=\"button\"]::-moz-focus-inner,\n        [type=\"reset\"]::-moz-focus-inner,\n        [type=\"submit\"]::-moz-focus-inner {\n          border-style: none;\n          padding: 0;\n        }\n\n        fieldset {\n          padding: 0.35em 0.75em 0.625em;\n        }\n\n        legend {\n          box-sizing: border-box;\n          color: inherit;\n          display: table;\n          max-width: 100%;\n          padding: 0;\n          white-space: normal;\n        }\n\n        progress {\n          vertical-align: baseline;\n        }\n\n        textarea {\n          overflow: auto;\n        }\n\n        [type=\"checkbox\"],\n        [type=\"radio\"] {\n          box-sizing: border-box;\n          padding: 0;\n        }\n\n        [type=\"number\"]::-webkit-inner-spin-button,\n        [type=\"number\"]::-webkit-outer-spin-button {\n          -webkit-appearance: none !important;\n        }\n\n        [type=\"search\"] {\n          -webkit-appearance: textfield;\n          outline-offset: -2px;\n        }\n\n        [type=\"search\"]::-webkit-search-decoration {\n          -webkit-appearance: none;\n        }\n\n        ::-webkit-file-upload-button {\n          -webkit-appearance: button;\n          font: inherit;\n        }\n\n        details {\n          display: block;\n        }\n\n        summary {\n          display: list-item;\n        }\n\n        template {\n          display: none;\n        }\n\n        [hidden] {\n          display: none !important;\n        }\n\n        /* SUIT CSS Base */\n\n        html {\n          box-sizing: border-box;\n          font-family: sans-serif;\n        }\n\n        *,\n        *::before,\n        *::after {\n          box-sizing: border-box;\n        }\n\n        blockquote,\n        dl,\n        dd,\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        figure,\n        p,\n        pre {\n          margin: 0;\n        }\n\n        button {\n          background: transparent;\n          padding: 0;\n        }\n\n        fieldset {\n          margin: 0;\n          padding: 0;\n        }\n\n        ol,\n        ul {\n          /* list-style: none; */\n          margin: 0;\n          padding: 0;\n        }\n\n        /* Chakra Custom Reset Style */\n\n        html {\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n            \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n            \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n            \"Noto Color Emoji\";\n          line-height: 1.5;\n          font-size: 1rem;\n          color: ", ";\n          background-color: ", ";\n        }\n\n        *,\n        *::before,\n        *::after {\n          border-width: 0;\n          border-style: solid;\n          border-color: ", ";\n        }\n\n        img {\n          border-style: solid;\n        }\n\n        img,\n        video {\n          max-width: 100%;\n          height: auto;\n        }\n\n        textarea {\n          resize: vertical;\n        }\n\n        input::placeholder,\n        textarea::placeholder {\n          color: inherit;\n          opacity: 0.5;\n        }\n\n        button,\n        [role=\"button\"] {\n          cursor: pointer;\n        }\n\n        *,\n        *:focus {\n          outline: 0;\n        }\n\n        button::-moz-focus-inner {\n          border: 0 !important;\n        }\n\n        table {\n          border-collapse: collapse;\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          font-size: inherit;\n          font-weight: inherit;\n        }\n\n        button,\n        input,\n        optgroup,\n        select,\n        textarea {\n          padding: 0;\n          line-height: inherit;\n          color: inherit;\n        }\n\n        pre,\n        code,\n        kbd,\n        samp {\n          font-family: Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n            monospace;\n        }\n      "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

/** @jsx jsx */
import { jsx, Global, css } from "@emotion/core";
import { useUIMode } from "../ThemeProvider";

var getThemedStyle = function getThemedStyle(_ref) {
  var colors = _ref.colors;
  return {
    light: {
      color: colors.gray[800],
      bg: undefined,
      borderColor: colors.gray[200]
    },
    dark: {
      color: colors.whiteAlpha[900],
      bg: colors.gray[800],
      borderColor: colors.whiteAlpha[300]
    }
  };
};

var CSSReset = function CSSReset() {
  var _useUIMode = useUIMode(),
      mode = _useUIMode.mode;

  return jsx(Global, {
    styles: function styles(theme) {
      return css(_templateObject(), getThemedStyle(theme)[mode]["color"], getThemedStyle(theme)[mode]["bg"], getThemedStyle(theme)[mode]["borderColor"]);
    }
  });
};

export default CSSReset;