@vtex/admin-ui-system
Advanced tools
@vtex/admin-ui-system - npm Package Compare versions
Comparing version 0.10.1 to 0.11.0
@@ -6,2 +6,13 @@ # Change Log | ||
| # [0.11.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.10.1...@vtex/admin-ui-system@0.11.0) (2021-02-01) | ||
| ### Features | ||
| * **admin-styles:** add package to parse styles from theme ([45e918b](https://github.com/vtex/onda/commit/45e918ba9f68cc83514bab0b4dcb5f23139acce6)) | ||
| ## [0.10.1](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.10.0...@vtex/admin-ui-system@0.10.1) (2021-01-26) | ||
@@ -8,0 +19,0 @@ |
@@ -13,8 +13,7 @@ 'use strict'; | ||
| var packageInfo = _interopDefault(require('@emotion/react/package.json')); | ||
| var get = _interopDefault(require('lodash.get')); | ||
| var adminStyles = require('@vtex/admin-styles'); | ||
| var invariant = _interopDefault(require('tiny-invariant')); | ||
| var lodash_pick = _interopDefault(require('lodash.pick')); | ||
| var omit = _interopDefault(require('lodash.omit')); | ||
| var lodashMerge = _interopDefault(require('lodash.merge')); | ||
| var isPropValid = _interopDefault(require('@emotion/is-prop-valid')); | ||
| var invariant = _interopDefault(require('tiny-invariant')); | ||
| var polished = require('polished'); | ||
@@ -108,14 +107,45 @@ | ||
| /** | ||
| * merges n objects into one | ||
| */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| function createSystem(theme, appKey) { | ||
| var emotionInstance = createEmotionInstance(appKey); | ||
| var ThemeProvider = createThemeProvider(theme); | ||
| var merge$1 = function merge() { | ||
| for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| params[_key] = arguments[_key]; | ||
| } | ||
| var _createThemeConsumers = createThemeConsumers(theme, emotionInstance), | ||
| cn = _createThemeConsumers.cn, | ||
| stylesOf = _createThemeConsumers.stylesOf; | ||
| return lodashMerge.apply(void 0, [{}].concat(params)); | ||
| }; | ||
| return { | ||
| emotionInstance: emotionInstance, | ||
| ThemeProvider: ThemeProvider, | ||
| cn: cn, | ||
| stylesOf: stylesOf | ||
| }; | ||
| } | ||
| function createEmotionInstance(appKey) { | ||
| return createEmotion({ | ||
| key: appKey | ||
| }); | ||
| } | ||
| function createThemeProvider(theme) { | ||
| return function AdminProvider(_ref) { | ||
| var children = _ref.children; | ||
| return React__default.createElement(ThemeProvider, { | ||
| theme: theme | ||
| }, children); | ||
| }; | ||
| } | ||
| function createThemeConsumers(theme, emotionInstance) { | ||
| return { | ||
| stylesOf: function stylesOf(themeKey) { | ||
| var rawStyles = adminStyles.get(theme, themeKey, {}); | ||
| return rawStyles; | ||
| }, | ||
| cn: function cn(styleProp) { | ||
| var rawStyles = adminStyles.styles(styleProp)(theme); | ||
| var className = emotionInstance.css(rawStyles); | ||
| return className; | ||
| } | ||
| }; | ||
| } | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| /** | ||
@@ -125,3 +155,2 @@ * Whether a value is a function | ||
| var isFunction = function isFunction(param) { | ||
@@ -181,24 +210,2 @@ return typeof param === 'function'; | ||
| } | ||
| var transformScale = function transformScale(acc, curr) { | ||
| var _extends2; | ||
| return _extends({}, acc, (_extends2 = {}, _extends2[curr] = function (scale, value) { | ||
| if (typeof value !== 'number' || value >= 0) { | ||
| if (typeof value === 'string' && value.startsWith('-')) { | ||
| var valueWithoutMinus = value.substring(1); | ||
| var _n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| return "-" + _n; | ||
| } | ||
| return get(scale, value, value); | ||
| } | ||
| var absolute = Math.abs(value); | ||
| var n = get(scale, absolute, absolute); | ||
| if (typeof n === 'string') return "-" + n; | ||
| return Number(n) * -1; | ||
| }, _extends2)); | ||
| }; | ||
| /** | ||
@@ -217,313 +224,2 @@ * Function that helps in the creation of a themeKey with conditional variants | ||
| var aliases = { | ||
| bg: 'backgroundColor', | ||
| fontSettings: 'fontVariationSettings' | ||
| }; | ||
| var defaultBreakpoints = /*#__PURE__*/[40, 52, 64].map(function (n) { | ||
| return n + "em"; | ||
| }); | ||
| var defaultTheme = { | ||
| space: [0, 4, 8, 16, 32, 64, 128, 256, 512], | ||
| fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] | ||
| }; | ||
| var multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
| marginY: ['marginTop', 'marginBottom'], | ||
| paddingX: ['paddingLeft', 'paddingRight'], | ||
| paddingY: ['paddingTop', 'paddingBottom'], | ||
| size: ['width', 'height'] | ||
| }; | ||
| var transformations = /*#__PURE__*/['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(transformScale, {}); | ||
| var scales = { | ||
| color: 'colors', | ||
| backgroundColor: 'colors', | ||
| borderColor: 'colors', | ||
| caretColor: 'colors', | ||
| columnRuleColor: 'colors', | ||
| opacity: 'opacities', | ||
| transition: 'transitions', | ||
| margin: 'space', | ||
| marginTop: 'space', | ||
| marginRight: 'space', | ||
| marginBottom: 'space', | ||
| marginLeft: 'space', | ||
| marginX: 'space', | ||
| marginY: 'space', | ||
| marginBlock: 'space', | ||
| marginBlockEnd: 'space', | ||
| marginBlockStart: 'space', | ||
| marginInline: 'space', | ||
| marginInlineEnd: 'space', | ||
| marginInlineStart: 'space', | ||
| padding: 'space', | ||
| paddingTop: 'space', | ||
| paddingRight: 'space', | ||
| paddingBottom: 'space', | ||
| paddingLeft: 'space', | ||
| paddingX: 'space', | ||
| paddingY: 'space', | ||
| paddingBlock: 'space', | ||
| paddingBlockEnd: 'space', | ||
| paddingBlockStart: 'space', | ||
| paddingInline: 'space', | ||
| paddingInlineEnd: 'space', | ||
| paddingInlineStart: 'space', | ||
| scrollPadding: 'space', | ||
| scrollPaddingTop: 'space', | ||
| scrollPaddingRight: 'space', | ||
| scrollPaddingBottom: 'space', | ||
| scrollPaddingLeft: 'space', | ||
| scrollPaddingX: 'space', | ||
| scrollPaddingY: 'space', | ||
| inset: 'space', | ||
| insetBlock: 'space', | ||
| insetBlockEnd: 'space', | ||
| insetBlockStart: 'space', | ||
| insetInline: 'space', | ||
| insetInlineEnd: 'space', | ||
| insetInlineStart: 'space', | ||
| top: 'space', | ||
| right: 'space', | ||
| bottom: 'space', | ||
| left: 'space', | ||
| gridGap: 'space', | ||
| gridColumnGap: 'space', | ||
| gridRowGap: 'space', | ||
| gap: 'space', | ||
| columnGap: 'space', | ||
| rowGap: 'space', | ||
| fontFamily: 'fonts', | ||
| fontSize: 'fontSizes', | ||
| fontWeight: 'fontWeights', | ||
| lineHeight: 'lineHeights', | ||
| letterSpacing: 'letterSpacings', | ||
| border: 'border', | ||
| borderTop: 'borders', | ||
| borderRight: 'borders', | ||
| borderBottom: 'borders', | ||
| borderLeft: 'borders', | ||
| borderWidth: 'borderWidths', | ||
| borderStyle: 'borderStyles', | ||
| borderRadius: 'radii', | ||
| borderTopRightRadius: 'radii', | ||
| borderTopLeftRadius: 'radii', | ||
| borderBottomRightRadius: 'radii', | ||
| borderBottomLeftRadius: 'radii', | ||
| borderTopWidth: 'borderWidths', | ||
| borderTopColor: 'colors', | ||
| borderTopStyle: 'borderStyles', | ||
| borderBottomWidth: 'borderWidths', | ||
| borderBottomColor: 'colors', | ||
| borderBottomStyle: 'borderStyles', | ||
| borderLeftWidth: 'borderWidths', | ||
| borderLeftColor: 'colors', | ||
| borderLeftStyle: 'borderStyles', | ||
| borderRightWidth: 'borderWidths', | ||
| borderRightColor: 'colors', | ||
| borderRightStyle: 'borderStyles', | ||
| borderBlock: 'borders', | ||
| borderBlockEnd: 'borders', | ||
| borderBlockEndStyle: 'borderStyles', | ||
| borderBlockEndWidth: 'borderWidths', | ||
| borderBlockStart: 'borders', | ||
| borderBlockStartStyle: 'borderStyles', | ||
| borderBlockStartWidth: 'borderWidths', | ||
| borderBlockStyle: 'borderStyles', | ||
| borderBlockWidth: 'borderWidths', | ||
| borderEndEndRadius: 'radii', | ||
| borderEndStartRadius: 'radii', | ||
| borderInline: 'borders', | ||
| borderInlineEnd: 'borders', | ||
| borderInlineEndStyle: 'borderStyles', | ||
| borderInlineEndWidth: 'borderWidths', | ||
| borderInlineStart: 'borders', | ||
| borderInlineStartStyle: 'borderStyles', | ||
| borderInlineStartWidth: 'borderWidths', | ||
| borderInlineStyle: 'borderStyles', | ||
| borderInlineWidth: 'borderWidths', | ||
| borderStartEndRadius: 'radii', | ||
| borderStartStartRadius: 'radii', | ||
| outlineColor: 'colors', | ||
| boxShadow: 'shadows', | ||
| textShadow: 'shadows', | ||
| zIndex: 'zIndices', | ||
| width: 'sizes', | ||
| minWidth: 'sizes', | ||
| maxWidth: 'sizes', | ||
| height: 'sizes', | ||
| minHeight: 'sizes', | ||
| maxHeight: 'sizes', | ||
| flexBasis: 'sizes', | ||
| size: 'sizes', | ||
| blockSize: 'sizes', | ||
| inlineSize: 'sizes', | ||
| maxBlockSize: 'sizes', | ||
| maxInlineSize: 'sizes', | ||
| minBlockSize: 'sizes', | ||
| minInlineSize: 'sizes', | ||
| fill: 'colors', | ||
| stroke: 'colors', | ||
| fontVariationSettings: 'fontSettings', | ||
| text: 'text' | ||
| }; | ||
| var responsive = function responsive(styles) { | ||
| return function (theme) { | ||
| var next = {}; | ||
| var breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
| return "@media screen and (min-width: " + n + ")"; | ||
| })); | ||
| for (var k in styles) { | ||
| var key = k; | ||
| var value = styles[key]; | ||
| if (typeof value === 'function') { | ||
| value = value(theme !== null && theme !== void 0 ? theme : {}); | ||
| } | ||
| if (value == null) continue; | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
| var _next$media; | ||
| var media = mediaQueries[i]; | ||
| if (!media) { | ||
| next[key] = value[i]; | ||
| continue; | ||
| } | ||
| next[media] = (_next$media = next[media]) !== null && _next$media !== void 0 ? _next$media : {}; | ||
| if (value[i] == null) continue; | ||
| next[media][key] = value[i]; | ||
| } | ||
| } | ||
| return next; | ||
| }; | ||
| }; | ||
| var styles = function styles(args) { | ||
| if (args === void 0) { | ||
| args = {}; | ||
| } | ||
| return function (props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); | ||
| var result = {}; | ||
| var obj = typeof args === 'function' ? args(theme) : args; | ||
| if (obj.themeKey) { | ||
| obj = _extends({}, get(theme, obj.themeKey), obj); | ||
| delete obj.themeKey; | ||
| } | ||
| var stylx = responsive(obj)(theme); | ||
| for (var key in stylx) { | ||
| var x = stylx[key]; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| if (val && typeof val === 'object') { | ||
| result[key] = styles(val)(theme); | ||
| continue; | ||
| } | ||
| var prop = key in aliases ? aliases[key] : key; | ||
| var scaleName = prop in scales ? scales[prop] : undefined; | ||
| var scale = get(theme, scaleName, get(theme, prop, {})); | ||
| var transform = get(transformations, prop, get); | ||
| var value = transform(scale, val, val); | ||
| var isObjectScale = value && typeof value === 'object'; | ||
| if (isObjectScale) { | ||
| var defaultValue = value["default"]; | ||
| if (defaultValue) { | ||
| if (typeof defaultValue === 'object') { | ||
| value = styles(defaultValue)(theme); | ||
| Object.assign(result, value); | ||
| delete result[prop]; | ||
| } else { | ||
| var _value; | ||
| value = (_value = {}, _value[prop] = defaultValue, _value); | ||
| Object.assign(result, value); | ||
| } | ||
| } else { | ||
| value = styles(value)(theme); | ||
| Object.assign(result, value); | ||
| delete result[prop]; | ||
| } | ||
| } | ||
| if (prop in multiples) { | ||
| var dirs = multiples[prop]; | ||
| for (var i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| } | ||
| } else if (!isObjectScale) { | ||
| result[prop] = value; | ||
| } | ||
| } | ||
| return result; | ||
| }; | ||
| }; | ||
| function createSystem(theme, appKey) { | ||
| var emotionInstance = createEmotionInstance(appKey); | ||
| var ThemeProvider = createThemeProvider(theme); | ||
| var _createThemeConsumers = createThemeConsumers(theme, emotionInstance), | ||
| cn = _createThemeConsumers.cn, | ||
| stylesOf = _createThemeConsumers.stylesOf; | ||
| return { | ||
| emotionInstance: emotionInstance, | ||
| ThemeProvider: ThemeProvider, | ||
| cn: cn, | ||
| stylesOf: stylesOf | ||
| }; | ||
| } | ||
| function createEmotionInstance(appKey) { | ||
| return createEmotion({ | ||
| key: appKey | ||
| }); | ||
| } | ||
| function createThemeProvider(theme) { | ||
| return function AdminProvider(_ref) { | ||
| var children = _ref.children; | ||
| return React__default.createElement(ThemeProvider, { | ||
| theme: theme | ||
| }, children); | ||
| }; | ||
| } | ||
| function createThemeConsumers(theme, emotionInstance) { | ||
| return { | ||
| stylesOf: function stylesOf(themeKey) { | ||
| var rawStyles = get(theme, themeKey, {}); | ||
| return rawStyles; | ||
| }, | ||
| cn: function cn(styleProp) { | ||
| var rawStyles = styles(styleProp)(theme); | ||
| var className = emotionInstance.css(rawStyles); | ||
| return className; | ||
| } | ||
| }; | ||
| } | ||
| function useTheme() { | ||
@@ -546,3 +242,3 @@ var _useThemeContext = useThemeContext(), | ||
| defaultIndex = _options$defaultIndex === void 0 ? 0 : _options$defaultIndex; | ||
| var breakpoints = context.theme && context.theme.breakpoints || defaultBreakpoints; | ||
| var breakpoints = context.theme && context.theme.breakpoints || adminStyles.defaultBreakpoints; | ||
@@ -645,3 +341,3 @@ if (typeof defaultIndex !== 'number') { | ||
| var getColor = function getColor(theme, color) { | ||
| var colorValue = get(theme, "colors." + color, color); | ||
| var colorValue = adminStyles.get(theme, "colors." + color, color); | ||
| var isCustomProperty = /^var\(--/.test(colorValue); | ||
@@ -793,3 +489,10 @@ return isCustomProperty ? colorValue.replace(/^var\(--(\w+)(.*?), /, '').replace(/\)/, '') : colorValue; | ||
| exports.get = get; | ||
| Object.keys(adminStyles).forEach(function (k) { | ||
| if (k !== 'default') Object.defineProperty(exports, k, { | ||
| enumerable: true, | ||
| get: function () { | ||
| return adminStyles[k]; | ||
| } | ||
| }); | ||
| }); | ||
| exports.pick = lodash_pick; | ||
@@ -818,3 +521,2 @@ exports.omit = omit; | ||
| exports.lightness = lightness; | ||
| exports.merge = merge$1; | ||
| exports.mix = mix; | ||
@@ -826,5 +528,3 @@ exports.pickHTMLProps = pickHTMLProps; | ||
| exports.shade = shade; | ||
| exports.styles = styles; | ||
| exports.tint = tint; | ||
| exports.transformScale = transformScale; | ||
| exports.transparentize = transparentize; | ||
@@ -831,0 +531,0 @@ exports.useResponsiveValue = useResponsiveValue$1; |
@@ -1,2 +0,2 @@ | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=e(require("@emotion/css/create-instance")),o=require("@emotion/react"),i=e(require("deepmerge")),a=e(require("@emotion/react/package.json")),s=e(require("lodash.get")),d=e(require("lodash.pick")),c=e(require("lodash.omit")),u=e(require("lodash.merge")),l=e(require("@emotion/is-prop-valid")),p=e(require("tiny-invariant")),f=require("polished");function g(){return(g=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var m=r.createContext({EMOTION_VERSION:a.version,theme:{}}),b=function(){return r.useContext(m)},h="function"==typeof Symbol&&Symbol.for,y=h?Symbol.for("react.element"):60103,v=h?Symbol.for("react.forward_ref"):60103,S={isMergeableObject:function(e){return!!e&&"object"==typeof e&&e.$$typeof!==y&&e.$$typeof!==v},arrayMerge:function(e,r){return r}},x=function(e,r){return i(e,r,S)};function k(e){var r=e.context;return t.createElement(o.ThemeContext.Provider,{value:r.theme},t.createElement(m.Provider,{value:r},e.children))}function B(e){var r=e.theme,n=e.children,o=b(),i="function"==typeof r?g({},o,{theme:r(o.theme)}):x.all({},o,{theme:r});return t.createElement(k,{context:i},n)}x.all=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return i.all(r,S)};var E=function(e){return"function"==typeof e},z=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function I(e,r){var t={};for(var n in e)l(n)&&!r.includes(n)&&(t[n]=e[n]);return t}var R=function(e,r){var t;return g({},e,((t={})[r]=function(e,r){if("number"!=typeof r||r>=0){if("string"==typeof r&&r.startsWith("-")){var t=r.substring(1);return"-"+s(e,t,t)}return s(e,r,r)}var n=Math.abs(r),o=s(e,n,n);return"string"==typeof o?"-"+o:-1*Number(o)},t))},w={bg:"backgroundColor",fontSettings:"fontVariationSettings"},W=[40,52,64].map((function(e){return e+"em"})),T={space:[0,4,8,16,32,64,128,256,512],fontSizes:[12,14,16,20,24,32,48,64,72]},j={marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],size:["width","height"]},O=["margin","marginTop","marginRight","marginBottom","marginLeft","marginX","marginY","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","top","bottom","left","right"].reduce(R,{}),C={color:"colors",backgroundColor:"colors",borderColor:"colors",caretColor:"colors",columnRuleColor:"colors",opacity:"opacities",transition:"transitions",margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:"space",marginY:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:"space",paddingY:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",scrollPadding:"space",scrollPaddingTop:"space",scrollPaddingRight:"space",scrollPaddingBottom:"space",scrollPaddingLeft:"space",scrollPaddingX:"space",scrollPaddingY:"space",inset:"space",insetBlock:"space",insetBlockEnd:"space",insetBlockStart:"space",insetInline:"space",insetInlineEnd:"space",insetInlineStart:"space",top:"space",right:"space",bottom:"space",left:"space",gridGap:"space",gridColumnGap:"space",gridRowGap:"space",gap:"space",columnGap:"space",rowGap:"space",fontFamily:"fonts",fontSize:"fontSizes",fontWeight:"fontWeights",lineHeight:"lineHeights",letterSpacing:"letterSpacings",border:"border",borderTop:"borders",borderRight:"borders",borderBottom:"borders",borderLeft:"borders",borderWidth:"borderWidths",borderStyle:"borderStyles",borderRadius:"radii",borderTopRightRadius:"radii",borderTopLeftRadius:"radii",borderBottomRightRadius:"radii",borderBottomLeftRadius:"radii",borderTopWidth:"borderWidths",borderTopColor:"colors",borderTopStyle:"borderStyles",borderBottomWidth:"borderWidths",borderBottomColor:"colors",borderBottomStyle:"borderStyles",borderLeftWidth:"borderWidths",borderLeftColor:"colors",borderLeftStyle:"borderStyles",borderRightWidth:"borderWidths",borderRightColor:"colors",borderRightStyle:"borderStyles",borderBlock:"borders",borderBlockEnd:"borders",borderBlockEndStyle:"borderStyles",borderBlockEndWidth:"borderWidths",borderBlockStart:"borders",borderBlockStartStyle:"borderStyles",borderBlockStartWidth:"borderWidths",borderBlockStyle:"borderStyles",borderBlockWidth:"borderWidths",borderEndEndRadius:"radii",borderEndStartRadius:"radii",borderInline:"borders",borderInlineEnd:"borders",borderInlineEndStyle:"borderStyles",borderInlineEndWidth:"borderWidths",borderInlineStart:"borders",borderInlineStartStyle:"borderStyles",borderInlineStartWidth:"borderWidths",borderInlineStyle:"borderStyles",borderInlineWidth:"borderWidths",borderStartEndRadius:"radii",borderStartStartRadius:"radii",outlineColor:"colors",boxShadow:"shadows",textShadow:"shadows",zIndex:"zIndices",width:"sizes",minWidth:"sizes",maxWidth:"sizes",height:"sizes",minHeight:"sizes",maxHeight:"sizes",flexBasis:"sizes",size:"sizes",blockSize:"sizes",inlineSize:"sizes",maxBlockSize:"sizes",maxInlineSize:"sizes",minBlockSize:"sizes",minInlineSize:"sizes",fill:"colors",stroke:"colors",fontVariationSettings:"fontSettings",text:"text"},L=function e(r){return void 0===r&&(r={}),function(t){void 0===t&&(t={});var n=g({},T,"theme"in t?t.theme:t),o={},i="function"==typeof r?r(n):r;i.themeKey&&delete(i=g({},s(n,i.themeKey),i)).themeKey;var a=function(e){return function(r){var t={},n=[null].concat((r&&r.breakpoints||W).map((function(e){return"@media screen and (min-width: "+e+")"})));for(var o in e){var i=o,a=e[i];if("function"==typeof a&&(a=a(null!=r?r:{})),null!=a)if(Array.isArray(a))for(var s=0;s<a.slice(0,n.length).length;s++){var d,c=n[s];c?(t[c]=null!==(d=t[c])&&void 0!==d?d:{},null!=a[s]&&(t[c][i]=a[s])):t[i]=a[s]}else t[i]=a}return t}}(i)(n);for(var d in a){var c=a[d],u="function"==typeof c?c(n):c;if(u&&"object"==typeof u)o[d]=e(u)(n);else{var l=d in w?w[d]:d,p=s(n,l in C?C[l]:void 0,s(n,l,{})),f=s(O,l,s)(p,u,u),m=f&&"object"==typeof f;if(m){var b,h=f.default;h?"object"==typeof h?(f=e(h)(n),Object.assign(o,f),delete o[l]):((b={})[l]=h,f=b,Object.assign(o,f)):(f=e(f)(n),Object.assign(o,f),delete o[l])}if(l in j)for(var y=j[l],v=0;v<y.length;v++)o[y[v]]=f;else m||(o[l]=f)}}return o}};function P(e){return n({key:e})}function q(e){return function(r){return t.createElement(B,{theme:e},r.children)}}function H(e,r){return{stylesOf:function(r){return s(e,r,{})},cn:function(t){var n=L(t)(e);return r.css(n)}}}function M(){var e=b().theme;return(z(e)||!e)&&p(!1),e}var A=function(e,r){var t=s(e,"colors."+r,r);return/^var\(--/.test(t)?t.replace(/^var\(--(\w+)(.*?), /,"").replace(/\)/,""):t},G=function(e,r){return function(t){return f.desaturate(r,A(t,e))}};exports.get=s,exports.pick=d,exports.omit=c,exports.isPropValid=l,exports.alpha=function(e,r){return function(t){return f.rgba(A(t,e),r)}},exports.cleanProps=function(e,r){void 0===r&&(r=[]);var t=I(e,r);return c.apply(void 0,[t].concat(r))},exports.complement=function(e){return function(r){return f.complement(A(r,e))}},exports.createEmotionInstance=P,exports.createSystem=function(e,r){var t=P(r),n=q(e),o=H(e,t);return{emotionInstance:t,ThemeProvider:n,cn:o.cn,stylesOf:o.stylesOf}},exports.createThemeConsumers=H,exports.createThemeProvider=q,exports.darken=function(e,r){return function(t){return f.darken(r,A(t,e))}},exports.desaturate=G,exports.forwardRef=function(e){return t.forwardRef(e)},exports.getColor=A,exports.grayscale=function(e){return G(e,1)},exports.hue=function(e,r){return function(t){return f.setHue(r,A(t,e))}},exports.inlineVariant=function(e){return e.reduce((function(e,r){return r[0]?""+e+r[1]:e}),"")},exports.invert=function(e){return function(r){return f.invert(A(r,e))}},exports.isFunction=E,exports.isObjectEmpty=z,exports.jsxs=function(e){var r=e.children,n=e.component,o=e.props,i=e.element,a=e.ref;return E(r)?r(o):t.createElement(n,g({as:i},o,{ref:a}),null!=r?r:null==o?void 0:o.children)},exports.lighten=function(e,r){return function(t){return f.lighten(r,A(t,e))}},exports.lightness=function(e,r){return function(t){return f.setLightness(r,A(t,e))}},exports.merge=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return u.apply(void 0,[{}].concat(r))},exports.mix=function(e,r,t){return void 0===t&&(t=.5),function(n){return f.mix(t,A(n,e),A(n,r))}},exports.pickHTMLProps=I,exports.rotate=function(e,r){return function(t){return f.adjustHue(r,A(t,e))}},exports.saturate=function(e,r){return function(t){return f.saturate(r,A(t,e))}},exports.saturation=function(e,r){return function(t){return f.setSaturation(r,A(t,e))}},exports.shade=function(e,r){return function(t){return f.shade(r,A(t,e))}},exports.styles=L,exports.tint=function(e,r){return function(t){return f.tint(r,A(t,e))}},exports.transformScale=R,exports.transparentize=function(e,r){return function(t){return f.transparentize(r,A(t,e))}},exports.useResponsiveValue=function(e){return function(e,t){void 0===t&&(t={});var n=M(),o="function"==typeof e?e(n.theme):e,i=function(e){void 0===e&&(e={});var t=M(),n=e.defaultIndex,o=void 0===n?0:n,i=t.theme&&t.theme.breakpoints||W;if("number"!=typeof o)throw new TypeError("Default breakpoint index should be a number. Got: "+o+", "+typeof o);if(o<0||o>i.length-1)throw new RangeError("Default breakpoint index out of range. Theme has "+i.length+" breakpoints, got index "+o);var a=r.useState(o),s=a[0],d=a[1];return r.useEffect((function(){var e=function(){var e=i.filter((function(e){return window.matchMedia("screen and (min-width: "+e+")").matches})).length;s!==e&&d(e)};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[i,s]),s}(t);return o[i>=o.length?o.length-1:i]}(Array.isArray(e)?e:[e])},exports.useTheme=M; | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=e(require("@emotion/css/create-instance")),o=require("@emotion/react"),u=e(require("deepmerge")),i=e(require("@emotion/react/package.json")),c=require("@vtex/admin-styles"),a=e(require("tiny-invariant")),s=e(require("lodash.pick")),f=e(require("lodash.omit")),p=e(require("@emotion/is-prop-valid")),l=require("polished");function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var m=t.createContext({EMOTION_VERSION:i.version,theme:{}}),h=function(){return t.useContext(m)},v="function"==typeof Symbol&&Symbol.for,x=v?Symbol.for("react.element"):60103,y=v?Symbol.for("react.forward_ref"):60103,g={isMergeableObject:function(e){return!!e&&"object"==typeof e&&e.$$typeof!==x&&e.$$typeof!==y},arrayMerge:function(e,t){return t}},b=function(e,t){return u(e,t,g)};function w(e){var t=e.context;return r.createElement(o.ThemeContext.Provider,{value:t.theme},r.createElement(m.Provider,{value:t},e.children))}function O(e){var t=e.theme,n=e.children,o=h(),u="function"==typeof t?d({},o,{theme:t(o.theme)}):b.all({},o,{theme:t});return r.createElement(w,{context:u},n)}function E(e){return n({key:e})}function j(e){return function(t){return r.createElement(O,{theme:e},t.children)}}function k(e,t){return{stylesOf:function(t){return c.get(e,t,{})},cn:function(r){var n=c.styles(r)(e);return t.css(n)}}}b.all=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return u.all(t,g)};var q=function(e){return"function"==typeof e},P=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function T(e,t){var r={};for(var n in e)p(n)&&!t.includes(n)&&(r[n]=e[n]);return r}function S(){var e=h().theme;return(P(e)||!e)&&a(!1),e}var M=function(e,t){var r=c.get(e,"colors."+t,t);return/^var\(--/.test(r)?r.replace(/^var\(--(\w+)(.*?), /,"").replace(/\)/,""):r},C=function(e,t){return function(r){return l.desaturate(t,M(r,e))}};Object.keys(c).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return c[e]}})})),exports.pick=s,exports.omit=f,exports.isPropValid=p,exports.alpha=function(e,t){return function(r){return l.rgba(M(r,e),t)}},exports.cleanProps=function(e,t){void 0===t&&(t=[]);var r=T(e,t);return f.apply(void 0,[r].concat(t))},exports.complement=function(e){return function(t){return l.complement(M(t,e))}},exports.createEmotionInstance=E,exports.createSystem=function(e,t){var r=E(t),n=j(e),o=k(e,r);return{emotionInstance:r,ThemeProvider:n,cn:o.cn,stylesOf:o.stylesOf}},exports.createThemeConsumers=k,exports.createThemeProvider=j,exports.darken=function(e,t){return function(r){return l.darken(t,M(r,e))}},exports.desaturate=C,exports.forwardRef=function(e){return r.forwardRef(e)},exports.getColor=M,exports.grayscale=function(e){return C(e,1)},exports.hue=function(e,t){return function(r){return l.setHue(t,M(r,e))}},exports.inlineVariant=function(e){return e.reduce((function(e,t){return t[0]?""+e+t[1]:e}),"")},exports.invert=function(e){return function(t){return l.invert(M(t,e))}},exports.isFunction=q,exports.isObjectEmpty=P,exports.jsxs=function(e){var t=e.children,n=e.component,o=e.props,u=e.element,i=e.ref;return q(t)?t(o):r.createElement(n,d({as:u},o,{ref:i}),null!=t?t:null==o?void 0:o.children)},exports.lighten=function(e,t){return function(r){return l.lighten(t,M(r,e))}},exports.lightness=function(e,t){return function(r){return l.setLightness(t,M(r,e))}},exports.mix=function(e,t,r){return void 0===r&&(r=.5),function(n){return l.mix(r,M(n,e),M(n,t))}},exports.pickHTMLProps=T,exports.rotate=function(e,t){return function(r){return l.adjustHue(t,M(r,e))}},exports.saturate=function(e,t){return function(r){return l.saturate(t,M(r,e))}},exports.saturation=function(e,t){return function(r){return l.setSaturation(t,M(r,e))}},exports.shade=function(e,t){return function(r){return l.shade(t,M(r,e))}},exports.tint=function(e,t){return function(r){return l.tint(t,M(r,e))}},exports.transparentize=function(e,t){return function(r){return l.transparentize(t,M(r,e))}},exports.useResponsiveValue=function(e){return function(e,r){void 0===r&&(r={});var n=S(),o="function"==typeof e?e(n.theme):e,u=function(e){void 0===e&&(e={});var r=S(),n=e.defaultIndex,o=void 0===n?0:n,u=r.theme&&r.theme.breakpoints||c.defaultBreakpoints;if("number"!=typeof o)throw new TypeError("Default breakpoint index should be a number. Got: "+o+", "+typeof o);if(o<0||o>u.length-1)throw new RangeError("Default breakpoint index out of range. Theme has "+u.length+" breakpoints, got index "+o);var i=t.useState(o),a=i[0],s=i[1];return t.useEffect((function(){var e=function(){var e=u.filter((function(e){return window.matchMedia("screen and (min-width: "+e+")").matches})).length;a!==e&&s(e)};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[u,a]),a}(r);return o[u>=o.length?o.length-1:u]}(Array.isArray(e)?e:[e])},exports.useTheme=S; | ||
| //# sourceMappingURL=admin-ui-system.cjs.production.min.js.map |
@@ -6,11 +6,10 @@ import React, { useContext, createContext, useState, useEffect } from 'react'; | ||
| import packageInfo from '@emotion/react/package.json'; | ||
| import get from 'lodash.get'; | ||
| export { default as get } from 'lodash.get'; | ||
| import { get, styles, defaultBreakpoints } from '@vtex/admin-styles'; | ||
| export * from '@vtex/admin-styles'; | ||
| import invariant from 'tiny-invariant'; | ||
| export { default as pick } from 'lodash.pick'; | ||
| import omit from 'lodash.omit'; | ||
| export { default as omit } from 'lodash.omit'; | ||
| import lodashMerge from 'lodash.merge'; | ||
| import isPropValid from '@emotion/is-prop-valid'; | ||
| export { default as isPropValid } from '@emotion/is-prop-valid'; | ||
| import invariant from 'tiny-invariant'; | ||
| import { darken as darken$1, lighten as lighten$1, adjustHue, setHue, setSaturation, setLightness, desaturate as desaturate$1, saturate as saturate$1, shade as shade$1, tint as tint$1, transparentize as transparentize$1, rgba, mix as mix$1, complement as complement$1, invert as invert$1 } from 'polished'; | ||
@@ -104,14 +103,45 @@ | ||
| /** | ||
| * merges n objects into one | ||
| */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| function createSystem(theme, appKey) { | ||
| var emotionInstance = createEmotionInstance(appKey); | ||
| var ThemeProvider = createThemeProvider(theme); | ||
| var merge$1 = function merge() { | ||
| for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| params[_key] = arguments[_key]; | ||
| } | ||
| var _createThemeConsumers = createThemeConsumers(theme, emotionInstance), | ||
| cn = _createThemeConsumers.cn, | ||
| stylesOf = _createThemeConsumers.stylesOf; | ||
| return lodashMerge.apply(void 0, [{}].concat(params)); | ||
| }; | ||
| return { | ||
| emotionInstance: emotionInstance, | ||
| ThemeProvider: ThemeProvider, | ||
| cn: cn, | ||
| stylesOf: stylesOf | ||
| }; | ||
| } | ||
| function createEmotionInstance(appKey) { | ||
| return createEmotion({ | ||
| key: appKey | ||
| }); | ||
| } | ||
| function createThemeProvider(theme) { | ||
| return function AdminProvider(_ref) { | ||
| var children = _ref.children; | ||
| return React.createElement(ThemeProvider, { | ||
| theme: theme | ||
| }, children); | ||
| }; | ||
| } | ||
| function createThemeConsumers(theme, emotionInstance) { | ||
| return { | ||
| stylesOf: function stylesOf(themeKey) { | ||
| var rawStyles = get(theme, themeKey, {}); | ||
| return rawStyles; | ||
| }, | ||
| cn: function cn(styleProp) { | ||
| var rawStyles = styles(styleProp)(theme); | ||
| var className = emotionInstance.css(rawStyles); | ||
| return className; | ||
| } | ||
| }; | ||
| } | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| /** | ||
@@ -121,3 +151,2 @@ * Whether a value is a function | ||
| var isFunction = function isFunction(param) { | ||
@@ -177,24 +206,2 @@ return typeof param === 'function'; | ||
| } | ||
| var transformScale = function transformScale(acc, curr) { | ||
| var _extends2; | ||
| return _extends({}, acc, (_extends2 = {}, _extends2[curr] = function (scale, value) { | ||
| if (typeof value !== 'number' || value >= 0) { | ||
| if (typeof value === 'string' && value.startsWith('-')) { | ||
| var valueWithoutMinus = value.substring(1); | ||
| var _n = get(scale, valueWithoutMinus, valueWithoutMinus); | ||
| return "-" + _n; | ||
| } | ||
| return get(scale, value, value); | ||
| } | ||
| var absolute = Math.abs(value); | ||
| var n = get(scale, absolute, absolute); | ||
| if (typeof n === 'string') return "-" + n; | ||
| return Number(n) * -1; | ||
| }, _extends2)); | ||
| }; | ||
| /** | ||
@@ -213,313 +220,2 @@ * Function that helps in the creation of a themeKey with conditional variants | ||
| var aliases = { | ||
| bg: 'backgroundColor', | ||
| fontSettings: 'fontVariationSettings' | ||
| }; | ||
| var defaultBreakpoints = /*#__PURE__*/[40, 52, 64].map(function (n) { | ||
| return n + "em"; | ||
| }); | ||
| var defaultTheme = { | ||
| space: [0, 4, 8, 16, 32, 64, 128, 256, 512], | ||
| fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] | ||
| }; | ||
| var multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
| marginY: ['marginTop', 'marginBottom'], | ||
| paddingX: ['paddingLeft', 'paddingRight'], | ||
| paddingY: ['paddingTop', 'paddingBottom'], | ||
| size: ['width', 'height'] | ||
| }; | ||
| var transformations = /*#__PURE__*/['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(transformScale, {}); | ||
| var scales = { | ||
| color: 'colors', | ||
| backgroundColor: 'colors', | ||
| borderColor: 'colors', | ||
| caretColor: 'colors', | ||
| columnRuleColor: 'colors', | ||
| opacity: 'opacities', | ||
| transition: 'transitions', | ||
| margin: 'space', | ||
| marginTop: 'space', | ||
| marginRight: 'space', | ||
| marginBottom: 'space', | ||
| marginLeft: 'space', | ||
| marginX: 'space', | ||
| marginY: 'space', | ||
| marginBlock: 'space', | ||
| marginBlockEnd: 'space', | ||
| marginBlockStart: 'space', | ||
| marginInline: 'space', | ||
| marginInlineEnd: 'space', | ||
| marginInlineStart: 'space', | ||
| padding: 'space', | ||
| paddingTop: 'space', | ||
| paddingRight: 'space', | ||
| paddingBottom: 'space', | ||
| paddingLeft: 'space', | ||
| paddingX: 'space', | ||
| paddingY: 'space', | ||
| paddingBlock: 'space', | ||
| paddingBlockEnd: 'space', | ||
| paddingBlockStart: 'space', | ||
| paddingInline: 'space', | ||
| paddingInlineEnd: 'space', | ||
| paddingInlineStart: 'space', | ||
| scrollPadding: 'space', | ||
| scrollPaddingTop: 'space', | ||
| scrollPaddingRight: 'space', | ||
| scrollPaddingBottom: 'space', | ||
| scrollPaddingLeft: 'space', | ||
| scrollPaddingX: 'space', | ||
| scrollPaddingY: 'space', | ||
| inset: 'space', | ||
| insetBlock: 'space', | ||
| insetBlockEnd: 'space', | ||
| insetBlockStart: 'space', | ||
| insetInline: 'space', | ||
| insetInlineEnd: 'space', | ||
| insetInlineStart: 'space', | ||
| top: 'space', | ||
| right: 'space', | ||
| bottom: 'space', | ||
| left: 'space', | ||
| gridGap: 'space', | ||
| gridColumnGap: 'space', | ||
| gridRowGap: 'space', | ||
| gap: 'space', | ||
| columnGap: 'space', | ||
| rowGap: 'space', | ||
| fontFamily: 'fonts', | ||
| fontSize: 'fontSizes', | ||
| fontWeight: 'fontWeights', | ||
| lineHeight: 'lineHeights', | ||
| letterSpacing: 'letterSpacings', | ||
| border: 'border', | ||
| borderTop: 'borders', | ||
| borderRight: 'borders', | ||
| borderBottom: 'borders', | ||
| borderLeft: 'borders', | ||
| borderWidth: 'borderWidths', | ||
| borderStyle: 'borderStyles', | ||
| borderRadius: 'radii', | ||
| borderTopRightRadius: 'radii', | ||
| borderTopLeftRadius: 'radii', | ||
| borderBottomRightRadius: 'radii', | ||
| borderBottomLeftRadius: 'radii', | ||
| borderTopWidth: 'borderWidths', | ||
| borderTopColor: 'colors', | ||
| borderTopStyle: 'borderStyles', | ||
| borderBottomWidth: 'borderWidths', | ||
| borderBottomColor: 'colors', | ||
| borderBottomStyle: 'borderStyles', | ||
| borderLeftWidth: 'borderWidths', | ||
| borderLeftColor: 'colors', | ||
| borderLeftStyle: 'borderStyles', | ||
| borderRightWidth: 'borderWidths', | ||
| borderRightColor: 'colors', | ||
| borderRightStyle: 'borderStyles', | ||
| borderBlock: 'borders', | ||
| borderBlockEnd: 'borders', | ||
| borderBlockEndStyle: 'borderStyles', | ||
| borderBlockEndWidth: 'borderWidths', | ||
| borderBlockStart: 'borders', | ||
| borderBlockStartStyle: 'borderStyles', | ||
| borderBlockStartWidth: 'borderWidths', | ||
| borderBlockStyle: 'borderStyles', | ||
| borderBlockWidth: 'borderWidths', | ||
| borderEndEndRadius: 'radii', | ||
| borderEndStartRadius: 'radii', | ||
| borderInline: 'borders', | ||
| borderInlineEnd: 'borders', | ||
| borderInlineEndStyle: 'borderStyles', | ||
| borderInlineEndWidth: 'borderWidths', | ||
| borderInlineStart: 'borders', | ||
| borderInlineStartStyle: 'borderStyles', | ||
| borderInlineStartWidth: 'borderWidths', | ||
| borderInlineStyle: 'borderStyles', | ||
| borderInlineWidth: 'borderWidths', | ||
| borderStartEndRadius: 'radii', | ||
| borderStartStartRadius: 'radii', | ||
| outlineColor: 'colors', | ||
| boxShadow: 'shadows', | ||
| textShadow: 'shadows', | ||
| zIndex: 'zIndices', | ||
| width: 'sizes', | ||
| minWidth: 'sizes', | ||
| maxWidth: 'sizes', | ||
| height: 'sizes', | ||
| minHeight: 'sizes', | ||
| maxHeight: 'sizes', | ||
| flexBasis: 'sizes', | ||
| size: 'sizes', | ||
| blockSize: 'sizes', | ||
| inlineSize: 'sizes', | ||
| maxBlockSize: 'sizes', | ||
| maxInlineSize: 'sizes', | ||
| minBlockSize: 'sizes', | ||
| minInlineSize: 'sizes', | ||
| fill: 'colors', | ||
| stroke: 'colors', | ||
| fontVariationSettings: 'fontSettings', | ||
| text: 'text' | ||
| }; | ||
| var responsive = function responsive(styles) { | ||
| return function (theme) { | ||
| var next = {}; | ||
| var breakpoints = theme && theme.breakpoints || defaultBreakpoints; | ||
| var mediaQueries = [null].concat(breakpoints.map(function (n) { | ||
| return "@media screen and (min-width: " + n + ")"; | ||
| })); | ||
| for (var k in styles) { | ||
| var key = k; | ||
| var value = styles[key]; | ||
| if (typeof value === 'function') { | ||
| value = value(theme !== null && theme !== void 0 ? theme : {}); | ||
| } | ||
| if (value == null) continue; | ||
| if (!Array.isArray(value)) { | ||
| next[key] = value; | ||
| continue; | ||
| } | ||
| for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) { | ||
| var _next$media; | ||
| var media = mediaQueries[i]; | ||
| if (!media) { | ||
| next[key] = value[i]; | ||
| continue; | ||
| } | ||
| next[media] = (_next$media = next[media]) !== null && _next$media !== void 0 ? _next$media : {}; | ||
| if (value[i] == null) continue; | ||
| next[media][key] = value[i]; | ||
| } | ||
| } | ||
| return next; | ||
| }; | ||
| }; | ||
| var styles = function styles(args) { | ||
| if (args === void 0) { | ||
| args = {}; | ||
| } | ||
| return function (props) { | ||
| if (props === void 0) { | ||
| props = {}; | ||
| } | ||
| var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); | ||
| var result = {}; | ||
| var obj = typeof args === 'function' ? args(theme) : args; | ||
| if (obj.themeKey) { | ||
| obj = _extends({}, get(theme, obj.themeKey), obj); | ||
| delete obj.themeKey; | ||
| } | ||
| var stylx = responsive(obj)(theme); | ||
| for (var key in stylx) { | ||
| var x = stylx[key]; | ||
| var val = typeof x === 'function' ? x(theme) : x; | ||
| if (val && typeof val === 'object') { | ||
| result[key] = styles(val)(theme); | ||
| continue; | ||
| } | ||
| var prop = key in aliases ? aliases[key] : key; | ||
| var scaleName = prop in scales ? scales[prop] : undefined; | ||
| var scale = get(theme, scaleName, get(theme, prop, {})); | ||
| var transform = get(transformations, prop, get); | ||
| var value = transform(scale, val, val); | ||
| var isObjectScale = value && typeof value === 'object'; | ||
| if (isObjectScale) { | ||
| var defaultValue = value["default"]; | ||
| if (defaultValue) { | ||
| if (typeof defaultValue === 'object') { | ||
| value = styles(defaultValue)(theme); | ||
| Object.assign(result, value); | ||
| delete result[prop]; | ||
| } else { | ||
| var _value; | ||
| value = (_value = {}, _value[prop] = defaultValue, _value); | ||
| Object.assign(result, value); | ||
| } | ||
| } else { | ||
| value = styles(value)(theme); | ||
| Object.assign(result, value); | ||
| delete result[prop]; | ||
| } | ||
| } | ||
| if (prop in multiples) { | ||
| var dirs = multiples[prop]; | ||
| for (var i = 0; i < dirs.length; i++) { | ||
| result[dirs[i]] = value; | ||
| } | ||
| } else if (!isObjectScale) { | ||
| result[prop] = value; | ||
| } | ||
| } | ||
| return result; | ||
| }; | ||
| }; | ||
| function createSystem(theme, appKey) { | ||
| var emotionInstance = createEmotionInstance(appKey); | ||
| var ThemeProvider = createThemeProvider(theme); | ||
| var _createThemeConsumers = createThemeConsumers(theme, emotionInstance), | ||
| cn = _createThemeConsumers.cn, | ||
| stylesOf = _createThemeConsumers.stylesOf; | ||
| return { | ||
| emotionInstance: emotionInstance, | ||
| ThemeProvider: ThemeProvider, | ||
| cn: cn, | ||
| stylesOf: stylesOf | ||
| }; | ||
| } | ||
| function createEmotionInstance(appKey) { | ||
| return createEmotion({ | ||
| key: appKey | ||
| }); | ||
| } | ||
| function createThemeProvider(theme) { | ||
| return function AdminProvider(_ref) { | ||
| var children = _ref.children; | ||
| return React.createElement(ThemeProvider, { | ||
| theme: theme | ||
| }, children); | ||
| }; | ||
| } | ||
| function createThemeConsumers(theme, emotionInstance) { | ||
| return { | ||
| stylesOf: function stylesOf(themeKey) { | ||
| var rawStyles = get(theme, themeKey, {}); | ||
| return rawStyles; | ||
| }, | ||
| cn: function cn(styleProp) { | ||
| var rawStyles = styles(styleProp)(theme); | ||
| var className = emotionInstance.css(rawStyles); | ||
| return className; | ||
| } | ||
| }; | ||
| } | ||
| function useTheme() { | ||
@@ -787,3 +483,3 @@ var _useThemeContext = useThemeContext(), | ||
| export { alpha, cleanProps, complement, createEmotionInstance, createSystem, createThemeConsumers, createThemeProvider, darken, desaturate, forwardRef, getColor, grayscale, hue, inlineVariant, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge$1 as merge, mix, pickHTMLProps, rotate, saturate, saturation, shade, styles, tint, transformScale, transparentize, useResponsiveValue$1 as useResponsiveValue, useTheme }; | ||
| export { alpha, cleanProps, complement, createEmotionInstance, createSystem, createThemeConsumers, createThemeProvider, darken, desaturate, forwardRef, getColor, grayscale, hue, inlineVariant, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, mix, pickHTMLProps, rotate, saturate, saturation, shade, tint, transparentize, useResponsiveValue$1 as useResponsiveValue, useTheme }; | ||
| //# sourceMappingURL=admin-ui-system.esm.js.map |
@@ -1,2 +0,2 @@ | ||
| import { Colors, Theme } from './types'; | ||
| import { Colors, Theme } from '@vtex/admin-styles'; | ||
| /** | ||
@@ -3,0 +3,0 @@ * Get color from theme.colors |
@@ -7,152 +7,1 @@ /** | ||
| export declare const availableStyleProps: string[]; | ||
| export declare const aliases: { | ||
| bg: string; | ||
| fontSettings: string; | ||
| }; | ||
| export declare const defaultBreakpoints: string[]; | ||
| export declare const defaultTheme: { | ||
| space: number[]; | ||
| fontSizes: number[]; | ||
| }; | ||
| export declare const multiples: { | ||
| marginX: string[]; | ||
| marginY: string[]; | ||
| paddingX: string[]; | ||
| paddingY: string[]; | ||
| size: string[]; | ||
| }; | ||
| export declare const transformations: { | ||
| [x: string]: any; | ||
| }; | ||
| export declare const scales: { | ||
| color: string; | ||
| backgroundColor: string; | ||
| borderColor: string; | ||
| caretColor: string; | ||
| columnRuleColor: string; | ||
| opacity: string; | ||
| transition: string; | ||
| margin: string; | ||
| marginTop: string; | ||
| marginRight: string; | ||
| marginBottom: string; | ||
| marginLeft: string; | ||
| marginX: string; | ||
| marginY: string; | ||
| marginBlock: string; | ||
| marginBlockEnd: string; | ||
| marginBlockStart: string; | ||
| marginInline: string; | ||
| marginInlineEnd: string; | ||
| marginInlineStart: string; | ||
| padding: string; | ||
| paddingTop: string; | ||
| paddingRight: string; | ||
| paddingBottom: string; | ||
| paddingLeft: string; | ||
| paddingX: string; | ||
| paddingY: string; | ||
| paddingBlock: string; | ||
| paddingBlockEnd: string; | ||
| paddingBlockStart: string; | ||
| paddingInline: string; | ||
| paddingInlineEnd: string; | ||
| paddingInlineStart: string; | ||
| scrollPadding: string; | ||
| scrollPaddingTop: string; | ||
| scrollPaddingRight: string; | ||
| scrollPaddingBottom: string; | ||
| scrollPaddingLeft: string; | ||
| scrollPaddingX: string; | ||
| scrollPaddingY: string; | ||
| inset: string; | ||
| insetBlock: string; | ||
| insetBlockEnd: string; | ||
| insetBlockStart: string; | ||
| insetInline: string; | ||
| insetInlineEnd: string; | ||
| insetInlineStart: string; | ||
| top: string; | ||
| right: string; | ||
| bottom: string; | ||
| left: string; | ||
| gridGap: string; | ||
| gridColumnGap: string; | ||
| gridRowGap: string; | ||
| gap: string; | ||
| columnGap: string; | ||
| rowGap: string; | ||
| fontFamily: string; | ||
| fontSize: string; | ||
| fontWeight: string; | ||
| lineHeight: string; | ||
| letterSpacing: string; | ||
| border: string; | ||
| borderTop: string; | ||
| borderRight: string; | ||
| borderBottom: string; | ||
| borderLeft: string; | ||
| borderWidth: string; | ||
| borderStyle: string; | ||
| borderRadius: string; | ||
| borderTopRightRadius: string; | ||
| borderTopLeftRadius: string; | ||
| borderBottomRightRadius: string; | ||
| borderBottomLeftRadius: string; | ||
| borderTopWidth: string; | ||
| borderTopColor: string; | ||
| borderTopStyle: string; | ||
| borderBottomWidth: string; | ||
| borderBottomColor: string; | ||
| borderBottomStyle: string; | ||
| borderLeftWidth: string; | ||
| borderLeftColor: string; | ||
| borderLeftStyle: string; | ||
| borderRightWidth: string; | ||
| borderRightColor: string; | ||
| borderRightStyle: string; | ||
| borderBlock: string; | ||
| borderBlockEnd: string; | ||
| borderBlockEndStyle: string; | ||
| borderBlockEndWidth: string; | ||
| borderBlockStart: string; | ||
| borderBlockStartStyle: string; | ||
| borderBlockStartWidth: string; | ||
| borderBlockStyle: string; | ||
| borderBlockWidth: string; | ||
| borderEndEndRadius: string; | ||
| borderEndStartRadius: string; | ||
| borderInline: string; | ||
| borderInlineEnd: string; | ||
| borderInlineEndStyle: string; | ||
| borderInlineEndWidth: string; | ||
| borderInlineStart: string; | ||
| borderInlineStartStyle: string; | ||
| borderInlineStartWidth: string; | ||
| borderInlineStyle: string; | ||
| borderInlineWidth: string; | ||
| borderStartEndRadius: string; | ||
| borderStartStartRadius: string; | ||
| outlineColor: string; | ||
| boxShadow: string; | ||
| textShadow: string; | ||
| zIndex: string; | ||
| width: string; | ||
| minWidth: string; | ||
| maxWidth: string; | ||
| height: string; | ||
| minHeight: string; | ||
| maxHeight: string; | ||
| flexBasis: string; | ||
| size: string; | ||
| blockSize: string; | ||
| inlineSize: string; | ||
| maxBlockSize: string; | ||
| maxInlineSize: string; | ||
| minBlockSize: string; | ||
| minInlineSize: string; | ||
| fill: string; | ||
| stroke: string; | ||
| fontVariationSettings: string; | ||
| text: string; | ||
| }; |
| import React, { ReactNode } from 'react'; | ||
| import { Theme } from './types'; | ||
| import { Theme } from '@vtex/admin-styles'; | ||
| export interface ContextValue { | ||
@@ -4,0 +4,0 @@ EMOTION_VERSION: string; |
| import React from 'react'; | ||
| import { Emotion } from '@emotion/css/create-instance'; | ||
| import { StyleProp } from './types'; | ||
| import { StyleProp } from '@vtex/admin-styles'; | ||
| export declare function createSystem<T>(theme: T, appKey: string): CreateSystemReturn; | ||
@@ -5,0 +5,0 @@ export declare function createEmotionInstance(appKey: string): Emotion; |
@@ -1,2 +0,2 @@ | ||
| import { ResponsiveValue } from '../types'; | ||
| import { ResponsiveValue } from '@vtex/admin-styles'; | ||
| export declare function useResponsiveValue<T>(value: ResponsiveValue<T>): T; |
@@ -1,2 +0,2 @@ | ||
| import { Theme } from '../types'; | ||
| import { Theme } from '@vtex/admin-styles'; | ||
| export declare function useTheme(): Theme; |
| export * from './createSystem'; | ||
| export * from './hooks'; | ||
| export * from './types'; | ||
| export * from './util'; | ||
| export * from './jsxs'; | ||
| export * from './styles'; | ||
| export * from './color'; | ||
| export * from '@vtex/admin-styles'; |
@@ -1,2 +0,2 @@ | ||
| import { Theme } from './types'; | ||
| import { Theme } from '@vtex/admin-styles'; | ||
| declare type DefaultOptions = { | ||
@@ -3,0 +3,0 @@ defaultIndex?: number; |
| import { ForwardRefRenderFunction } from 'react'; | ||
| import get from 'lodash.get'; | ||
| import pick from 'lodash.pick'; | ||
@@ -7,6 +6,2 @@ import omit from 'lodash.omit'; | ||
| /** | ||
| * merges n objects into one | ||
| */ | ||
| declare const merge: (...params: any) => any; | ||
| /** | ||
| * Whether a value is a function | ||
@@ -36,6 +31,3 @@ */ | ||
| declare function forwardRef<T extends ForwardRefRenderFunction<any, any>>(component: T): T; | ||
| export { get, pick, omit, isFunction, isObjectEmpty, merge, cleanProps, pickHTMLProps, isPropValid, forwardRef, }; | ||
| export declare const transformScale: (acc: Record<string, any>, curr: string) => { | ||
| [x: string]: any; | ||
| }; | ||
| export { pick, omit, isFunction, isObjectEmpty, cleanProps, pickHTMLProps, isPropValid, forwardRef, }; | ||
| /** | ||
@@ -42,0 +34,0 @@ * Function that helps in the creation of a themeKey with conditional variants |
| { | ||
| "name": "@vtex/admin-ui-system", | ||
| "version": "0.10.1", | ||
| "version": "0.11.0", | ||
| "main": "dist/index.js", | ||
@@ -36,4 +36,2 @@ "module": "dist/admin-ui-system.esm.js", | ||
| "devDependencies": { | ||
| "@types/lodash.get": "^4.4.6", | ||
| "@types/lodash.merge": "^4.6.6", | ||
| "@types/lodash.omit": "^4.5.6", | ||
@@ -47,7 +45,6 @@ "@types/lodash.pick": "^4.4.6", | ||
| "@emotion/react": "^11.1.4", | ||
| "@vtex/admin-styles": "^0.1.0", | ||
| "csstype": "^3.0.5", | ||
| "deepmerge": "^4.2.2", | ||
| "focus-visible": "^5.1.0", | ||
| "lodash.get": "^4.4.2", | ||
| "lodash.merge": "^4.6.2", | ||
| "lodash.omit": "^4.5.0", | ||
@@ -59,3 +56,3 @@ "lodash.pick": "^4.4.0", | ||
| }, | ||
| "gitHead": "a8ecdee42975a01285a76675e9ba3b242bd2d5e6" | ||
| "gitHead": "b997f566f3d19e3df900f90e8097b9e6c5bae6aa" | ||
| } |
| import * as polished from 'polished' | ||
| import { Colors, Theme, get } from '@vtex/admin-styles' | ||
| import { get } from './util' | ||
| import { Colors, Theme } from './types' | ||
| /** | ||
@@ -7,0 +5,0 @@ * Get color from theme.colors |
@@ -1,3 +0,1 @@ | ||
| import { transformScale } from './util' | ||
| /** | ||
@@ -38,174 +36,1 @@ * Style props that are actually picked | ||
| ] | ||
| export const aliases = { | ||
| bg: 'backgroundColor', | ||
| fontSettings: 'fontVariationSettings', | ||
| } | ||
| export const defaultBreakpoints = [40, 52, 64].map((n) => `${n}em`) | ||
| export const defaultTheme = { | ||
| space: [0, 4, 8, 16, 32, 64, 128, 256, 512], | ||
| fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], | ||
| } | ||
| export const multiples = { | ||
| marginX: ['marginLeft', 'marginRight'], | ||
| marginY: ['marginTop', 'marginBottom'], | ||
| paddingX: ['paddingLeft', 'paddingRight'], | ||
| paddingY: ['paddingTop', 'paddingBottom'], | ||
| size: ['width', 'height'], | ||
| } | ||
| export const transformations = [ | ||
| 'margin', | ||
| 'marginTop', | ||
| 'marginRight', | ||
| 'marginBottom', | ||
| 'marginLeft', | ||
| 'marginX', | ||
| 'marginY', | ||
| 'marginBlock', | ||
| 'marginBlockEnd', | ||
| 'marginBlockStart', | ||
| 'marginInline', | ||
| 'marginInlineEnd', | ||
| 'marginInlineStart', | ||
| 'top', | ||
| 'bottom', | ||
| 'left', | ||
| 'right', | ||
| ].reduce(transformScale, {}) | ||
| export const scales = { | ||
| color: 'colors', | ||
| backgroundColor: 'colors', | ||
| borderColor: 'colors', | ||
| caretColor: 'colors', | ||
| columnRuleColor: 'colors', | ||
| opacity: 'opacities', | ||
| transition: 'transitions', | ||
| margin: 'space', | ||
| marginTop: 'space', | ||
| marginRight: 'space', | ||
| marginBottom: 'space', | ||
| marginLeft: 'space', | ||
| marginX: 'space', | ||
| marginY: 'space', | ||
| marginBlock: 'space', | ||
| marginBlockEnd: 'space', | ||
| marginBlockStart: 'space', | ||
| marginInline: 'space', | ||
| marginInlineEnd: 'space', | ||
| marginInlineStart: 'space', | ||
| padding: 'space', | ||
| paddingTop: 'space', | ||
| paddingRight: 'space', | ||
| paddingBottom: 'space', | ||
| paddingLeft: 'space', | ||
| paddingX: 'space', | ||
| paddingY: 'space', | ||
| paddingBlock: 'space', | ||
| paddingBlockEnd: 'space', | ||
| paddingBlockStart: 'space', | ||
| paddingInline: 'space', | ||
| paddingInlineEnd: 'space', | ||
| paddingInlineStart: 'space', | ||
| scrollPadding: 'space', | ||
| scrollPaddingTop: 'space', | ||
| scrollPaddingRight: 'space', | ||
| scrollPaddingBottom: 'space', | ||
| scrollPaddingLeft: 'space', | ||
| scrollPaddingX: 'space', | ||
| scrollPaddingY: 'space', | ||
| inset: 'space', | ||
| insetBlock: 'space', | ||
| insetBlockEnd: 'space', | ||
| insetBlockStart: 'space', | ||
| insetInline: 'space', | ||
| insetInlineEnd: 'space', | ||
| insetInlineStart: 'space', | ||
| top: 'space', | ||
| right: 'space', | ||
| bottom: 'space', | ||
| left: 'space', | ||
| gridGap: 'space', | ||
| gridColumnGap: 'space', | ||
| gridRowGap: 'space', | ||
| gap: 'space', | ||
| columnGap: 'space', | ||
| rowGap: 'space', | ||
| fontFamily: 'fonts', | ||
| fontSize: 'fontSizes', | ||
| fontWeight: 'fontWeights', | ||
| lineHeight: 'lineHeights', | ||
| letterSpacing: 'letterSpacings', | ||
| border: 'border', | ||
| borderTop: 'borders', | ||
| borderRight: 'borders', | ||
| borderBottom: 'borders', | ||
| borderLeft: 'borders', | ||
| borderWidth: 'borderWidths', | ||
| borderStyle: 'borderStyles', | ||
| borderRadius: 'radii', | ||
| borderTopRightRadius: 'radii', | ||
| borderTopLeftRadius: 'radii', | ||
| borderBottomRightRadius: 'radii', | ||
| borderBottomLeftRadius: 'radii', | ||
| borderTopWidth: 'borderWidths', | ||
| borderTopColor: 'colors', | ||
| borderTopStyle: 'borderStyles', | ||
| borderBottomWidth: 'borderWidths', | ||
| borderBottomColor: 'colors', | ||
| borderBottomStyle: 'borderStyles', | ||
| borderLeftWidth: 'borderWidths', | ||
| borderLeftColor: 'colors', | ||
| borderLeftStyle: 'borderStyles', | ||
| borderRightWidth: 'borderWidths', | ||
| borderRightColor: 'colors', | ||
| borderRightStyle: 'borderStyles', | ||
| borderBlock: 'borders', | ||
| borderBlockEnd: 'borders', | ||
| borderBlockEndStyle: 'borderStyles', | ||
| borderBlockEndWidth: 'borderWidths', | ||
| borderBlockStart: 'borders', | ||
| borderBlockStartStyle: 'borderStyles', | ||
| borderBlockStartWidth: 'borderWidths', | ||
| borderBlockStyle: 'borderStyles', | ||
| borderBlockWidth: 'borderWidths', | ||
| borderEndEndRadius: 'radii', | ||
| borderEndStartRadius: 'radii', | ||
| borderInline: 'borders', | ||
| borderInlineEnd: 'borders', | ||
| borderInlineEndStyle: 'borderStyles', | ||
| borderInlineEndWidth: 'borderWidths', | ||
| borderInlineStart: 'borders', | ||
| borderInlineStartStyle: 'borderStyles', | ||
| borderInlineStartWidth: 'borderWidths', | ||
| borderInlineStyle: 'borderStyles', | ||
| borderInlineWidth: 'borderWidths', | ||
| borderStartEndRadius: 'radii', | ||
| borderStartStartRadius: 'radii', | ||
| outlineColor: 'colors', | ||
| boxShadow: 'shadows', | ||
| textShadow: 'shadows', | ||
| zIndex: 'zIndices', | ||
| width: 'sizes', | ||
| minWidth: 'sizes', | ||
| maxWidth: 'sizes', | ||
| height: 'sizes', | ||
| minHeight: 'sizes', | ||
| maxHeight: 'sizes', | ||
| flexBasis: 'sizes', | ||
| size: 'sizes', | ||
| blockSize: 'sizes', | ||
| inlineSize: 'sizes', | ||
| maxBlockSize: 'sizes', | ||
| maxInlineSize: 'sizes', | ||
| minBlockSize: 'sizes', | ||
| minInlineSize: 'sizes', | ||
| fill: 'colors', | ||
| stroke: 'colors', | ||
| fontVariationSettings: 'fontSettings', | ||
| text: 'text', | ||
| } |
| import { useResponsiveValue as useValue } from '../match-media' | ||
| import { ResponsiveValue } from '../types' | ||
| import { ResponsiveValue } from '@vtex/admin-styles' | ||
@@ -4,0 +4,0 @@ export function useResponsiveValue<T>(value: ResponsiveValue<T>): T { |
@@ -5,3 +5,3 @@ import invariant from 'tiny-invariant' | ||
| import { isObjectEmpty } from '../util' | ||
| import { Theme } from '../types' | ||
| import { Theme } from '@vtex/admin-styles' | ||
@@ -8,0 +8,0 @@ export function useTheme(): Theme { |
| export * from './createSystem' | ||
| export * from './hooks' | ||
| export * from './types' | ||
| export * from './util' | ||
| export * from './jsxs' | ||
| export * from './styles' | ||
| export * from './color' | ||
| export * from '@vtex/admin-styles' |
| import { useState, useEffect } from 'react' | ||
| import { Theme } from './types' | ||
| import { Theme, defaultBreakpoints } from '@vtex/admin-styles' | ||
| import { useTheme } from './hooks' | ||
| import { defaultBreakpoints } from './constants' | ||
@@ -7,0 +6,0 @@ type DefaultOptions = { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Dependency count
- decreased by-6.67%
14
- Dev dependency count
- decreased by-40%
3
Worsened metrics
- Total package byte prevSize
- decreased by-45.75%
147754
- Number of package files
- decreased by-11.36%
39
- Lines of code
- decreased by-52.93%
1937
Dependency changes
+ Added@vtex/admin-styles@^0.1.0
+ Added@vtex/admin-styles@0.1.1(transitive)
- Removedlodash.get@^4.4.2
- Removedlodash.merge@^4.6.2