@ikas/bp-storefront 1.4.0-beta.207 → 1.4.0-beta.209

package/dist/packages/storefront-config/src/theme-globals.js

@@ -1 +1 @@
-import{__assign as n}from'./../../../ext/tslib/tslib.es6.mjs.js';var e=new RegExp(["[A-Z]?[a-z]+","[0-9]*(?:1ST|2ND|3RD|(?![123])[0-9]TH)(?=\\b|[a-z_])","[0-9]*(?:1st|2nd|3rd|(?![123])[0-9]th)(?=\\b|[A-Z_])","[A-Z]+(?![a-z])","[0-9]+","[A-Z]"].join("|"),"g");function i(n){return(String(n).match(e)||[]).map(function(n,e){var i=n.toLowerCase();return 0===e?i:i.charAt(0).toUpperCase()+i.slice(1)}).join("")}var r={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},t=function(n,e){return e?"var(--".concat(i(n),", ").concat(e,")"):"var(--".concat(i(n),")")},l=function(n){return"_".concat(n)},u=function(n){return"bp(".concat(n,")")},o=function(n){return n.map(function(n){return{id:n.id,width:Number(n.width)||0}})},a=/\d*\.?\d+(?:e[+-]?\d+)?px|\d*\.?\d+(?:e[+-]?\d+)?|[()+\-*/]|\S/gi,s=function(n,e){var i=c(n,e);return i&&d(n,e,i)},d=function(n,e,i){var r=n[e.i];if("+"!==r&&"-"!==r)return i;e.i+=1;var t=c(n,e);return t&&t.isPx===i.isPx?d(n,e,{n:"+"===r?i.n+t.n:i.n-t.n,isPx:i.isPx}):null},c=function(n,e){var i=f(n,e);return i&&v(n,e,i)},v=function(n,e,i){var r=n[e.i];if("*"!==r&&"/"!==r)return i;e.i+=1;var t=f(n,e);return t?"*"===r?i.isPx&&t.isPx?null:v(n,e,{n:i.n*t.n,isPx:i.isPx||t.isPx}):t.isPx||0===t.n?null:v(n,e,{n:i.n/t.n,isPx:i.isPx}):null},f=function(n,e){var i,r=n[e.i];return"-"===r?(e.i+=1,(i=f(n,e))&&{n:-i.n,isPx:i.isPx}):"+"===r?(e.i+=1,f(n,e)):"("===r?(e.i+=1,(i=s(n,e))&&")"===n[e.i]?(e.i+=1,i):null):"object"==typeof r&&null!==r?(e.i+=1,r):null},m=function(n){var e=function(n){var e=(n.match(a)||[]).map(function(n){return/^\d*\.?\d+(?:e[+-]?\d+)?px$/i.test(n)?{n:parseFloat(n),isPx:!0}:/^\d*\.?\d+(?:e[+-]?\d+)?$/i.test(n)?{n:parseFloat(n),isPx:!1}:"()+-*/".includes(n)?n:null});return e.every(function(n){return null!==n})?e:null}(n.replace(/calc\(/gi,"("));if(!e)return null;var i={i:0},r=s(e,i);return r&&r.isPx&&i.i===e.length&&Number.isFinite(r.n)&&Math.abs(r.n)<1e8?r.n:null},p=function(n,e,i,r){if(e>=n.length||e>r)return-1;var t=n[e],l="("===t?i+1:")"===t?i-1:i;return 0===l?e:p(n,e+1,l,r)},y=function(n,e){return e.reduce(function(n,e){return n.split(u(e.id)).join("".concat(e.width,"px"))},n)},h=/^-(?:webkit|moz|ms|o)-$/i,b=/[-A-Za-z0-9_]+$/,g=function(n,e,i){var r=n.indexOf("bp(",i);if(-1===r)return n;var t=Math.max(i,r-512-5),l=n.slice(t,r+5).indexOf("calc("),u=-1===l?-1:t+l;if(-1===u||u>r)return g(n,e,r+3);var o=b.exec(n.slice(Math.max(0,u-12),u)),a=o?o[0]:"",s=h.test(a)&&!b.test(n.slice(u-a.length-1,u-a.length));if(a&&!s)return g(n,e,u+5);var d=s?u-a.length:u,c=u+4,v=p(n,c,0,c+512);if(-1===v)return g(n,e,u+5);if(v<r)return g(n,e,v+1);var f=y(n.slice(c+1,v),e),x=m(f);if(null===x)return g(n,e,u+5);var N="".concat(parseFloat(x.toFixed(4)),"px");return g(n.slice(0,d)+N+n.slice(v+1),e,d+N.length)};function x(n,e){if(!n||!n.includes("bp("))return n;var i=g(n,e,0);return i.includes("bp(")?y(i,e):i}var N=function(n){var e;if(n)return Array.isArray(n)?null===(e=n[0])||void 0===e?void 0:e.value:n},P=function(n){var e,i=n;if(!i)return null;if(i.patternValueId)return t(i.patternValueId);if(i.colorSchemeId)return t(i.colorSchemeId);if(i.keyframeValueId)return l(i.keyframeValueId);var r=i.value;return null==r?null:"object"==typeof r?"string"==typeof r.css?r.css:null!=r.value?"".concat(r.value).concat(null!==(e=r.unit)&&void 0!==e?e:""):null:String(r)},S=/^__.+__$/,I=function(n){return S.test(null!=n?n:"")},A=function(n){return n.replace("_optional","").replace("_array","")},j=function(n,e){if(!n||!e)return null;var i=A(e),r=n.find(function(n){return(null==n?void 0:n.id)===i});if(!r||"enum"!==r.type||!r.enumOptions||"object"!=typeof r.enumOptions)return null;for(var t={},l=0,u=Object.entries(r.enumOptions);l<u.length;l++){var o=u[l],a=o[0],s=o[1];null!=s&&(t[a]=String(s))}return Object.keys(t).length?t:null},k=function(n,e,i){if("BOOLEAN"===n)return!!e;if("NUMBER"===n){if("number"!=typeof e&&"string"!=typeof e)return null;var r="string"==typeof e&&""===e.trim()?NaN:Number(e);return Number.isFinite(r)?r:null}if("ENUM"===n){if(!i)return null;if("string"!=typeof e&&"number"!=typeof e)return null;var t=String(e);return Object.values(i).includes(t)?t:null}return null!=e?e:null};function _(e){var u,o,a,s,d,c,v,f,m,p,y,h,b,g,x;if(!e)return r;for(var S=null===(u=e.theme)||void 0===u?void 0:u.pattern,_={},O=0,w=null!==(s=null===(a=null===(o=e.globalsBlueprint)||void 0===o?void 0:o.module)||void 0===a?void 0:a.variables)&&void 0!==s?s:[];O<w.length;O++){var V=w[O];if(!1!==V.isGlobal&&V.variableName&&(!I(V.id)&&!I(V.variableName))){var D=null!==(d=V.variableType)&&void 0!==d?d:"TEXT",E="ENUM"===D?j(e.types,V.typeId):null;_[V.variableName]=n({name:V.variableName,displayName:null!==(c=V.displayName)&&void 0!==c?c:V.variableName,type:D,value:k(D,V.defaultValue,E)},"ENUM"===D?n(n({},V.typeId?{enumTypeId:A(V.typeId)}:{}),{options:null!=E?E:{}}):{})}}var M=(null!==(v=null==S?void 0:S.values)&&void 0!==v?v:[]).map(function(n){var e,i;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,resolved:P(N(null===(i=n.style)||void 0===i?void 0:i.value)),cssVar:t(n.id)}}),F=function(n){return(null!=n?n:[]).map(function(n){return{property:n.property,value:P(N(n.value))}}).filter(function(n){return null!=n.value})},T=(null!==(f=null==S?void 0:S.elements)&&void 0!==f?f:[]).map(function(n){for(var e,r={},t=0,u=F(n.styles);t<u.length;t++){var o=u[t],a=o.property,s=o.value;r[i(a)]=s}return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,resolved:r,className:l(n.id),isDefault:!!n.isDefault}}),z=(null!==(p=null===(m=e.theme)||void 0===m?void 0:m.breakpoints)&&void 0!==p?p:[]).map(function(n){var e,i;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,width:null!==(i=n.width)&&void 0!==i?i:0}}),U=(null!==(h=null===(y=e.theme)||void 0===y?void 0:y.keyframes)&&void 0!==h?h:[]).map(function(n){var e,i,r;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,type:null!==(i=n.type)&&void 0!==i?i:"keyframe",ref:l(n.id),settings:F(n.styles),points:(null!==(r=n.points)&&void 0!==r?r:[]).map(function(n){return{point:n.point,styles:F(n.styles)}})}}),Z=(null!==(b=null==S?void 0:S.colorSchemes)&&void 0!==b?b:[]).map(function(n){var e;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id}}),$=null!==(g=null==S?void 0:S.colorSchemes)&&void 0!==g?g:[],B=null!==(x=null==S?void 0:S.colorSchemeValues)&&void 0!==x?x:[],R=B.map(function(n){for(var e,i,r,u,o=function(n){var e,i;return null!==(i=null===(e=B.find(function(e){return e.isDefault&&(n?e.designAssetId===n:!e.designAssetId)}))||void 0===e?void 0:e.colors)&&void 0!==i?i:[]}(n.designAssetId),a={},s=function(l){var u=null===(e=n.colors)||void 0===e?void 0:e.find(function(n){return n.colorSchemeId===l.id}),s=u?void 0:o.find(function(n){return n.colorSchemeId===l.id});a[l.id]={resolved:null!==(r=P(null!==(i=null==u?void 0:u.style)&&void 0!==i?i:null==s?void 0:s.style))&&void 0!==r?r:"#ffffff",cssVar:t(l.id)}},d=0,c=$;d<c.length;d++){s(c[d])}return{id:n.id,name:null!==(u=n.name)&&void 0!==u?u:n.id,isDefault:!!n.isDefault,className:l(n.id),colorsByScheme:a}});return{settings:_,colors:M,typography:T,breakpoints:z,keyframes:U,colorSchemes:{schemes:Z,values:R}}}export{r as EMPTY_THEME_GLOBALS,u as breakpointCssToken,i as cssVarCamelCase,t as cssVarRef,I as isReservedVariableId,l as rawClassRef,x as resolveBreakpointMediaTokens,_ as serializeThemeGlobals,o as toResolverBreakpoints};
+import{__assign as n,__spreadArray as e}from'./../../../ext/tslib/tslib.es6.mjs.js';var i=new RegExp(["[A-Z]?[a-z]+","[0-9]*(?:1ST|2ND|3RD|(?![123])[0-9]TH)(?=\\b|[a-z_])","[0-9]*(?:1st|2nd|3rd|(?![123])[0-9]th)(?=\\b|[A-Z_])","[A-Z]+(?![a-z])","[0-9]+","[A-Z]"].join("|"),"g");function r(n){return(String(n).match(i)||[]).map(function(n,e){var i=n.toLowerCase();return 0===e?i:i.charAt(0).toUpperCase()+i.slice(1)}).join("")}var t={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},l=function(n,e){return e?"var(--".concat(r(n),", ").concat(e,")"):"var(--".concat(r(n),")")},u=function(n){return"_".concat(n)},o=function(n){return"bp(".concat(n,")")},a=function(n){return n.map(function(n){return{id:n.id,width:Number(n.width)||0}})},d=/\d*\.?\d+(?:e[+-]?\d+)?px|\d*\.?\d+(?:e[+-]?\d+)?|[()+\-*/]|\S/gi,s=function(n,e){var i=c(n,e);return i&&v(n,e,i)},v=function(n,e,i){var r=n[e.i];if("+"!==r&&"-"!==r)return i;e.i+=1;var t=c(n,e);return t&&t.isPx===i.isPx?v(n,e,{n:"+"===r?i.n+t.n:i.n-t.n,isPx:i.isPx}):null},c=function(n,e){var i=p(n,e);return i&&f(n,e,i)},f=function(n,e,i){var r=n[e.i];if("*"!==r&&"/"!==r)return i;e.i+=1;var t=p(n,e);return t?"*"===r?i.isPx&&t.isPx?null:f(n,e,{n:i.n*t.n,isPx:i.isPx||t.isPx}):t.isPx||0===t.n?null:f(n,e,{n:i.n/t.n,isPx:i.isPx}):null},p=function(n,e){var i,r=n[e.i];return"-"===r?(e.i+=1,(i=p(n,e))&&{n:-i.n,isPx:i.isPx}):"+"===r?(e.i+=1,p(n,e)):"("===r?(e.i+=1,(i=s(n,e))&&")"===n[e.i]?(e.i+=1,i):null):"object"==typeof r&&null!==r?(e.i+=1,r):null},m=function(n){var e=function(n){var e=(n.match(d)||[]).map(function(n){return/^\d*\.?\d+(?:e[+-]?\d+)?px$/i.test(n)?{n:parseFloat(n),isPx:!0}:/^\d*\.?\d+(?:e[+-]?\d+)?$/i.test(n)?{n:parseFloat(n),isPx:!1}:"()+-*/".includes(n)?n:null});return e.every(function(n){return null!==n})?e:null}(n.replace(/calc\(/gi,"("));if(!e)return null;var i={i:0},r=s(e,i);return r&&r.isPx&&i.i===e.length&&Number.isFinite(r.n)&&Math.abs(r.n)<1e8?r.n:null},y=function(n,e,i,r){if(e>=n.length||e>r)return-1;var t=n[e],l="("===t?i+1:")"===t?i-1:i;return 0===l?e:y(n,e+1,l,r)},h=function(n,e){return e.reduce(function(n,e){return n.split(o(e.id)).join("".concat(e.width,"px"))},n)},b=/^-(?:webkit|moz|ms|o)-$/i,g=/[-A-Za-z0-9_]+$/,x=function(n,e,i){var r=n.indexOf("bp(",i);if(-1===r)return n;var t=Math.max(i,r-512-5),l=n.slice(t,r+5).indexOf("calc("),u=-1===l?-1:t+l;if(-1===u||u>r)return x(n,e,r+3);var o=g.exec(n.slice(Math.max(0,u-12),u)),a=o?o[0]:"",d=b.test(a)&&!g.test(n.slice(u-a.length-1,u-a.length));if(a&&!d)return x(n,e,u+5);var s=d?u-a.length:u,v=u+4,c=y(n,v,0,v+512);if(-1===c)return x(n,e,u+5);if(c<r)return x(n,e,c+1);var f=h(n.slice(v+1,c),e),p=m(f);if(null===p)return x(n,e,u+5);var N="".concat(parseFloat(p.toFixed(4)),"px");return x(n.slice(0,s)+N+n.slice(c+1),e,s+N.length)};function N(n,e){if(!n||!n.includes("bp("))return n;var i=x(n,e,0);return i.includes("bp(")?h(i,e):i}var S=function(n){var e;if(n)return Array.isArray(n)?null===(e=n[0])||void 0===e?void 0:e.value:n},k=function(n){var e,i=n;if(!i)return null;if(i.patternValueId)return l(i.patternValueId);if(i.colorSchemeId)return l(i.colorSchemeId);if(i.keyframeValueId)return u(i.keyframeValueId);var r=i.value;return null==r?null:"object"==typeof r?"string"==typeof r.css?r.css:null!=r.value?"".concat(r.value).concat(null!==(e=r.unit)&&void 0!==e?e:""):null:String(r)},P=["font-size","line-height","letter-spacing","font-weight"],I=/^__.+__$/,j=function(n){return I.test(null!=n?n:"")},w=function(n){return n.replace("_optional","").replace("_array","")},A=function(n,e){if(!n||!e)return null;var i=w(e),r=n.find(function(n){return(null==n?void 0:n.id)===i});if(!r||"enum"!==r.type||!r.enumOptions||"object"!=typeof r.enumOptions)return null;for(var t={},l=0,u=Object.entries(r.enumOptions);l<u.length;l++){var o=u[l],a=o[0],d=o[1];null!=d&&(t[a]=String(d))}return Object.keys(t).length?t:null},O=function(n,e,i){if("BOOLEAN"===n)return!!e;if("NUMBER"===n){if("number"!=typeof e&&"string"!=typeof e)return null;var r="string"==typeof e&&""===e.trim()?NaN:Number(e);return Number.isFinite(r)?r:null}if("ENUM"===n){if(!i)return null;if("string"!=typeof e&&"number"!=typeof e)return null;var t=String(e);return Object.values(i).includes(t)?t:null}return null!=e?e:null};function _(i){var o,a,d,s,v,c,f,p,m,y,h,b,g,x,N,I,_;if(!i)return t;for(var V=null===(o=i.theme)||void 0===o?void 0:o.pattern,D={},E=0,M=null!==(s=null===(d=null===(a=i.globalsBlueprint)||void 0===a?void 0:a.module)||void 0===d?void 0:d.variables)&&void 0!==s?s:[];E<M.length;E++){var z=M[E];if(!1!==z.isGlobal&&z.variableName&&(!j(z.id)&&!j(z.variableName))){var F=null!==(v=z.variableType)&&void 0!==v?v:"TEXT",T="ENUM"===F?A(i.types,z.typeId):null;D[z.variableName]=n({name:z.variableName,displayName:null!==(c=z.displayName)&&void 0!==c?c:z.variableName,type:F,value:O(F,z.defaultValue,T)},"ENUM"===F?n(n({},z.typeId?{enumTypeId:w(z.typeId)}:{}),{options:null!=T?T:{}}):{})}}var U=(null!==(f=null==V?void 0:V.values)&&void 0!==f?f:[]).map(function(n){var e,i;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,resolved:k(S(null===(i=n.style)||void 0===i?void 0:i.value)),cssVar:l(n.id)}}),Z=function(n){return(null!=n?n:[]).map(function(n){return{property:n.property,value:k(S(n.value))}}).filter(function(n){return null!=n.value})},$=e([],null!==(m=null===(p=i.theme)||void 0===p?void 0:p.breakpoints)&&void 0!==m?m:[],!0).sort(function(n,e){return(Number(e.width)||0)-(Number(n.width)||0)}),B=(null!==(y=null==V?void 0:V.elements)&&void 0!==y?y:[]).map(function(i){for(var t,l={},o=0,a=Z(i.styles);o<a.length;o++){var d=a[o],s=d.property,v=d.value;l[r(s)]=v}var c=function(i,t,l){var u;if(!(null===(u=i.breakpointStyles)||void 0===u?void 0:u.length))return[];var o=n({},t);return l.reduce(function(l,u){for(var a,d,s=null===(a=i.breakpointStyles)||void 0===a?void 0:a.find(function(n){return n.breakpointId===u.id}),v={},c=0,f=null!==(d=null==s?void 0:s.styles)&&void 0!==d?d:[];c<f.length;c++){var p=f[c];if(P.includes(p.property)){var m=r(p.property),y=k(S(p.value));null==y||""===y||null==t[m]||m in v||(v[m]=y)}}return Object.keys(v).length?(Object.assign(o,v),e(e([],l,!0),[{id:u.id,width:Number(u.width)||0,overrides:v,resolved:n({},o)}],!1)):l},[])}(i,l,$);return n({id:i.id,name:null!==(t=i.name)&&void 0!==t?t:i.id,resolved:l,className:u(i.id),isDefault:!!i.isDefault},c.length?{breakpoints:c}:{})}),R=(null!==(b=null===(h=i.theme)||void 0===h?void 0:h.breakpoints)&&void 0!==b?b:[]).map(function(n){var e,i;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,width:null!==(i=n.width)&&void 0!==i?i:0}}),C=(null!==(x=null===(g=i.theme)||void 0===g?void 0:g.keyframes)&&void 0!==x?x:[]).map(function(n){var e,i,r;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,type:null!==(i=n.type)&&void 0!==i?i:"keyframe",ref:u(n.id),settings:Z(n.styles),points:(null!==(r=n.points)&&void 0!==r?r:[]).map(function(n){return{point:n.point,styles:Z(n.styles)}})}}),L=(null!==(N=null==V?void 0:V.colorSchemes)&&void 0!==N?N:[]).map(function(n){var e;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id}}),G=null!==(I=null==V?void 0:V.colorSchemes)&&void 0!==I?I:[],H=null!==(_=null==V?void 0:V.colorSchemeValues)&&void 0!==_?_:[],X=H.map(function(n){for(var e,i,r,t,o=function(n){var e,i;return null!==(i=null===(e=H.find(function(e){return e.isDefault&&(n?e.designAssetId===n:!e.designAssetId)}))||void 0===e?void 0:e.colors)&&void 0!==i?i:[]}(n.designAssetId),a={},d=function(t){var u=null===(e=n.colors)||void 0===e?void 0:e.find(function(n){return n.colorSchemeId===t.id}),d=u?void 0:o.find(function(n){return n.colorSchemeId===t.id});a[t.id]={resolved:null!==(r=k(null!==(i=null==u?void 0:u.style)&&void 0!==i?i:null==d?void 0:d.style))&&void 0!==r?r:"#ffffff",cssVar:l(t.id)}},s=0,v=G;s<v.length;s++){d(v[s])}return{id:n.id,name:null!==(t=n.name)&&void 0!==t?t:n.id,isDefault:!!n.isDefault,className:u(n.id),colorsByScheme:a}});return{settings:D,colors:U,typography:B,breakpoints:R,keyframes:C,colorSchemes:{schemes:L,values:X}}}export{t as EMPTY_THEME_GLOBALS,o as breakpointCssToken,r as cssVarCamelCase,l as cssVarRef,j as isReservedVariableId,u as rawClassRef,N as resolveBreakpointMediaTokens,_ as serializeThemeGlobals,a as toResolverBreakpoints};

