@vtex/admin-core - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.6.0](https://github.com/vtex/onda/compare/@vtex/admin-core@0.5.1...@vtex/admin-core@0.6.0) (2021-02-12)
+
+
+### Features
+
+* **admin-core:** allow theme overrides & custom components ([607c59c](https://github.com/vtex/onda/commit/607c59c0685ebca2f774758da560999fa024d773))
+
+
+
+
+
 ## [0.5.1](https://github.com/vtex/onda/compare/@vtex/admin-core@0.5.0...@vtex/admin-core@0.5.1) (2021-02-11)
@@ -8,0 +19,0 @@

dist/admin-core.cjs.development.js

@@ -8,6 +8,25 @@ 'use strict';
 var react = require('react');
+var adminUiSystem = require('@vtex/admin-ui-system');
 var adminUiTheme = require('@vtex/admin-ui-theme');
-var adminUiSystem = require('@vtex/admin-ui-system');
+var react$1 = require('@emotion/react');
 var invariant = _interopDefault(require('tiny-invariant'));
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -22,4 +41,30 @@ if (!raw) {
 
+/**
+ * creates a new system
+ * @param appKey key of your app
+ * @param themeOptions theme options
+ */
+
+function createSystem(appKey, themeOptions) {
+  if (themeOptions === void 0) {
+    themeOptions = {
+      overrides: {}
+    };
+  }
+
+  var _themeOptions = themeOptions,
+      overrides = _themeOptions.overrides,
+      components = _themeOptions.components;
+  var baseTheme = adminUiSystem.merge(adminUiTheme.theme, overrides);
+  var fullTheme = components ? Object.assign(baseTheme, {
+    components: _extends({}, components, adminUiTheme.theme.components)
+  }) : baseTheme;
+  return adminUiSystem.createSystem(fullTheme, "vtex-" + appKey);
+}
+/** base system of admin-ui without any new components */
+
+var defaultSystem = /*#__PURE__*/createSystem('admin-ui');
+
 function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ", ";\n        color: ", ";\n      }\n      html,\n      body {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      strong,\n      b {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      pre,\n      code {\n        font-family: ", " !important;\n      }\n      * {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      kbd,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "]);
+  var data = _taggedTemplateLiteralLoose(["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ", ";\n        color: ", ";\n      }\n      html,\n      body {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      strong,\n      b {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      pre,\n      code {\n        font-family: ", " !important;\n      }\n      * {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "]);
 
@@ -32,5 +77,10 @@ _templateObject = function _templateObject() {
 }
+function GlobalStyles() {
+  return adminUiSystem.jsxs(react$1.Global, {
+    styles: react$1.css(_templateObject(), adminUiSystem.get(adminUiTheme.theme, 'colors.light.primary'), adminUiSystem.get(adminUiTheme.theme, 'colors.dark.primary'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.regular'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.bold'), adminUiSystem.get(adminUiTheme.theme, 'fonts.mono'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.regular'))
+  });
+}
+
 var SystemContext = /*#__PURE__*/react.createContext(null);
-var defaultSystem = /*#__PURE__*/createSystem('admin-ui');
-function CoreProvider(props) {
+function ThemeProvider(props) {
   var children = props.children,
@@ -45,5 +95,2 @@ _props$system = props.system,
 }
-function createSystem(appKey) {
-  return adminUiSystem.createSystem(adminUiTheme.theme, "vtex-" + appKey);
-}
 function useSystem() {
@@ -62,22 +109,3 @@ var context = react.useContext(SystemContext);
 }
-function ThemeProvider(props) {
-  var children = props.children,
-      system = props.system;
-  return adminUiSystem.jsxs(CoreProvider, {
-    system: system
-  }, children);
-}
 
-function GlobalStyles() {
-  return adminUiSystem.jsxs(adminUiSystem.Global, {
-    styles: adminUiSystem.css(_templateObject(), adminUiSystem.get(adminUiTheme.theme, 'colors.light.primary'), adminUiSystem.get(adminUiTheme.theme, 'colors.dark.primary'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.regular'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.bold'), adminUiSystem.get(adminUiTheme.theme, 'fonts.mono'), adminUiSystem.get(adminUiTheme.theme, 'fonts.sans'), adminUiSystem.get(adminUiTheme.theme, 'fontSettings.regular'))
-  });
-}
-
-Object.defineProperty(exports, 'theme', {
-  enumerable: true,
-  get: function () {
-    return adminUiTheme.theme;
-  }
-});
 Object.defineProperty(exports, 'Global', {
@@ -269,6 +297,12 @@ enumerable: true,
 });
-exports.CoreProvider = CoreProvider;
+Object.defineProperty(exports, 'theme', {
+  enumerable: true,
+  get: function () {
+    return adminUiTheme.theme;
+  }
+});
 exports.ThemeProvider = ThemeProvider;
 exports.createSystem = createSystem;
+exports.defaultSystem = defaultSystem;
 exports.useSystem = useSystem;
 //# sourceMappingURL=admin-core.cjs.development.js.map

dist/admin-core.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=require("@vtex/admin-ui-theme"),r=require("@vtex/admin-ui-system"),o=(e=require("tiny-invariant"))&&"object"==typeof e&&"default"in e?e.default:e;function i(){var e,n,t=(e=["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ",";\n        color: ",";\n      }\n      html,\n      body {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      strong,\n      b {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      pre,\n      code {\n        font-family: "," !important;\n      }\n      * {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      kbd,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "],n||(n=e.slice(0)),e.raw=n,e);return i=function(){return t},t}var s=n.createContext(null),a=c("admin-ui");function u(e){var n=e.children,t=e.system,o=void 0===t?a:t;return r.jsxs(r.CacheProvider,{value:o.emotionInstance.cache},r.jsxs.apply(void 0,[s.Provider,{value:o}].concat([r.jsxs(f,{}),r.jsxs(o.ThemeProvider,{},n)])))}function c(e){return r.createSystem(t.theme,"vtex-"+e)}function f(){return r.jsxs(r.Global,{styles:r.css(i(),r.get(t.theme,"colors.light.primary"),r.get(t.theme,"colors.dark.primary"),r.get(t.theme,"fonts.sans"),r.get(t.theme,"fontSettings.regular"),r.get(t.theme,"fonts.sans"),r.get(t.theme,"fontSettings.bold"),r.get(t.theme,"fonts.mono"),r.get(t.theme,"fonts.sans"),r.get(t.theme,"fontSettings.regular"))})}Object.defineProperty(exports,"theme",{enumerable:!0,get:function(){return t.theme}}),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return r.Global}}),Object.defineProperty(exports,"alpha",{enumerable:!0,get:function(){return r.alpha}}),Object.defineProperty(exports,"complement",{enumerable:!0,get:function(){return r.complement}}),Object.defineProperty(exports,"createComponent",{enumerable:!0,get:function(){return r.createComponent}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return r.css}}),Object.defineProperty(exports,"darken",{enumerable:!0,get:function(){return r.darken}}),Object.defineProperty(exports,"desaturate",{enumerable:!0,get:function(){return r.desaturate}}),Object.defineProperty(exports,"forwardRef",{enumerable:!0,get:function(){return r.forwardRef}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return r.get}}),Object.defineProperty(exports,"getColor",{enumerable:!0,get:function(){return r.getColor}}),Object.defineProperty(exports,"grayscale",{enumerable:!0,get:function(){return r.grayscale}}),Object.defineProperty(exports,"hue",{enumerable:!0,get:function(){return r.hue}}),Object.defineProperty(exports,"inlineVariant",{enumerable:!0,get:function(){return r.inlineVariant}}),Object.defineProperty(exports,"invert",{enumerable:!0,get:function(){return r.invert}}),Object.defineProperty(exports,"isFunction",{enumerable:!0,get:function(){return r.isFunction}}),Object.defineProperty(exports,"isObjectEmpty",{enumerable:!0,get:function(){return r.isObjectEmpty}}),Object.defineProperty(exports,"jsxs",{enumerable:!0,get:function(){return r.jsxs}}),Object.defineProperty(exports,"lighten",{enumerable:!0,get:function(){return r.lighten}}),Object.defineProperty(exports,"lightness",{enumerable:!0,get:function(){return r.lightness}}),Object.defineProperty(exports,"merge",{enumerable:!0,get:function(){return r.merge}}),Object.defineProperty(exports,"mix",{enumerable:!0,get:function(){return r.mix}}),Object.defineProperty(exports,"omit",{enumerable:!0,get:function(){return r.omit}}),Object.defineProperty(exports,"pick",{enumerable:!0,get:function(){return r.pick}}),Object.defineProperty(exports,"rotate",{enumerable:!0,get:function(){return r.rotate}}),Object.defineProperty(exports,"saturate",{enumerable:!0,get:function(){return r.saturate}}),Object.defineProperty(exports,"saturation",{enumerable:!0,get:function(){return r.saturation}}),Object.defineProperty(exports,"shade",{enumerable:!0,get:function(){return r.shade}}),Object.defineProperty(exports,"tint",{enumerable:!0,get:function(){return r.tint}}),Object.defineProperty(exports,"transparentize",{enumerable:!0,get:function(){return r.transparentize}}),Object.defineProperty(exports,"useResponsiveValue",{enumerable:!0,get:function(){return r.useResponsiveValue}}),Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return r.useTheme}}),exports.CoreProvider=u,exports.ThemeProvider=function(e){return r.jsxs(u,{system:e.system},e.children)},exports.createSystem=c,exports.useSystem=function(){var e=n.useContext(s);e||o(!1);var t=e.emotionInstance;return{cn:e.cn,stylesOf:e.stylesOf,keyframes:t.keyframes,cx:t.cx}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=require("@vtex/admin-ui-system"),r=require("@vtex/admin-ui-theme"),o=require("@emotion/react"),i=(e=require("tiny-invariant"))&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function s(e,n){void 0===n&&(n={overrides:{}});var o=n.components,i=t.merge(r.theme,n.overrides),s=o?Object.assign(i,{components:a({},o,r.theme.components)}):i;return t.createSystem(s,"vtex-"+e)}var u=s("admin-ui");function c(){var e,n,t=(e=["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ",";\n        color: ",";\n      }\n      html,\n      body {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      strong,\n      b {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      pre,\n      code {\n        font-family: "," !important;\n      }\n      * {\n        font-family: "," !important;\n        font-variation-settings: ",";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "],n||(n=e.slice(0)),e.raw=n,e);return c=function(){return t},t}function f(){return t.jsxs(o.Global,{styles:o.css(c(),t.get(r.theme,"colors.light.primary"),t.get(r.theme,"colors.dark.primary"),t.get(r.theme,"fonts.sans"),t.get(r.theme,"fontSettings.regular"),t.get(r.theme,"fonts.sans"),t.get(r.theme,"fontSettings.bold"),t.get(r.theme,"fonts.mono"),t.get(r.theme,"fonts.sans"),t.get(r.theme,"fontSettings.regular"))})}var l=n.createContext(null);Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return t.Global}}),Object.defineProperty(exports,"alpha",{enumerable:!0,get:function(){return t.alpha}}),Object.defineProperty(exports,"complement",{enumerable:!0,get:function(){return t.complement}}),Object.defineProperty(exports,"createComponent",{enumerable:!0,get:function(){return t.createComponent}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return t.css}}),Object.defineProperty(exports,"darken",{enumerable:!0,get:function(){return t.darken}}),Object.defineProperty(exports,"desaturate",{enumerable:!0,get:function(){return t.desaturate}}),Object.defineProperty(exports,"forwardRef",{enumerable:!0,get:function(){return t.forwardRef}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return t.get}}),Object.defineProperty(exports,"getColor",{enumerable:!0,get:function(){return t.getColor}}),Object.defineProperty(exports,"grayscale",{enumerable:!0,get:function(){return t.grayscale}}),Object.defineProperty(exports,"hue",{enumerable:!0,get:function(){return t.hue}}),Object.defineProperty(exports,"inlineVariant",{enumerable:!0,get:function(){return t.inlineVariant}}),Object.defineProperty(exports,"invert",{enumerable:!0,get:function(){return t.invert}}),Object.defineProperty(exports,"isFunction",{enumerable:!0,get:function(){return t.isFunction}}),Object.defineProperty(exports,"isObjectEmpty",{enumerable:!0,get:function(){return t.isObjectEmpty}}),Object.defineProperty(exports,"jsxs",{enumerable:!0,get:function(){return t.jsxs}}),Object.defineProperty(exports,"lighten",{enumerable:!0,get:function(){return t.lighten}}),Object.defineProperty(exports,"lightness",{enumerable:!0,get:function(){return t.lightness}}),Object.defineProperty(exports,"merge",{enumerable:!0,get:function(){return t.merge}}),Object.defineProperty(exports,"mix",{enumerable:!0,get:function(){return t.mix}}),Object.defineProperty(exports,"omit",{enumerable:!0,get:function(){return t.omit}}),Object.defineProperty(exports,"pick",{enumerable:!0,get:function(){return t.pick}}),Object.defineProperty(exports,"rotate",{enumerable:!0,get:function(){return t.rotate}}),Object.defineProperty(exports,"saturate",{enumerable:!0,get:function(){return t.saturate}}),Object.defineProperty(exports,"saturation",{enumerable:!0,get:function(){return t.saturation}}),Object.defineProperty(exports,"shade",{enumerable:!0,get:function(){return t.shade}}),Object.defineProperty(exports,"tint",{enumerable:!0,get:function(){return t.tint}}),Object.defineProperty(exports,"transparentize",{enumerable:!0,get:function(){return t.transparentize}}),Object.defineProperty(exports,"useResponsiveValue",{enumerable:!0,get:function(){return t.useResponsiveValue}}),Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return t.useTheme}}),Object.defineProperty(exports,"theme",{enumerable:!0,get:function(){return r.theme}}),exports.ThemeProvider=function(e){var n=e.children,r=e.system,o=void 0===r?u:r;return t.jsxs(t.CacheProvider,{value:o.emotionInstance.cache},t.jsxs.apply(void 0,[l.Provider,{value:o}].concat([t.jsxs(f,{}),t.jsxs(o.ThemeProvider,{},n)])))},exports.createSystem=s,exports.defaultSystem=u,exports.useSystem=function(){var e=n.useContext(l);e||i(!1);var t=e.emotionInstance;return{cn:e.cn,stylesOf:e.stylesOf,keyframes:t.keyframes,cx:t.cx}};
 //# sourceMappingURL=admin-core.cjs.production.min.js.map

