@ikas/bp-storefront 2.9.7 → 2.10.0

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

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

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

@@ -47,6 +47,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;
@@ -178,6 +195,10 @@ type PatternElementLike = {
     name?: string;
     styles?: ElementStyleLike[];
     isDefault?: boolean;
+    breakpointStyles?: {
+        breakpointId: string;
+        styles?: ElementStyleLike[];
+    }[];
 };
 type ColorSchemeLike = {
     id: string;
@@ -198,7 +219,7 @@ type ColorSchemeValueLike = {
 type BreakpointLike = {
     id: string;
     name?: string;
-    width?: number;
+    width?: number | string;
 };
 type KeyframePointLike = {
     point: string;

package/package.json

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