package/dist/storefront-config/src/theme-globals.d.ts

@@ -60,6 +60,23 @@ export type TypographyToken = {
     className: string;
     /** True when this is the theme's default/global text style (the editor's "Make Default Style"). */
     isDefault: boolean;
+    /**
+     * Per-breakpoint values, widest first; present only when the style overrides at least one
+     * breakpoint. `className` already applies them through media queries — read this only when a
+     * value is needed in JS. Breakpoints without their own overrides are omitted: they use the next
+     * wider listed breakpoint, or the desktop `resolved` values.
+     */
+    breakpoints?: TypographyBreakpointToken[];
+};
+export type TypographyBreakpointToken = {
+    /** Theme breakpoint id (see `BreakpointToken`). */
+    id: string;
+    /** Media query max-width in px. */
+    width: number;
+    /** Only the values this breakpoint sets itself, keyed like `resolved`. */
+    overrides: Record<string, string>;
+    /** Full effective values at this breakpoint: desktop values plus inherited and own overrides. */
+    resolved: Record<string, string>;
 };
 export type BreakpointToken = {
     id: string;
@@ -191,6 +208,10 @@ type PatternElementLike = {
     name?: string;
     styles?: ElementStyleLike[];
     isDefault?: boolean;
+    breakpointStyles?: {
+        breakpointId: string;
+        styles?: ElementStyleLike[];
+    }[];
 };
 type ColorSchemeLike = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/bp-storefront",
-  "version": "1.4.0-beta.207",
+  "version": "1.4.0-beta.209",
   "description": "A framework for the ikas blueprint storefronts.",
   "author": "ikas",
   "license": "ISC",