dist/admin-core.esm.js

 import { useContext, createContext } from 'react';
+import { merge, createSystem as createSystem$1, jsxs, get, CacheProvider } from '@vtex/admin-ui-system';
+export { Global, alpha, complement, createComponent, css, darken, desaturate, forwardRef, get, getColor, grayscale, hue, inlineVariant, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge, mix, omit, pick, rotate, saturate, saturation, shade, tint, transparentize, useResponsiveValue, useTheme } from '@vtex/admin-ui-system';
 import { theme } from '@vtex/admin-ui-theme';
 export { theme } from '@vtex/admin-ui-theme';
-import { jsxs, CacheProvider, createSystem as createSystem$1, Global, css, get } from '@vtex/admin-ui-system';
-export { Global, alpha, complement, createComponent, css, darken, desaturate, forwardRef, get, getColor, grayscale, hue, inlineVariant, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge, mix, omit, pick, rotate, saturate, saturation, shade, tint, transparentize, useResponsiveValue, useTheme } from '@vtex/admin-ui-system';
+import { Global, css } from '@emotion/react';
 import invariant from 'tiny-invariant';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -17,4 +36,30 @@ if (!raw) {
 
+/**
+ * creates a new system
+ * @param appKey key of your app
+ * @param themeOptions theme options
+ */
+
+function createSystem(appKey, themeOptions) {
+  if (themeOptions === void 0) {
+    themeOptions = {
+      overrides: {}
+    };
+  }
+
+  var _themeOptions = themeOptions,
+      overrides = _themeOptions.overrides,
+      components = _themeOptions.components;
+  var baseTheme = merge(theme, overrides);
+  var fullTheme = components ? Object.assign(baseTheme, {
+    components: _extends({}, components, theme.components)
+  }) : baseTheme;
+  return createSystem$1(fullTheme, "vtex-" + appKey);
+}
+/** base system of admin-ui without any new components */
+
+var defaultSystem = /*#__PURE__*/createSystem('admin-ui');
+
 function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ", ";\n        color: ", ";\n      }\n      html,\n      body {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      strong,\n      b {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      pre,\n      code {\n        font-family: ", " !important;\n      }\n      * {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      kbd,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "]);
+  var data = _taggedTemplateLiteralLoose(["\n      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n      body {\n        margin: 0;\n        background-color: ", ";\n        color: ", ";\n      }\n      html,\n      body {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      strong,\n      b {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      pre,\n      code {\n        font-family: ", " !important;\n      }\n      * {\n        font-family: ", " !important;\n        font-variation-settings: ", ";\n      }\n      *,\n      ::before,\n      ::after {\n        box-sizing: border-box;\n        border-width: 0;\n        border-style: solid;\n      }\n      html,\n      body,\n      div,\n      span,\n      applet,\n      object,\n      iframe,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p,\n      blockquote,\n      a,\n      abbr,\n      acronym,\n      address,\n      big,\n      cite,\n      del,\n      dfn,\n      em,\n      img,\n      ins,\n      q,\n      s,\n      samp,\n      small,\n      strike,\n      strong,\n      sub,\n      sup,\n      tt,\n      var,\n      b,\n      u,\n      i,\n      center,\n      dl,\n      dt,\n      dd,\n      ol,\n      ul,\n      li,\n      fieldset,\n      form,\n      label,\n      legend,\n      table,\n      caption,\n      tbody,\n      tfoot,\n      thead,\n      tr,\n      th,\n      td,\n      article,\n      aside,\n      canvas,\n      details,\n      embed,\n      figure,\n      figcaption,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      output,\n      ruby,\n      section,\n      summary,\n      time,\n      mark,\n      audio,\n      video {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        font-size: 100%;\n        font: inherit;\n        vertical-align: baseline;\n      }\n      /* HTML5 display-role reset for older browsers */\n      article,\n      aside,\n      details,\n      figcaption,\n      figure,\n      footer,\n      header,\n      hgroup,\n      menu,\n      nav,\n      section {\n        display: block;\n      }\n      body {\n        line-height: 1;\n      }\n      blockquote,\n      q {\n        quotes: none;\n      }\n      blockquote:before,\n      blockquote:after,\n      q:before,\n      q:after {\n        content: '';\n        content: none;\n      }\n      table {\n        border-collapse: collapse;\n        border-spacing: 0;\n      }\n    "]);
 
@@ -27,5 +72,10 @@ _templateObject = function _templateObject() {
 }
+function GlobalStyles() {
+  return jsxs(Global, {
+    styles: css(_templateObject(), get(theme, 'colors.light.primary'), get(theme, 'colors.dark.primary'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.regular'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.bold'), get(theme, 'fonts.mono'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.regular'))
+  });
+}
+
 var SystemContext = /*#__PURE__*/createContext(null);
-var defaultSystem = /*#__PURE__*/createSystem('admin-ui');
-function CoreProvider(props) {
+function ThemeProvider(props) {
   var children = props.children,
@@ -40,5 +90,2 @@ _props$system = props.system,
 }
-function createSystem(appKey) {
-  return createSystem$1(theme, "vtex-" + appKey);
-}
 function useSystem() {
@@ -57,17 +104,4 @@ var context = useContext(SystemContext);
 }
-function ThemeProvider(props) {
-  var children = props.children,
-      system = props.system;
-  return jsxs(CoreProvider, {
-    system: system
-  }, children);
-}
 
-function GlobalStyles() {
-  return jsxs(Global, {
-    styles: css(_templateObject(), get(theme, 'colors.light.primary'), get(theme, 'colors.dark.primary'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.regular'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.bold'), get(theme, 'fonts.mono'), get(theme, 'fonts.sans'), get(theme, 'fontSettings.regular'))
-  });
-}
-
-export { CoreProvider, ThemeProvider, createSystem, useSystem };
+export { ThemeProvider, createSystem, defaultSystem, useSystem };
 //# sourceMappingURL=admin-core.esm.js.map

dist/core.d.ts

 import { ReactNode } from 'react';
-export declare function CoreProvider(props: CoreProviderProps): import("react").ReactElement<import("react").ProviderProps<import("@emotion/css").EmotionCache>, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-export declare function createSystem(appKey: string): import("@vtex/admin-ui-system").CreateSystemReturn;
+import { createSystem } from './system';
+export declare function ThemeProvider(props: ThemeProviderProps): import("react").ReactElement<import("react").ProviderProps<import("@emotion/css").EmotionCache>, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
 export declare function useSystem(): {
@@ -13,3 +13,2 @@ cn: (styleProp: import("@vtex/admin-ui-system").StyleProp) => string;
 };
-export declare function ThemeProvider(props: ThemeProviderProps): import("react").ReactElement<CoreProviderProps, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
 export interface ThemeProviderProps {
@@ -19,5 +18,1 @@ children?: ReactNode;
 }
-export interface CoreProviderProps {
-    children?: ReactNode;
-    system?: ReturnType<typeof createSystem>;
-}

dist/system.d.ts

@@ -0,1 +1,15 @@
+import { Theme } from '@vtex/admin-ui-theme';
+import { StyleObject } from '@vtex/admin-ui-system';
+interface ThemeOptions {
+    overrides?: Partial<Theme>;
+    components?: Record<string, StyleObject>;
+}
+/**
+ * creates a new system
+ * @param appKey key of your app
+ * @param themeOptions theme options
+ */
+export declare function createSystem(appKey: string, themeOptions?: ThemeOptions): import("@vtex/admin-ui-system").CreateSystemReturn;
+/** base system of admin-ui without any new components */
+export declare const defaultSystem: import("@vtex/admin-ui-system").CreateSystemReturn;
 export { Global, css, jsxs, createComponent, isFunction, useTheme, useResponsiveValue, get, pick, omit, isObjectEmpty, merge, forwardRef, inlineVariant, StyleProp, StyleObject, ResponsiveValue, darken, lighten, grayscale, getColor, rotate, hue, saturation, lightness, saturate, desaturate, shade, tint, transparentize, alpha, mix, complement, invert, Colors, } from '@vtex/admin-ui-system';

package.json

 {
   "name": "@vtex/admin-core",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "main": "dist/index.js",
@@ -45,3 +45,3 @@ "module": "dist/admin-core.esm.js",
   },
-  "gitHead": "ac4303599c907174b40a25690ff419c5cf9331c4"
+  "gitHead": "c9b76cbe75481fad77598c6aca12aa5f824982e6"
 }

src/core.ts

 import { createContext, ReactNode, useContext } from 'react'
-import { theme } from '@vtex/admin-ui-theme'
-import {
-  createSystem as createSystemInternal,
-  get,
-  jsxs,
-  CacheProvider,
-  css,
-  Global
-} from '@vtex/admin-ui-system'
+import { CacheProvider } from '@vtex/admin-ui-system'
+import { createSystem, jsxs, defaultSystem } from './system'
+import { GlobalStyles } from './global'
 import invariant from 'tiny-invariant'
@@ -17,5 +11,3 @@
 
-const defaultSystem = createSystem('admin-ui')
-
-export function CoreProvider(props: CoreProviderProps) {
+export function ThemeProvider(props: ThemeProviderProps) {
   const { children, system = defaultSystem } = props
@@ -34,6 +26,2 @@
 
-export function createSystem(appKey: string) {
-  return createSystemInternal(theme, `vtex-${appKey}`)
-}
-
 export function useSystem() {
@@ -57,8 +45,2 @@ const context = useContext(SystemContext)
 
-export function ThemeProvider(props: ThemeProviderProps) {
-  const { children, system } = props
-
-  return jsxs(CoreProvider, { system }, children)
-}
-
 export interface ThemeProviderProps {
@@ -68,162 +50,1 @@ children?: ReactNode
 }
-
-function GlobalStyles() {
-  return jsxs(Global, {
-    styles: css`
-      @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';
-      body {
-        margin: 0;
-        background-color: ${get(theme, 'colors.light.primary')};
-        color: ${get(theme, 'colors.dark.primary')};
-      }
-      html,
-      body {
-        font-family: ${get(theme, 'fonts.sans')} !important;
-        font-variation-settings: ${get(theme, 'fontSettings.regular')};
-      }
-      strong,
-      b {
-        font-family: ${get(theme, 'fonts.sans')} !important;
-        font-variation-settings: ${get(theme, 'fontSettings.bold')};
-      }
-      pre,
-      code {
-        font-family: ${get(theme, 'fonts.mono')} !important;
-      }
-      * {
-        font-family: ${get(theme, 'fonts.sans')} !important;
-        font-variation-settings: ${get(theme, 'fontSettings.regular')};
-      }
-      *,
-      ::before,
-      ::after {
-        box-sizing: border-box;
-        border-width: 0;
-        border-style: solid;
-      }
-      html,
-      body,
-      div,
-      span,
-      applet,
-      object,
-      iframe,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p,
-      blockquote,
-      a,
-      abbr,
-      acronym,
-      address,
-      big,
-      cite,
-      del,
-      dfn,
-      em,
-      img,
-      ins,
-      kbd,
-      q,
-      s,
-      samp,
-      small,
-      strike,
-      strong,
-      sub,
-      sup,
-      tt,
-      var,
-      b,
-      u,
-      i,
-      center,
-      dl,
-      dt,
-      dd,
-      ol,
-      ul,
-      li,
-      fieldset,
-      form,
-      label,
-      legend,
-      table,
-      caption,
-      tbody,
-      tfoot,
-      thead,
-      tr,
-      th,
-      td,
-      article,
-      aside,
-      canvas,
-      details,
-      embed,
-      figure,
-      figcaption,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      output,
-      ruby,
-      section,
-      summary,
-      time,
-      mark,
-      audio,
-      video {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-      }
-      /* HTML5 display-role reset for older browsers */
-      article,
-      aside,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section {
-        display: block;
-      }
-      body {
-        line-height: 1;
-      }
-      blockquote,
-      q {
-        quotes: none;
-      }
-      blockquote:before,
-      blockquote:after,
-      q:before,
-      q:after {
-        content: '';
-        content: none;
-      }
-      table {
-        border-collapse: collapse;
-        border-spacing: 0;
-      }
-    `,
-  })
-}
-
-export interface CoreProviderProps {
-  children?: ReactNode
-  system?: ReturnType<typeof createSystem>
-}

src/system.ts

@@ -0,1 +1,42 @@
+import { theme, Theme } from '@vtex/admin-ui-theme'
+import {
+  createSystem as baseCreateSystem,
+  merge,
+  StyleObject,
+} from '@vtex/admin-ui-system'
+
+interface ThemeOptions {
+  overrides?: Partial<Theme>
+  components?: Record<string, StyleObject>
+}
+
+/**
+ * creates a new system
+ * @param appKey key of your app
+ * @param themeOptions theme options
+ */
+export function createSystem(
+  appKey: string,
+  themeOptions: ThemeOptions = {
+    overrides: {},
+  }
+) {
+  const { overrides, components } = themeOptions
+
+  const baseTheme = merge(theme, overrides)
+  const fullTheme = components
+    ? Object.assign(baseTheme, {
+        components: {
+          ...components,
+          ...theme.components,
+        },
+      })
+    : baseTheme
+
+  return baseCreateSystem(fullTheme, `vtex-${appKey}`)
+}
+
+/** base system of admin-ui without any new components */
+export const defaultSystem = createSystem('admin-ui')
+
 export {
@@ -2,0 +43,0 @@ Global,

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58545

increased by14.66%

Number of package files

20

increased by11.11%

Lines of code

739

increased by12.82%

No dependency changes