From 6eb2b54af251026c09a8a848d68a2046ef076a3b Mon Sep 17 00:00:00 2001 From: Wataru Date: Mon, 25 Sep 2023 16:11:51 +0900 Subject: [PATCH] Excluded collections containing a specific string from the export target (#276) --- dist/plugin.js | 2 +- dist/ui.html | 2 +- dist/ui.js | 2 +- src/ui/components/GeneralSettings.tsx | 4 ++-- src/utilities/getTokenJson.ts | 2 +- src/utilities/getVariables.ts | 18 +++++++++--------- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/dist/plugin.js b/dist/plugin.js index 0ceb62cb..e9103250 100644 --- a/dist/plugin.js +++ b/dist/plugin.js @@ -1 +1 @@ -(()=>{"use strict";const e={filename:"design-tokens",extension:".tokens.json",nameConversion:"default",tokenFormat:"standard",compression:!1,urlJsonCompression:!0,serverUrl:void 0,eventType:"update-tokens",accessToken:void 0,acceptHeader:"application/vnd.github.everest-preview+json",contentType:"text/plain;charset=UTF-8",authType:"token",reference:"main",exclusionPrefix:"",excludeExtensionProp:!1,alias:"alias, ref, reference",keyInName:!1,prefixInName:!0,modeReference:!0,prefix:{color:"color",gradient:"gradient",typography:"typography",font:"font",effect:"effect",grid:"grid",border:"border, borders",breakpoint:"breakpoint, breakpoints",radius:"radius, radii",size:"size, sizes",spacing:"spacing",motion:"motion",opacity:"opacity, opacities"},exports:{color:!0,gradient:!0,font:!0,typography:!0,effect:!0,grid:!0,border:!0,breakpoint:!0,radius:!0,size:!0,spacing:!0,motion:!0,opacity:!0,variables:!0}},t={ui:{generalSettings:{width:550,height:755},export:{width:550,height:356},urlExport:{width:550,height:650}},key:{lastVersionSettingsOpened:"lastVersionSettingsOpened",fileId:"fileId",settings:"settings",extensionPluginData:"org.lukasoppermann.figmaDesignTokens",extensionFigmaStyleId:"styleId",extensionVariableStyleId:"variableId",extensionAlias:"alias",authType:{token:"token",gitlabToken:"gitlab_token",basic:"Basic",bearer:"Bearer"}},exclusionPrefixDefault:["_","."],fileExtensions:[{label:".tokens.json",value:".tokens.json"},{label:".tokens",value:".tokens"},{label:".json",value:".json"}]},i=(e,t=!0)=>!0===t?JSON.stringify(e):JSON.stringify(e,null,2),n=(e,t)=>Object.fromEntries(Object.entries(e).map((([i,n])=>void 0!==n&&typeof t[i]!=typeof n?[i,e[i]]:[i,t[i]])));var a=function(e,t,i,n){return new(i||(i=Promise))((function(a,o){function r(e){try{l(n.next(e))}catch(e){o(e)}}function s(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,s)}l((n=n.apply(e,t||[])).next())}))};const o={generalSettings:"generalSettings",export:"export",sendSettings:"sendSettings",urlExport:"urlExport",help:"help",demo:"demo",openUrl:"openUrl",reset:"reset",saveSettings:"saveSettings",closePlugin:"closePlugin"},r="6.8.9";const s=e=>{return i=void 0,n=void 0,o=function*(){const i=yield e.clientStorage.getAsync(t.key.lastVersionSettingsOpened),n=((e,t="1.0.0")=>{const[i,n,a]=t.split("."),[o,r,s]=e.split(".");return i{let i=e.root.getPluginData(t.key.fileId);return void 0!==i&&""!==i||(e.root.setPluginData(t.key.fileId,e.root.name+" "+Math.floor(1e9*Math.random())),i=e.root.getPluginData(t.key.fileId)),i},p="color",u="gradient",c="font",d="effect",g="grid",m="border",y="breakpoint",f="radius",v="size",x="spacing",b="motion",h="opacity",k="variables",S=(e,t=2)=>{if(void 0===e)return;if("number"!=typeof e||"number"!=typeof t)throw new Error(`Invalid parameters, both value "${e}" (${typeof e}) and decimalPlaces "${t}" (${typeof t}) must be of type number`);const i=Math.pow(10,t);return Math.round(e*i)/i},R=(e,t)=>{var i;return{r:S(255*e.r,0),g:S(255*e.g,0),b:S(255*e.b,0),a:S(null!==(i=null!=t?t:e.a)&&void 0!==i?i:1)}},E=e=>"SOLID"===e.type&&!0===e.visible?R(e.color,e.opacity):null,I={fill:{value:{r:0,g:0,b:0,a:0},type:"color",blendMode:"normal"}},T=e=>e?{[t.key.extensionAlias]:e}:{},O={GRADIENT_LINEAR:"linear",GRADIENT_RADIAL:"radial",GRADIENT_ANGULAR:"angular",GRADIENT_DIAMOND:"diamond"},A=([[e,t],[i,n]])=>{const a=Math.atan2(n-t,i-e)*(180/Math.PI)+315;return a>360?a-360:a},L=(e,i)=>e.reduce(((e,n)=>{const a=n.paints.filter((e=>"IMAGE"!==e.type));if(n.paints.length&&0===a.length)return e;n.paints=a;const{alias:o,description:r}=((e="",t)=>{t=t&&0!==t.filter((e=>e)).length?t:["Ref:"];const i=new RegExp("("+t.join("|").toLowerCase()+"):?\\s");let n;const a=e.split(/\r?\n/).filter((e=>!e.toLowerCase().match(i)||(n=e.toLowerCase().replace(i,"").trim(),!1)));return{alias:n,description:a.join("\n")}})(n.description,i.alias),s=(l=n.paints[0],["GRADIENT_LINEAR","GRADIENT_RADIAL","GRADIENT_ANGULAR","GRADIENT_DIAMOND"].includes(null==l?void 0:l.type));var l;const c=n.paints.length?n.paints.map((e=>(e=>{var t;return"SOLID"===e.type?{fill:{value:E(e),type:"color",blendMode:(null===(t=e.blendMode)||void 0===t?void 0:t.toLowerCase())||"normal"}}:["GRADIENT_LINEAR","GRADIENT_RADIAL","GRADIENT_ANGULAR","GRADIENT_DIAMOND"].includes(e.type)?{gradientType:{value:O[e.type],type:"string"},rotation:{value:A(e.gradientTransform),type:"number",unit:"degree"},stops:e.gradientStops.map((e=>({position:{value:S(e.position),type:"number"},color:{value:R(e.color),type:"color"}}))),opacity:{value:S(e.opacity),type:"number"}}:null})(e))):[I];return[...e,{name:`${s?i.gradient[0]:i.color[0]}/${n.name}`,category:s?"gradient":"color",exportKey:s?u:p,description:r,values:c,extensions:{[t.key.extensionPluginData]:Object.assign({[t.key.extensionFigmaStyleId]:n.id,exportKey:s?u:p},T(o))}}]}),[]),N=(e,i)=>e.filter((e=>e.layoutGrids.length>0)).map((e=>({name:`${i[0]}/${e.name}`,category:"grid",exportKey:g,description:e.description||null,values:e.layoutGrids.map((e=>"GRID"===e.pattern?(e=>({pattern:{value:e.pattern.toLowerCase(),type:"string"},sectionSize:{value:e.sectionSize,unit:"pixel",type:"number"}}))(e):(e=>{return Object.assign(Object.assign(Object.assign({pattern:{value:e.pattern.toLowerCase(),type:"string"}},void 0!==e.sectionSize&&{sectionSize:{value:e.sectionSize,unit:"pixel",type:"number"}}),{gutterSize:{value:e.gutterSize,unit:"pixel",type:"number"},alignment:{value:e.alignment.toLowerCase(),type:"string"},count:(t=e.count,t===1/0?{value:"auto",type:"string"}:{value:t,type:"number"})}),void 0!==e.offset&&{offset:{value:e.offset,unit:"pixel",type:"number"}});var t})(e))),extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:g}}}))),C={NONE:"none",UNDERLINE:"underline",STRIKETHROUGH:"line-through"},D={ORIGINAL:"none",UPPER:"uppercase",LOWER:"lowercase",TITLE:"capitalize",SMALL_CAPS:"small-caps"},P={100:100,thin:100,200:200,extralight:200,ultralight:200,extraleicht:200,300:300,light:300,leicht:300,400:400,normal:400,regular:400,buch:400,500:500,medium:500,kraeftig:500,kräftig:500,600:600,semibold:600,demibold:600,halbfett:600,700:700,bold:700,dreiviertelfett:700,800:800,extrabold:800,ultabold:800,fett:800,900:900,black:900,heavy:900,super:900,extrafett:900},w={normal:"normal",condensed:"condensed",expanded:"expanded",extended:"expanded"},_={normal:"normal",italic:"italic",kursiv:"italic",oblique:"oblique"},B=e=>{const t=e.toLowerCase().split(" ");let i=t[0];return["extra","ultra","semi","demi"].includes(t[0])&&["bold","light"].includes(t[1])&&(i=`${t[0]}${t[1]}`),P[i]||400},M=e=>{const t=e.toLowerCase().split(" ");return w[t[t.length-1]]||w[t[t.length-2]]||"normal"},j=e=>{const t=e.toLowerCase().split(" ").pop();return _[t]||"normal"},z=(e,i)=>e.map((e=>({name:`${i[0]}/${e.name}`,category:"font",exportKey:c,description:e.description||void 0,values:{fontSize:{value:e.fontSize,unit:"pixel",type:"number"},textDecoration:{value:C[e.textDecoration],type:"string"},fontFamily:{value:e.fontName.family,type:"string"},fontWeight:{value:B(e.fontName.style),type:"number"},fontStyle:{value:j(e.fontName.style),type:"string"},fontStretch:{value:M(e.fontName.style),type:"string"},_fontStyleOld:{value:e.fontName.style,type:"string"},letterSpacing:{value:S(e.letterSpacing.value),unit:"pixels"===e.letterSpacing.unit.toLowerCase()?"pixel":e.letterSpacing.unit.toLowerCase(),type:"number"},lineHeight:{value:S(e.lineHeight.value)||"normal",unit:"pixels"===e.lineHeight.unit.toLowerCase()?"pixel":e.lineHeight.unit.toLowerCase(),type:Object.prototype.hasOwnProperty.call(e.lineHeight,"value")?"number":"string"},paragraphIndent:{value:e.paragraphIndent,unit:"pixel",type:"number"},paragraphSpacing:{value:e.paragraphSpacing,unit:"pixel",type:"number"},textCase:{value:D[e.textCase]||"none",type:"string"}},extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:c}}}))),U={LAYER_BLUR:"layerBlur",BACKGROUND_BLUR:"backgroundBlur",DROP_SHADOW:"dropShadow",INNER_SHADOW:"innerShadow"},G=(e,i)=>e.filter((e=>e.effects.length>0)).map((e=>({name:`${i[0]}/${e.name}`,category:"effect",exportKey:d,description:e.description||null,values:e.effects.map((e=>"LAYER_BLUR"===e.type||"BACKGROUND_BLUR"===e.type?(e=>({effectType:{value:U[e.type],type:"string"},radius:{value:e.radius,unit:"pixel",type:"number"}}))(e):(e=>({effectType:{value:U[e.type],type:"string"},radius:{value:e.radius,unit:"pixel",type:"number"},color:{value:R(e.color),type:"color"},offset:{x:{value:e.offset.x,unit:"pixel",type:"number"},y:{value:e.offset.y,unit:"pixel",type:"number"}},spread:{value:e.spread,unit:"pixel",type:"number"}}))(e))),extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:d}}}))),K=e=>t=>{if(!Array.isArray(e))return;const i=t.name.substr(0,t.name.indexOf("/")).replace(/\s+/g,"");return 0!==i.length?e.includes(i):void 0},F=e=>{if(Object.prototype.hasOwnProperty.call(e,"direction"))return{direction:{value:e.direction.toLowerCase(),type:"string"}}},$={CUSTOM_CUBIC_BEZIER:{type:"custom-cubicBezier",curveType:"cubicBezier",easing:void 0},CUSTOM_SPRING:{type:"custom-spring",curveType:"spring",easing:void 0},LINEAR:{type:"linear",curveType:"cubicBezier",easing:{x1:0,y1:0,x2:1,y2:1}},EASE_IN:{type:"ease-in",curveType:"cubicBezier",easing:{x1:.41999998688697815,y1:0,x2:1,y2:1}},EASE_OUT:{type:"ease-out",curveType:"cubicBezier",easing:{x1:0,y1:0,x2:.5799999833106995,y2:1}},EASE_IN_AND_OUT:{type:"ease-in-out",curveType:"cubicBezier",easing:{x1:.41999998688697815,y1:0,x2:.5799999833106995,y2:1}},EASE_IN_BACK:{type:"ease-in-back",curveType:"cubicBezier",easing:{x1:.30000001192092896,y1:-.05000000074505806,x2:.699999988079071,y2:-.5}},EASE_OUT_BACK:{type:"ease-out-back",curveType:"cubicBezier",easing:{x1:.44999998807907104,y1:1.4500000476837158,x2:.800000011920929,y2:1}},EASE_IN_AND_OUT_BACK:{type:"ease-in-out-back",curveType:"cubicBezier",easing:{x1:.699999988079071,y1:-.4000000059604645,x2:.4000000059604645,y2:1.399999976158142}},BOUNCY:{type:"bouncy",curveType:"spring",easing:{mass:1,stiffness:600,damping:15}},GENTLE:{type:"gentle",curveType:"spring",easing:{mass:1,stiffness:100,damping:15}},QUICK:{type:"quick",curveType:"spring",easing:{mass:1,stiffness:300,damping:20}},SLOW:{type:"slow",curveType:"spring",easing:{mass:1,stiffness:80,damping:20}}},H=e=>{var t;if("type"in e&&void 0!==$[e.type])return"CUSTOM_CUBIC_BEZIER"===e.type&&($.CUSTOM_CUBIC_BEZIER.easing={x1:e.easingFunctionCubicBezier.x1,y1:e.easingFunctionCubicBezier.y1,x2:e.easingFunctionCubicBezier.x2,y2:e.easingFunctionCubicBezier.y2}),"CUSTOM_SPRING"===e.type&&($.CUSTOM_SPRING.easing={mass:e.easingFunctionSpring.mass,stiffness:e.easingFunctionSpring.stiffness,damping:e.easingFunctionSpring.damping}),{easingType:{value:$[e.type].type,type:"string"},easingCurveType:{value:$[e.type].curveType,type:"string"},easingFunction:(t=$[e.type],"spring"===t.curveType?{mass:{value:t.easing.mass,type:"number"},stiffness:{value:t.easing.stiffness,type:"number"},damping:{value:t.easing.damping,type:"number"}}:"cubicBezier"===t.curveType?{x1:{value:t.easing.x1,type:"number"},x2:{value:t.easing.x2,type:"number"},y1:{value:t.easing.y1,type:"number"},y2:{value:t.easing.y2,type:"number"}}:void 0)}},V=e=>{var t;const i=Object.keys($);return!!(e.reactions.length>0&&"NODE"===(null===(t=e.reactions[0].action)||void 0===t?void 0:t.type)&&null!==e.reactions[0].action.transition&&i.includes(e.reactions[0].action.transition.easing.type))},J=(e,i)=>e.filter(K(i)).filter(V).map((e=>({name:e.name,category:"motion",exportKey:b,description:e.description||null,values:Object.assign(Object.assign({transitionType:{value:e.reactions[0].action.transition.type.toLocaleLowerCase(),type:"string"},duration:{value:Math.round(1e3*(e.reactions[0].action.transition.duration+Number.EPSILON))/1e3,unit:"s",type:"number"}},H(e.reactions[0].action.transition.easing)),F(e.reactions[0].action.transition)),extensions:{[t.key.extensionPluginData]:{exportKey:b}}}))),W=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"spacing",exportKey:x,description:e.description||null,values:{top:{value:S(e.paddingTop,2),unit:"pixel",type:"number"},right:{value:S(e.paddingRight,2),unit:"pixel",type:"number"},bottom:{value:S(e.paddingBottom,2),unit:"pixel",type:"number"},left:{value:S(e.paddingLeft,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:x}}}))),q={MITER:"miter",BEVEL:"bevel",ROUND:"round"},Q={CENTER:"center",INSIDE:"inside",OUTSIDE:"outside"},Y=(e,i)=>e.filter(K(i)).filter((e=>e.strokes.length>0)).map((e=>({name:e.name,category:"border",exportKey:m,description:e.description||null,values:{strokeAlign:{value:Q[e.strokeAlign],type:"string"},dashPattern:{value:[...void 0!==e.dashPattern&&e.dashPattern.length>0?e.dashPattern:[0,0]],type:"string"},strokeCap:{value:"string"==typeof e.strokeCap?e.strokeCap.toLowerCase():"mixed",type:"string"},strokeJoin:{value:q[e.strokeJoin],type:"string"},strokeMiterLimit:{value:S(e.strokeMiterLimit),unit:"degree",type:"number"},strokeWeight:{value:e.strokeWeight,unit:"pixel",type:"number"},stroke:{value:e.strokes[0],type:"color"}},extensions:{[t.key.extensionPluginData]:{exportKey:m}}}))),Z=(e,i)=>{const n=e=>({topLeft:{value:e.topLeftRadius||0,unit:"pixel",type:"number"},topRight:{value:e.topRightRadius||0,unit:"pixel",type:"number"},bottomRight:{value:e.bottomRightRadius||0,unit:"pixel",type:"number"},bottomLeft:{value:e.bottomLeftRadius||0,unit:"pixel",type:"number"}});return e.filter(K(i)).map((e=>{return{name:e.name,category:"radius",exportKey:f,description:e.description||null,values:Object.assign(Object.assign({},"number"==typeof e.cornerRadius&&{radius:{value:e.cornerRadius,unit:"pixel",type:"number"}}),{radiusType:{value:(i=e.cornerRadius,"number"==typeof i?"single":"mixed"),type:"string"},radii:n(e),smoothing:{value:S(e.cornerSmoothing,2),comment:"Percent as decimal from 0.0 - 1.0",type:"number"}}),extensions:{[t.key.extensionPluginData]:{exportKey:f}}};var i}))},X=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"breakpoint",exportKey:y,description:e.description||null,values:{width:{value:S(e.width,2),unit:"pixel",type:"number"},height:{value:S(e.height,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:y}}}))),ee=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"opacity",exportKey:h,description:e.description||null,values:{opacity:{value:S(e.opacity,2),type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:h}}}))),te=(e,i)=>!(e=>[...t.exclusionPrefixDefault,...e])(i).includes(e.name.trim().substr(0,1)),ie=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,paints:e.paints})})),t},ne=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,layoutGrids:e.layoutGrids})})),t},ae=e=>{var t,i;return{name:e.name,description:e.description||void 0,bottomLeftRadius:e.bottomLeftRadius,bottomRightRadius:e.bottomRightRadius,topLeftRadius:e.topLeftRadius,topRightRadius:e.topRightRadius,cornerRadius:e.cornerRadius||void 0,cornerSmoothing:e.cornerSmoothing,strokes:(i=e.strokes,[...i].map((e=>E(e))).filter((e=>null!=e))),strokeWeight:e.strokeWeight,strokeStyleId:e.strokeStyleId,strokeMiterLimit:e.strokeMiterLimit,strokeJoin:e.strokeJoin,strokeCap:e.strokeCap,dashPattern:e.dashPattern,strokeAlign:e.strokeAlign,width:e.width,height:e.height,reactions:e.reactions||void 0,paddingTop:e.paddingTop||0,paddingRight:e.paddingRight||0,paddingBottom:e.paddingBottom||0,paddingLeft:e.paddingLeft||0,opacity:null!==(t=e.opacity)&&void 0!==t?t:1}},oe=["COMPONENT","COMPONENT_SET","RECTANGLE","FRAME"],re="_tokens",se=e=>[...e.map((e=>e.findChildren((e=>(e=>"FRAME"===e.type&&e.name.trim().toLowerCase().substr(0,re.length)===re)(e))))).reduce(((e,t)=>[...e,...t]))].map((e=>e.findAll((e=>(e=>"COMPONENT_SET"!==e.parent.type&&oe.includes(e.type)&&e.name.length>0)(e))))).reduce(((e,t)=>[...e,...t]),[]).map((e=>("RECTANGLE"!==e.type&&"FRAME"!==e.type||console.warn("Please use only main components and variants, other types may be deprecated as tokens in the future"),"COMPONENT_SET"===e.type?e.children.map((t=>{return Object.assign(Object.assign({},ae(t)),{name:(i=e.name,n=t.name,`${i}/${n=n.split(",").filter((e=>!["_","."].includes(e.trim().substr(0,1)))).map((e=>e.split("=")[1])).join("/")}`)});var i,n})):[ae(e)]))).reduce(((e,t)=>[...e,...t]),[]),le=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,fontSize:e.fontSize,textDecoration:e.textDecoration,fontName:e.fontName,letterSpacing:e.letterSpacing,lineHeight:e.lineHeight,paragraphIndent:e.paragraphIndent,paragraphSpacing:e.paragraphSpacing,textCase:e.textCase})})),t},pe=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,effects:e.effects})})),t},ue=(e,t="/",i=".")=>e.split(t).join(i).toLowerCase(),ce=e=>"boolean"==typeof e?"string":"number"==typeof e?"dimension":"object"==typeof e?"color":"string"==typeof e?"string":void 0,de=(e,t)=>{let i="color",n={};if("VARIABLE_ALIAS"===t.type){const i=figma.variables.getVariableById(t.id),n=figma.variables.getVariableCollectionById(i.variableCollectionId);return{name:e.name,description:e.description||void 0,exportKey:k,category:ce(Object.values(i.valuesByMode)[0]),values:`{${n.name.toLowerCase()}.${ue(i.name,"/",".")}}`,aliasName:n.name,aliasModes:n.modes}}switch(e.resolvedType){case"COLOR":i="color",n={fill:{value:R(t),type:"color",blendMode:"normal"}};break;case"FLOAT":i="dimension",n=S(t,2);break;case"STRING":i="string",n=t;break;case"BOOLEAN":i="boolean",n=t}return{name:e.name,description:e.description||void 0,exportKey:k,category:i,values:n}},ge=(e,i)=>{const n=Object.fromEntries(e.variables.getLocalVariableCollections().map((e=>[e.id,e]))),a=e.variables.getLocalVariables().map((e=>{const{variableCollectionId:a}=e,{name:o,modes:r}=n[a];return Object.entries(e.valuesByMode).map((([n,a])=>Object.assign(Object.assign({},de(e,a)),{name:i?`${o}/${r.find((({modeId:e})=>e===n)).name}/${e.name}`:`${o}/${e.name}`,extensions:{[t.key.extensionPluginData]:{mode:i?r.find((({modeId:e})=>e===n)).name:void 0,collection:o,scopes:e.scopes,[t.key.extensionVariableStyleId]:e.id,exportKey:k}}})))}));return i?(e=>e.reduce(((e,t)=>{if(!t.aliasModes)return e.push(t),e;const{aliasModes:i,aliasName:n}=t;delete t.aliasModes,delete t.selfCollectionName;for(let a=0;ae.split(",").map((e=>e.replace(/\s+/g,""))),ye=(e,i)=>{const n=((e,t)=>{const i=se([...e.root.children]),n=t.exclusionPrefix.split(",").map((e=>e.replace(/\s+/g,"")));return{tokenFrames:i,paintStyles:ie(e.getLocalPaintStyles()).filter((e=>te(e,n))),gridStyles:ne(e.getLocalGridStyles()).filter((e=>te(e,n))),textStyles:le(e.getLocalTextStyles()).filter((e=>te(e,n))),effectStyles:pe(e.getLocalEffectStyles()).filter((e=>te(e,n)))}})(e,i);return[...(a=n.tokenFrames,o=me(i.prefix.size),a.filter(K(o)).map((e=>({name:e.name,category:"size",exportKey:v,description:e.description||null,values:{width:{value:S(e.width,2),unit:"pixel",type:"number"},height:{value:S(e.height,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:v}}})))),...X(n.tokenFrames,me(i.prefix.breakpoint)),...W(n.tokenFrames,me(i.prefix.spacing)),...Y(n.tokenFrames,me(i.prefix.border)),...Z(n.tokenFrames,me(i.prefix.radius)),...J(n.tokenFrames,me(i.prefix.motion)),...ee(n.tokenFrames,me(i.prefix.opacity)),...L(n.paintStyles,{color:me(i.prefix.color),gradient:me(i.prefix.gradient),alias:me(i.alias)}),...N(n.gridStyles,me(i.prefix.grid)),...z(n.textStyles,me(i.prefix.font)),...G(n.effectStyles,me(i.prefix.effect)),...ge(e,i.modeReference)];var a,o};var fe=function(e,t,i,n){return new(i||(i=Promise))((function(a,o){function r(e){try{l(n.next(e))}catch(e){o(e)}}function s(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,s)}l((n=n.apply(e,t||[])).next())}))};figma.showUI(__html__,{themeColors:!0,visible:!1}),[o.export,o.urlExport,o.generalSettings].includes(figma.command)&&fe(void 0,void 0,void 0,(function*(){const o=(()=>{let i=figma.root.getPluginData(t.key.settings);if(""===i)return e;i=JSON.parse(i);const a=n(e,i);return a.prefix=n(e.prefix,a.prefix),a.exports=n(e.exports,a.exports),a})(),r=yield s(figma);var p;figma.ui.resize(t.ui[figma.command].width,t.ui[figma.command].height),void 0!==r&&"patch"!==r&&figma.ui.resize(t.ui[figma.command].width,t.ui[figma.command].height+60),figma.ui.postMessage({command:figma.command,payload:{settings:Object.assign(Object.assign({},o),{accessToken:yield(p=l(figma),a(void 0,void 0,void 0,(function*(){const e=yield figma.clientStorage.getAsync("accessTokens");return void 0!==e&&e instanceof Object&&e[p]||""})))}),data:i(ye(figma,o)),versionDifference:r,metadata:{filename:figma.root.name}}}||{}),figma.ui.show()})),figma.command===o.help&&figma.ui.postMessage({command:o.help,payload:{url:"https://github.com/lukasoppermann/design-tokens"}}),figma.command===o.demo&&figma.ui.postMessage({command:o.demo,payload:{url:"https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=231%3A2"}}),figma.command===o.reset&&(figma.root.setPluginData(t.key.settings,i(e)),figma.notify("⚙️ Settings have been reset."),figma.closePlugin()),figma.ui.onmessage=n=>fe(void 0,void 0,void 0,(function*(){const{command:r,payload:s}=n;var p,u,c;r===o.closePlugin&&(void 0!==(null==s?void 0:s.notification)&&""!==(null==s?void 0:s.notification)&&figma.notify(s.notification),figma.ui.hide(),figma.closePlugin()),r===o.saveSettings&&(c=s.settings,c=Object.assign(Object.assign({},e),c),figma.root.setPluginData(t.key.settings,i(c)),yield(p=l(figma),u=s.accessToken,a(void 0,void 0,void 0,(function*(){const e=(yield figma.clientStorage.getAsync("accessTokens"))||{},t=Object.assign(Object.assign({},e),{[p]:u});return yield figma.clientStorage.setAsync("accessTokens",t)}))),s.closePlugin&&!0===s.closePlugin&&figma.closePlugin())}))})(); \ No newline at end of file +(()=>{"use strict";const e={filename:"design-tokens",extension:".tokens.json",nameConversion:"default",tokenFormat:"standard",compression:!1,urlJsonCompression:!0,serverUrl:void 0,eventType:"update-tokens",accessToken:void 0,acceptHeader:"application/vnd.github.everest-preview+json",contentType:"text/plain;charset=UTF-8",authType:"token",reference:"main",exclusionPrefix:"",excludeExtensionProp:!1,alias:"alias, ref, reference",keyInName:!1,prefixInName:!0,modeReference:!0,prefix:{color:"color",gradient:"gradient",typography:"typography",font:"font",effect:"effect",grid:"grid",border:"border, borders",breakpoint:"breakpoint, breakpoints",radius:"radius, radii",size:"size, sizes",spacing:"spacing",motion:"motion",opacity:"opacity, opacities"},exports:{color:!0,gradient:!0,font:!0,typography:!0,effect:!0,grid:!0,border:!0,breakpoint:!0,radius:!0,size:!0,spacing:!0,motion:!0,opacity:!0,variables:!0}},t={ui:{generalSettings:{width:550,height:755},export:{width:550,height:356},urlExport:{width:550,height:650}},key:{lastVersionSettingsOpened:"lastVersionSettingsOpened",fileId:"fileId",settings:"settings",extensionPluginData:"org.lukasoppermann.figmaDesignTokens",extensionFigmaStyleId:"styleId",extensionVariableStyleId:"variableId",extensionAlias:"alias",authType:{token:"token",gitlabToken:"gitlab_token",basic:"Basic",bearer:"Bearer"}},exclusionPrefixDefault:["_","."],fileExtensions:[{label:".tokens.json",value:".tokens.json"},{label:".tokens",value:".tokens"},{label:".json",value:".json"}]},i=(e,t=!0)=>!0===t?JSON.stringify(e):JSON.stringify(e,null,2),n=(e,t)=>Object.fromEntries(Object.entries(e).map((([i,n])=>void 0!==n&&typeof t[i]!=typeof n?[i,e[i]]:[i,t[i]])));var a=function(e,t,i,n){return new(i||(i=Promise))((function(a,o){function r(e){try{l(n.next(e))}catch(e){o(e)}}function s(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,s)}l((n=n.apply(e,t||[])).next())}))};const o={generalSettings:"generalSettings",export:"export",sendSettings:"sendSettings",urlExport:"urlExport",help:"help",demo:"demo",openUrl:"openUrl",reset:"reset",saveSettings:"saveSettings",closePlugin:"closePlugin"},r="6.8.9";const s=e=>{return i=void 0,n=void 0,o=function*(){const i=yield e.clientStorage.getAsync(t.key.lastVersionSettingsOpened),n=((e,t="1.0.0")=>{const[i,n,a]=t.split("."),[o,r,s]=e.split(".");return i{let i=e.root.getPluginData(t.key.fileId);return void 0!==i&&""!==i||(e.root.setPluginData(t.key.fileId,e.root.name+" "+Math.floor(1e9*Math.random())),i=e.root.getPluginData(t.key.fileId)),i},p="color",u="gradient",c="font",d="effect",g="grid",m="border",y="breakpoint",f="radius",v="size",x="spacing",b="motion",h="opacity",k="variables",S=(e,t=2)=>{if(void 0===e)return;if("number"!=typeof e||"number"!=typeof t)throw new Error(`Invalid parameters, both value "${e}" (${typeof e}) and decimalPlaces "${t}" (${typeof t}) must be of type number`);const i=Math.pow(10,t);return Math.round(e*i)/i},R=(e,t)=>{var i;return{r:S(255*e.r,0),g:S(255*e.g,0),b:S(255*e.b,0),a:S(null!==(i=null!=t?t:e.a)&&void 0!==i?i:1)}},E=e=>"SOLID"===e.type&&!0===e.visible?R(e.color,e.opacity):null,I={fill:{value:{r:0,g:0,b:0,a:0},type:"color",blendMode:"normal"}},T=e=>e?{[t.key.extensionAlias]:e}:{},O={GRADIENT_LINEAR:"linear",GRADIENT_RADIAL:"radial",GRADIENT_ANGULAR:"angular",GRADIENT_DIAMOND:"diamond"},A=([[e,t],[i,n]])=>{const a=Math.atan2(n-t,i-e)*(180/Math.PI)+315;return a>360?a-360:a},L=(e,i)=>e.reduce(((e,n)=>{const a=n.paints.filter((e=>"IMAGE"!==e.type));if(n.paints.length&&0===a.length)return e;n.paints=a;const{alias:o,description:r}=((e="",t)=>{t=t&&0!==t.filter((e=>e)).length?t:["Ref:"];const i=new RegExp("("+t.join("|").toLowerCase()+"):?\\s");let n;const a=e.split(/\r?\n/).filter((e=>!e.toLowerCase().match(i)||(n=e.toLowerCase().replace(i,"").trim(),!1)));return{alias:n,description:a.join("\n")}})(n.description,i.alias),s=(l=n.paints[0],["GRADIENT_LINEAR","GRADIENT_RADIAL","GRADIENT_ANGULAR","GRADIENT_DIAMOND"].includes(null==l?void 0:l.type));var l;const c=n.paints.length?n.paints.map((e=>(e=>{var t;return"SOLID"===e.type?{fill:{value:E(e),type:"color",blendMode:(null===(t=e.blendMode)||void 0===t?void 0:t.toLowerCase())||"normal"}}:["GRADIENT_LINEAR","GRADIENT_RADIAL","GRADIENT_ANGULAR","GRADIENT_DIAMOND"].includes(e.type)?{gradientType:{value:O[e.type],type:"string"},rotation:{value:A(e.gradientTransform),type:"number",unit:"degree"},stops:e.gradientStops.map((e=>({position:{value:S(e.position),type:"number"},color:{value:R(e.color),type:"color"}}))),opacity:{value:S(e.opacity),type:"number"}}:null})(e))):[I];return[...e,{name:`${s?i.gradient[0]:i.color[0]}/${n.name}`,category:s?"gradient":"color",exportKey:s?u:p,description:r,values:c,extensions:{[t.key.extensionPluginData]:Object.assign({[t.key.extensionFigmaStyleId]:n.id,exportKey:s?u:p},T(o))}}]}),[]),N=(e,i)=>e.filter((e=>e.layoutGrids.length>0)).map((e=>({name:`${i[0]}/${e.name}`,category:"grid",exportKey:g,description:e.description||null,values:e.layoutGrids.map((e=>"GRID"===e.pattern?(e=>({pattern:{value:e.pattern.toLowerCase(),type:"string"},sectionSize:{value:e.sectionSize,unit:"pixel",type:"number"}}))(e):(e=>{return Object.assign(Object.assign(Object.assign({pattern:{value:e.pattern.toLowerCase(),type:"string"}},void 0!==e.sectionSize&&{sectionSize:{value:e.sectionSize,unit:"pixel",type:"number"}}),{gutterSize:{value:e.gutterSize,unit:"pixel",type:"number"},alignment:{value:e.alignment.toLowerCase(),type:"string"},count:(t=e.count,t===1/0?{value:"auto",type:"string"}:{value:t,type:"number"})}),void 0!==e.offset&&{offset:{value:e.offset,unit:"pixel",type:"number"}});var t})(e))),extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:g}}}))),C={NONE:"none",UNDERLINE:"underline",STRIKETHROUGH:"line-through"},D={ORIGINAL:"none",UPPER:"uppercase",LOWER:"lowercase",TITLE:"capitalize",SMALL_CAPS:"small-caps"},P={100:100,thin:100,200:200,extralight:200,ultralight:200,extraleicht:200,300:300,light:300,leicht:300,400:400,normal:400,regular:400,buch:400,500:500,medium:500,kraeftig:500,kräftig:500,600:600,semibold:600,demibold:600,halbfett:600,700:700,bold:700,dreiviertelfett:700,800:800,extrabold:800,ultabold:800,fett:800,900:900,black:900,heavy:900,super:900,extrafett:900},w={normal:"normal",condensed:"condensed",expanded:"expanded",extended:"expanded"},_={normal:"normal",italic:"italic",kursiv:"italic",oblique:"oblique"},B=e=>{const t=e.toLowerCase().split(" ");let i=t[0];return["extra","ultra","semi","demi"].includes(t[0])&&["bold","light"].includes(t[1])&&(i=`${t[0]}${t[1]}`),P[i]||400},M=e=>{const t=e.toLowerCase().split(" ");return w[t[t.length-1]]||w[t[t.length-2]]||"normal"},j=e=>{const t=e.toLowerCase().split(" ").pop();return _[t]||"normal"},z=(e,i)=>e.map((e=>({name:`${i[0]}/${e.name}`,category:"font",exportKey:c,description:e.description||void 0,values:{fontSize:{value:e.fontSize,unit:"pixel",type:"number"},textDecoration:{value:C[e.textDecoration],type:"string"},fontFamily:{value:e.fontName.family,type:"string"},fontWeight:{value:B(e.fontName.style),type:"number"},fontStyle:{value:j(e.fontName.style),type:"string"},fontStretch:{value:M(e.fontName.style),type:"string"},_fontStyleOld:{value:e.fontName.style,type:"string"},letterSpacing:{value:S(e.letterSpacing.value),unit:"pixels"===e.letterSpacing.unit.toLowerCase()?"pixel":e.letterSpacing.unit.toLowerCase(),type:"number"},lineHeight:{value:S(e.lineHeight.value)||"normal",unit:"pixels"===e.lineHeight.unit.toLowerCase()?"pixel":e.lineHeight.unit.toLowerCase(),type:Object.prototype.hasOwnProperty.call(e.lineHeight,"value")?"number":"string"},paragraphIndent:{value:e.paragraphIndent,unit:"pixel",type:"number"},paragraphSpacing:{value:e.paragraphSpacing,unit:"pixel",type:"number"},textCase:{value:D[e.textCase]||"none",type:"string"}},extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:c}}}))),U={LAYER_BLUR:"layerBlur",BACKGROUND_BLUR:"backgroundBlur",DROP_SHADOW:"dropShadow",INNER_SHADOW:"innerShadow"},G=(e,i)=>e.filter((e=>e.effects.length>0)).map((e=>({name:`${i[0]}/${e.name}`,category:"effect",exportKey:d,description:e.description||null,values:e.effects.map((e=>"LAYER_BLUR"===e.type||"BACKGROUND_BLUR"===e.type?(e=>({effectType:{value:U[e.type],type:"string"},radius:{value:e.radius,unit:"pixel",type:"number"}}))(e):(e=>({effectType:{value:U[e.type],type:"string"},radius:{value:e.radius,unit:"pixel",type:"number"},color:{value:R(e.color),type:"color"},offset:{x:{value:e.offset.x,unit:"pixel",type:"number"},y:{value:e.offset.y,unit:"pixel",type:"number"}},spread:{value:e.spread,unit:"pixel",type:"number"}}))(e))),extensions:{[t.key.extensionPluginData]:{[t.key.extensionFigmaStyleId]:e.id,exportKey:d}}}))),K=e=>t=>{if(!Array.isArray(e))return;const i=t.name.substr(0,t.name.indexOf("/")).replace(/\s+/g,"");return 0!==i.length?e.includes(i):void 0},F=e=>{if(Object.prototype.hasOwnProperty.call(e,"direction"))return{direction:{value:e.direction.toLowerCase(),type:"string"}}},$={CUSTOM_CUBIC_BEZIER:{type:"custom-cubicBezier",curveType:"cubicBezier",easing:void 0},CUSTOM_SPRING:{type:"custom-spring",curveType:"spring",easing:void 0},LINEAR:{type:"linear",curveType:"cubicBezier",easing:{x1:0,y1:0,x2:1,y2:1}},EASE_IN:{type:"ease-in",curveType:"cubicBezier",easing:{x1:.41999998688697815,y1:0,x2:1,y2:1}},EASE_OUT:{type:"ease-out",curveType:"cubicBezier",easing:{x1:0,y1:0,x2:.5799999833106995,y2:1}},EASE_IN_AND_OUT:{type:"ease-in-out",curveType:"cubicBezier",easing:{x1:.41999998688697815,y1:0,x2:.5799999833106995,y2:1}},EASE_IN_BACK:{type:"ease-in-back",curveType:"cubicBezier",easing:{x1:.30000001192092896,y1:-.05000000074505806,x2:.699999988079071,y2:-.5}},EASE_OUT_BACK:{type:"ease-out-back",curveType:"cubicBezier",easing:{x1:.44999998807907104,y1:1.4500000476837158,x2:.800000011920929,y2:1}},EASE_IN_AND_OUT_BACK:{type:"ease-in-out-back",curveType:"cubicBezier",easing:{x1:.699999988079071,y1:-.4000000059604645,x2:.4000000059604645,y2:1.399999976158142}},BOUNCY:{type:"bouncy",curveType:"spring",easing:{mass:1,stiffness:600,damping:15}},GENTLE:{type:"gentle",curveType:"spring",easing:{mass:1,stiffness:100,damping:15}},QUICK:{type:"quick",curveType:"spring",easing:{mass:1,stiffness:300,damping:20}},SLOW:{type:"slow",curveType:"spring",easing:{mass:1,stiffness:80,damping:20}}},H=e=>{var t;if("type"in e&&void 0!==$[e.type])return"CUSTOM_CUBIC_BEZIER"===e.type&&($.CUSTOM_CUBIC_BEZIER.easing={x1:e.easingFunctionCubicBezier.x1,y1:e.easingFunctionCubicBezier.y1,x2:e.easingFunctionCubicBezier.x2,y2:e.easingFunctionCubicBezier.y2}),"CUSTOM_SPRING"===e.type&&($.CUSTOM_SPRING.easing={mass:e.easingFunctionSpring.mass,stiffness:e.easingFunctionSpring.stiffness,damping:e.easingFunctionSpring.damping}),{easingType:{value:$[e.type].type,type:"string"},easingCurveType:{value:$[e.type].curveType,type:"string"},easingFunction:(t=$[e.type],"spring"===t.curveType?{mass:{value:t.easing.mass,type:"number"},stiffness:{value:t.easing.stiffness,type:"number"},damping:{value:t.easing.damping,type:"number"}}:"cubicBezier"===t.curveType?{x1:{value:t.easing.x1,type:"number"},x2:{value:t.easing.x2,type:"number"},y1:{value:t.easing.y1,type:"number"},y2:{value:t.easing.y2,type:"number"}}:void 0)}},V=e=>{var t;const i=Object.keys($);return!!(e.reactions.length>0&&"NODE"===(null===(t=e.reactions[0].action)||void 0===t?void 0:t.type)&&null!==e.reactions[0].action.transition&&i.includes(e.reactions[0].action.transition.easing.type))},J=(e,i)=>e.filter(K(i)).filter(V).map((e=>({name:e.name,category:"motion",exportKey:b,description:e.description||null,values:Object.assign(Object.assign({transitionType:{value:e.reactions[0].action.transition.type.toLocaleLowerCase(),type:"string"},duration:{value:Math.round(1e3*(e.reactions[0].action.transition.duration+Number.EPSILON))/1e3,unit:"s",type:"number"}},H(e.reactions[0].action.transition.easing)),F(e.reactions[0].action.transition)),extensions:{[t.key.extensionPluginData]:{exportKey:b}}}))),W=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"spacing",exportKey:x,description:e.description||null,values:{top:{value:S(e.paddingTop,2),unit:"pixel",type:"number"},right:{value:S(e.paddingRight,2),unit:"pixel",type:"number"},bottom:{value:S(e.paddingBottom,2),unit:"pixel",type:"number"},left:{value:S(e.paddingLeft,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:x}}}))),q={MITER:"miter",BEVEL:"bevel",ROUND:"round"},Q={CENTER:"center",INSIDE:"inside",OUTSIDE:"outside"},Y=(e,i)=>e.filter(K(i)).filter((e=>e.strokes.length>0)).map((e=>({name:e.name,category:"border",exportKey:m,description:e.description||null,values:{strokeAlign:{value:Q[e.strokeAlign],type:"string"},dashPattern:{value:[...void 0!==e.dashPattern&&e.dashPattern.length>0?e.dashPattern:[0,0]],type:"string"},strokeCap:{value:"string"==typeof e.strokeCap?e.strokeCap.toLowerCase():"mixed",type:"string"},strokeJoin:{value:q[e.strokeJoin],type:"string"},strokeMiterLimit:{value:S(e.strokeMiterLimit),unit:"degree",type:"number"},strokeWeight:{value:e.strokeWeight,unit:"pixel",type:"number"},stroke:{value:e.strokes[0],type:"color"}},extensions:{[t.key.extensionPluginData]:{exportKey:m}}}))),Z=(e,i)=>{const n=e=>({topLeft:{value:e.topLeftRadius||0,unit:"pixel",type:"number"},topRight:{value:e.topRightRadius||0,unit:"pixel",type:"number"},bottomRight:{value:e.bottomRightRadius||0,unit:"pixel",type:"number"},bottomLeft:{value:e.bottomLeftRadius||0,unit:"pixel",type:"number"}});return e.filter(K(i)).map((e=>{return{name:e.name,category:"radius",exportKey:f,description:e.description||null,values:Object.assign(Object.assign({},"number"==typeof e.cornerRadius&&{radius:{value:e.cornerRadius,unit:"pixel",type:"number"}}),{radiusType:{value:(i=e.cornerRadius,"number"==typeof i?"single":"mixed"),type:"string"},radii:n(e),smoothing:{value:S(e.cornerSmoothing,2),comment:"Percent as decimal from 0.0 - 1.0",type:"number"}}),extensions:{[t.key.extensionPluginData]:{exportKey:f}}};var i}))},X=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"breakpoint",exportKey:y,description:e.description||null,values:{width:{value:S(e.width,2),unit:"pixel",type:"number"},height:{value:S(e.height,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:y}}}))),ee=(e,i)=>e.filter(K(i)).map((e=>({name:e.name,category:"opacity",exportKey:h,description:e.description||null,values:{opacity:{value:S(e.opacity,2),type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:h}}}))),te=(e,i)=>!(e=>[...t.exclusionPrefixDefault,...e])(i).includes(e.name.trim().substr(0,1)),ie=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,paints:e.paints})})),t},ne=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,layoutGrids:e.layoutGrids})})),t},ae=e=>{var t,i;return{name:e.name,description:e.description||void 0,bottomLeftRadius:e.bottomLeftRadius,bottomRightRadius:e.bottomRightRadius,topLeftRadius:e.topLeftRadius,topRightRadius:e.topRightRadius,cornerRadius:e.cornerRadius||void 0,cornerSmoothing:e.cornerSmoothing,strokes:(i=e.strokes,[...i].map((e=>E(e))).filter((e=>null!=e))),strokeWeight:e.strokeWeight,strokeStyleId:e.strokeStyleId,strokeMiterLimit:e.strokeMiterLimit,strokeJoin:e.strokeJoin,strokeCap:e.strokeCap,dashPattern:e.dashPattern,strokeAlign:e.strokeAlign,width:e.width,height:e.height,reactions:e.reactions||void 0,paddingTop:e.paddingTop||0,paddingRight:e.paddingRight||0,paddingBottom:e.paddingBottom||0,paddingLeft:e.paddingLeft||0,opacity:null!==(t=e.opacity)&&void 0!==t?t:1}},oe=["COMPONENT","COMPONENT_SET","RECTANGLE","FRAME"],re="_tokens",se=e=>[...e.map((e=>e.findChildren((e=>(e=>"FRAME"===e.type&&e.name.trim().toLowerCase().substr(0,re.length)===re)(e))))).reduce(((e,t)=>[...e,...t]))].map((e=>e.findAll((e=>(e=>"COMPONENT_SET"!==e.parent.type&&oe.includes(e.type)&&e.name.length>0)(e))))).reduce(((e,t)=>[...e,...t]),[]).map((e=>("RECTANGLE"!==e.type&&"FRAME"!==e.type||console.warn("Please use only main components and variants, other types may be deprecated as tokens in the future"),"COMPONENT_SET"===e.type?e.children.map((t=>{return Object.assign(Object.assign({},ae(t)),{name:(i=e.name,n=t.name,`${i}/${n=n.split(",").filter((e=>!["_","."].includes(e.trim().substr(0,1)))).map((e=>e.split("=")[1])).join("/")}`)});var i,n})):[ae(e)]))).reduce(((e,t)=>[...e,...t]),[]),le=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,fontSize:e.fontSize,textDecoration:e.textDecoration,fontName:e.fontName,letterSpacing:e.letterSpacing,lineHeight:e.lineHeight,paragraphIndent:e.paragraphIndent,paragraphSpacing:e.paragraphSpacing,textCase:e.textCase})})),t},pe=e=>{const t=[];return e.forEach((e=>{t.push({name:e.name,id:e.id,description:e.description,effects:e.effects})})),t},ue=(e,t="/",i=".")=>e.split(t).join(i).toLowerCase(),ce=e=>"boolean"==typeof e?"string":"number"==typeof e?"dimension":"object"==typeof e?"color":"string"==typeof e?"string":void 0,de=(e,t)=>{let i="color",n={};if("VARIABLE_ALIAS"===t.type){const i=figma.variables.getVariableById(t.id),n=figma.variables.getVariableCollectionById(i.variableCollectionId);return{name:e.name,description:e.description||void 0,exportKey:k,category:ce(Object.values(i.valuesByMode)[0]),values:`{${n.name.toLowerCase()}.${ue(i.name,"/",".")}}`,aliasName:n.name,aliasModes:n.modes}}switch(e.resolvedType){case"COLOR":i="color",n={fill:{value:R(t),type:"color",blendMode:"normal"}};break;case"FLOAT":i="dimension",n=S(t,2);break;case"STRING":i="string",n=t;break;case"BOOLEAN":i="boolean",n=t}return{name:e.name,description:e.description||void 0,exportKey:k,category:i,values:n}},ge=(e,i)=>{const n=e.variables.getLocalVariableCollections().filter((e=>![".","_",...i.exclusionPrefix.split(",")].includes(e.name.charAt(0)))).map((e=>e.id)),a=Object.fromEntries(e.variables.getLocalVariableCollections().map((e=>[e.id,e]))),o=e.variables.getLocalVariables().filter((e=>n.includes(e.variableCollectionId))).map((e=>{const{variableCollectionId:n}=e,{name:o,modes:r}=a[n];return Object.entries(e.valuesByMode).map((([n,a])=>Object.assign(Object.assign({},de(e,a)),{name:i.modeReference?`${o}/${r.find((({modeId:e})=>e===n)).name}/${e.name}`:`${o}/${e.name}`,extensions:{[t.key.extensionPluginData]:{mode:i.modeReference?r.find((({modeId:e})=>e===n)).name:void 0,collection:o,scopes:e.scopes,[t.key.extensionVariableStyleId]:e.id,exportKey:k}}})))}));return i.modeReference?(e=>e.reduce(((e,t)=>{if(!t.aliasModes)return e.push(t),e;const{aliasModes:i,aliasName:n}=t;delete t.aliasModes,delete t.selfCollectionName;for(let a=0;ae.split(",").map((e=>e.replace(/\s+/g,""))),ye=(e,i)=>{const n=((e,t)=>{const i=se([...e.root.children]),n=t.exclusionPrefix.split(",").map((e=>e.replace(/\s+/g,"")));return{tokenFrames:i,paintStyles:ie(e.getLocalPaintStyles()).filter((e=>te(e,n))),gridStyles:ne(e.getLocalGridStyles()).filter((e=>te(e,n))),textStyles:le(e.getLocalTextStyles()).filter((e=>te(e,n))),effectStyles:pe(e.getLocalEffectStyles()).filter((e=>te(e,n)))}})(e,i);return[...(a=n.tokenFrames,o=me(i.prefix.size),a.filter(K(o)).map((e=>({name:e.name,category:"size",exportKey:v,description:e.description||null,values:{width:{value:S(e.width,2),unit:"pixel",type:"number"},height:{value:S(e.height,2),unit:"pixel",type:"number"}},extensions:{[t.key.extensionPluginData]:{exportKey:v}}})))),...X(n.tokenFrames,me(i.prefix.breakpoint)),...W(n.tokenFrames,me(i.prefix.spacing)),...Y(n.tokenFrames,me(i.prefix.border)),...Z(n.tokenFrames,me(i.prefix.radius)),...J(n.tokenFrames,me(i.prefix.motion)),...ee(n.tokenFrames,me(i.prefix.opacity)),...L(n.paintStyles,{color:me(i.prefix.color),gradient:me(i.prefix.gradient),alias:me(i.alias)}),...N(n.gridStyles,me(i.prefix.grid)),...z(n.textStyles,me(i.prefix.font)),...G(n.effectStyles,me(i.prefix.effect)),...ge(e,i)];var a,o};var fe=function(e,t,i,n){return new(i||(i=Promise))((function(a,o){function r(e){try{l(n.next(e))}catch(e){o(e)}}function s(e){try{l(n.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,s)}l((n=n.apply(e,t||[])).next())}))};figma.showUI(__html__,{themeColors:!0,visible:!1}),[o.export,o.urlExport,o.generalSettings].includes(figma.command)&&fe(void 0,void 0,void 0,(function*(){const o=(()=>{let i=figma.root.getPluginData(t.key.settings);if(""===i)return e;i=JSON.parse(i);const a=n(e,i);return a.prefix=n(e.prefix,a.prefix),a.exports=n(e.exports,a.exports),a})(),r=yield s(figma);var p;figma.ui.resize(t.ui[figma.command].width,t.ui[figma.command].height),void 0!==r&&"patch"!==r&&figma.ui.resize(t.ui[figma.command].width,t.ui[figma.command].height+60),figma.ui.postMessage({command:figma.command,payload:{settings:Object.assign(Object.assign({},o),{accessToken:yield(p=l(figma),a(void 0,void 0,void 0,(function*(){const e=yield figma.clientStorage.getAsync("accessTokens");return void 0!==e&&e instanceof Object&&e[p]||""})))}),data:i(ye(figma,o)),versionDifference:r,metadata:{filename:figma.root.name}}}||{}),figma.ui.show()})),figma.command===o.help&&figma.ui.postMessage({command:o.help,payload:{url:"https://github.com/lukasoppermann/design-tokens"}}),figma.command===o.demo&&figma.ui.postMessage({command:o.demo,payload:{url:"https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=231%3A2"}}),figma.command===o.reset&&(figma.root.setPluginData(t.key.settings,i(e)),figma.notify("⚙️ Settings have been reset."),figma.closePlugin()),figma.ui.onmessage=n=>fe(void 0,void 0,void 0,(function*(){const{command:r,payload:s}=n;var p,u,c;r===o.closePlugin&&(void 0!==(null==s?void 0:s.notification)&&""!==(null==s?void 0:s.notification)&&figma.notify(s.notification),figma.ui.hide(),figma.closePlugin()),r===o.saveSettings&&(c=s.settings,c=Object.assign(Object.assign({},e),c),figma.root.setPluginData(t.key.settings,i(c)),yield(p=l(figma),u=s.accessToken,a(void 0,void 0,void 0,(function*(){const e=(yield figma.clientStorage.getAsync("accessTokens"))||{},t=Object.assign(Object.assign({},e),{[p]:u});return yield figma.clientStorage.setAsync("accessTokens",t)}))),s.closePlugin&&!0===s.closePlugin&&figma.closePlugin())}))})(); \ No newline at end of file diff --git a/dist/ui.html b/dist/ui.html index 0d8f9009..5cabd7b9 100644 --- a/dist/ui.html +++ b/dist/ui.html @@ -605,7 +605,7 @@ padding: 0 var(--size-xxxsmall) 0 var(--size-xxsmall); color: var(--figma-color-text-secondary); margin-top: 0; -`,kn=e=>["color","gradient","grid","effect","font"].includes(e),En=()=>{const[n,t]=(0,e.useState)(!1),{figmaUIApi:r,figmaMetaData:a}=(0,e.useContext)(rn),{settings:l,updateSettings:o}=(0,e.useContext)(an);return e.createElement("form",{className:yn,onSubmit:e=>{if(e.preventDefault(),!0===e.target.checkValidity()){const{accessToken:e}=l,n=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);ao((n=>{n.keyInName=e}))}),e.createElement(gn,{width:240,label:'The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".'})),e.createElement(Je,{size:"small",weight:"bold"},"Filename",e.createElement(gn,{width:160,label:"The file name used when exporting the tokens"})),e.createElement("div",{className:"grid-2-col"},e.createElement(qe,{type:"text",required:!0,pattern:"^[\\w\\d\\s\\[\\]._\\-]+$",placeholder:a.filename,value:l.filename,onChange:e=>o((n=>{n.filename=e}))}),e.createElement(Ge,{defaultValue:l.extension,onChange:({value:e})=>o((n=>{n.extension=e})),placeholder:"file extension",options:sn.fileExtensions})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Name conversion"),e.createElement(Ge,{defaultValue:l.nameConversion,onChange:({value:e})=>o((n=>{n.nameConversion=e})),placeholder:"Name conversion",options:[{label:"Default",value:"default"},{label:"camelCase",value:"camelCase"},{label:"kebab-case",value:"kebabCase"}]})),e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Token format",e.createElement(gn,{width:240,label:"The structure of the output json file. Learn more in the docs."})),e.createElement(Ge,{defaultValue:l.tokenFormat,onChange:({value:e})=>{o((n=>{n.tokenFormat=e})),t("standard"===e)},placeholder:"Token format",options:[{label:"Standard (W3C draft)",value:"standard"},{label:"Original (deprecated)",value:"original"}]}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Exclusion prefix"," ",e.createElement(gn,{width:240,label:'Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)'})),e.createElement(qe,{type:"text",pattern:"^[#\\+*\\\\/&%$!?;:~,\\s]+$",placeholder:"#, @",value:l.exclusionPrefix,onChange:e=>o((n=>{n.exclusionPrefix=e}))})),n&&e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Alias identifier"," ",e.createElement(gn,{width:180,label:"Use to define an alias for a token; case insensitive"})),e.createElement(qe,{type:"text",pattern:"^[A-Za-z,\\s]+$",placeholder:"alias, ref, reference",value:l.alias,onChange:e=>o((n=>{n.alias=e}))}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Reference mode in variables",e.createElement(gn,{width:240,label:"If disabled, the exported json will not include the mode of variables."})),e.createElement(Be,{label:"Enable/disable mode referencing",type:"switch",checked:l.modeReference,onChange:e=>o((n=>{n.modeReference=e}))}))),e.createElement(mn,null),e.createElement(Je,{size:"small",weight:"bold"},"Token prefixes"," ",e.createElement(gn,{width:150,label:"Use commas to separate multiple prefixed"})),e.createElement(nn,{className:wn,size:"small"},'Prefixes are the first part of a tokens name e.g. "radius" in "radius/small". They are used to identify the type of a custom token.'),e.createElement(fn,null,e.createElement(Be,{label:"Include token prefix in token names",type:"switch",checked:l.prefixInName,onChange:e=>o((n=>{n.prefixInName=e}))}),e.createElement(gn,{width:240,label:'When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").'})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},Object.entries(l.prefix).map((([n,t])=>e.createElement(fn,{fill:!0,key:n},e.createElement(Ze,{className:`${xn} flex-grow--none`},n,kn(n)?e.createElement(gn,{width:90,label:"Prefix for style"}):""),e.createElement(qe,{type:"text",pattern:kn(n)?"^[\\w\\-@]+$":"^[\\w\\-@,\\s]+$",required:!0,placeholder:n,value:t,onChange:e=>o((t=>{t.prefix[n]=e}))}))))),e.createElement(cn,null,e.createElement(bn,{align:"start",href:"https://github.com/lukasoppermann/design-tokens#design-tokens"},"Documentation"),e.createElement(on,null),e.createElement(He,{type:"submit",autofocus:!0},"Save changes")))};function zn(e){for(var n=arguments.length,t=Array(n>1?n-1:0),r=1;r3?n.i-4:n.i:Array.isArray(e)?1:An(e)?2:Ln(e)?3:0}function Pn(e,n){return 2===Mn(e)?e.has(n):Object.prototype.hasOwnProperty.call(e,n)}function On(e,n,t){var r=Mn(e);2===r?e.set(n,t):3===r?(e.delete(n),e.add(t)):e[n]=t}function An(e){return lt&&e instanceof Map}function Ln(e){return ot&&e instanceof Set}function Nn(e){return e.o||e.t}function Rn(e){if(Array.isArray(e))return Array.prototype.slice.call(e);var n=pt(e);delete n[ct];for(var t=ft(n),r=0;r1&&(e.set=e.add=e.clear=e.delete=Fn),Object.freeze(e),n&&_n(e,(function(e,n){return Tn(n,!0)}),!0)),e}function Fn(){zn(2)}function Dn(e){return null==e||"object"!=typeof e||Object.isFrozen(e)}function In(e){var n=gt[e];return n||zn(18,e),n}function Un(){return rt}function jn(e,n){n&&(In("Patches"),e.u=[],e.s=[],e.v=n)}function $n(e){Hn(e),e.p.forEach(Bn),e.p=null}function Hn(e){e===rt&&(rt=e.l)}function Vn(e){return rt={p:[],l:rt,h:e,m:!0,_:0}}function Bn(e){var n=e[ct];0===n.i||1===n.i?n.j():n.O=!0}function Wn(e,n){n._=n.p.length;var t=n.p[0],r=void 0!==e&&e!==t;return n.h.g||In("ES5").S(n,e,r),r?(t[ct].P&&($n(n),zn(4)),Sn(e)&&(e=qn(n,e),n.l||Kn(n,e)),n.u&&In("Patches").M(t[ct].t,e,n.u,n.s)):e=qn(n,t,[]),$n(n),n.u&&n.v(n.u,n.s),e!==st?e:void 0}function qn(e,n,t){if(Dn(n))return n;var r=n[ct];if(!r)return _n(n,(function(a,l){return Qn(e,r,n,a,l,t)}),!0),n;if(r.A!==e)return n;if(!r.P)return Kn(e,r.t,!0),r.t;if(!r.I){r.I=!0,r.A._--;var a=4===r.i||5===r.i?r.o=Rn(r.k):r.o;_n(3===r.i?new Set(a):a,(function(n,l){return Qn(e,r,a,n,l,t)})),Kn(e,a,!1),t&&e.u&&In("Patches").R(r,t,e.u,e.s)}return r.o}function Qn(e,n,t,r,a,l){if(Cn(a)){var o=qn(e,a,l&&n&&3!==n.i&&!Pn(n.D,r)?l.concat(r):void 0);if(On(t,r,o),!Cn(o))return;e.m=!1}if(Sn(a)&&!Dn(a)){if(!e.h.F&&e._<1)return;qn(e,a),n&&n.A.l||Kn(e,a)}}function Kn(e,n,t){void 0===t&&(t=!1),e.h.F&&e.m&&Tn(n,t)}function Gn(e,n){var t=e[ct];return(t?Nn(t):e)[n]}function Yn(e,n){if(n in e)for(var t=Object.getPrototypeOf(e);t;){var r=Object.getOwnPropertyDescriptor(t,n);if(r)return r;t=Object.getPrototypeOf(t)}}function Zn(e){e.P||(e.P=!0,e.l&&Zn(e.l))}function Xn(e){e.o||(e.o=Rn(e.t))}function Jn(e,n,t){var r=An(n)?In("MapSet").N(n,t):Ln(n)?In("MapSet").T(n,t):e.g?function(e,n){var t=Array.isArray(e),r={i:t?1:0,A:n?n.A:Un(),P:!1,I:!1,D:{},l:n,t:e,k:null,o:null,j:null,C:!1},a=r,l=ht;t&&(a=[r],l=mt);var o=Proxy.revocable(a,l),i=o.revoke,s=o.proxy;return r.k=s,r.j=i,s}(n,t):In("ES5").J(n,t);return(t?t.A:Un()).p.push(r),r}function et(e){return Cn(e)||zn(22,e),function e(n){if(!Sn(n))return n;var t,r=n[ct],a=Mn(n);if(r){if(!r.P&&(r.i<4||!In("ES5").K(r)))return r.t;r.I=!0,t=nt(n,a),r.I=!1}else t=nt(n,a);return _n(t,(function(n,a){r&&function(e,n){return 2===Mn(e)?e.get(n):e[n]}(r.t,n)===a||On(t,n,e(a))})),3===a?new Set(t):t}(e)}function nt(e,n){switch(n){case 2:return new Map(e);case 3:return Array.from(e)}return Rn(e)}var tt,rt,at="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),lt="undefined"!=typeof Map,ot="undefined"!=typeof Set,it="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,st=at?Symbol.for("immer-nothing"):((tt={})["immer-nothing"]=!0,tt),ut=at?Symbol.for("immer-draftable"):"__$immer_draftable",ct=at?Symbol.for("immer-state"):"__$immer_state",dt=("undefined"!=typeof Symbol&&Symbol.iterator,""+Object.prototype.constructor),ft="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:Object.getOwnPropertyNames,pt=Object.getOwnPropertyDescriptors||function(e){var n={};return ft(e).forEach((function(t){n[t]=Object.getOwnPropertyDescriptor(e,t)})),n},gt={},ht={get:function(e,n){if(n===ct)return e;var t=Nn(e);if(!Pn(t,n))return function(e,n,t){var r,a=Yn(n,t);return a?"value"in a?a.value:null===(r=a.get)||void 0===r?void 0:r.call(e.k):void 0}(e,t,n);var r=t[n];return e.I||!Sn(r)?r:r===Gn(e.t,n)?(Xn(e),e.o[n]=Jn(e.A.h,r,e)):r},has:function(e,n){return n in Nn(e)},ownKeys:function(e){return Reflect.ownKeys(Nn(e))},set:function(e,n,t){var r=Yn(Nn(e),n);if(null==r?void 0:r.set)return r.set.call(e.k,t),!0;if(!e.P){var a=Gn(Nn(e),n),l=null==a?void 0:a[ct];if(l&&l.t===t)return e.o[n]=t,e.D[n]=!1,!0;if(function(e,n){return e===n?0!==e||1/e==1/n:e!=e&&n!=n}(t,a)&&(void 0!==t||Pn(e.t,n)))return!0;Xn(e),Zn(e)}return e.o[n]===t&&"number"!=typeof t&&(void 0!==t||n in e.o)||(e.o[n]=t,e.D[n]=!0,!0)},deleteProperty:function(e,n){return void 0!==Gn(e.t,n)||n in e.t?(e.D[n]=!1,Xn(e),Zn(e)):delete e.D[n],e.o&&delete e.o[n],!0},getOwnPropertyDescriptor:function(e,n){var t=Nn(e),r=Reflect.getOwnPropertyDescriptor(t,n);return r?{writable:!0,configurable:1!==e.i||"length"!==n,enumerable:r.enumerable,value:t[n]}:r},defineProperty:function(){zn(11)},getPrototypeOf:function(e){return Object.getPrototypeOf(e.t)},setPrototypeOf:function(){zn(12)}},mt={};_n(ht,(function(e,n){mt[e]=function(){return arguments[0]=arguments[0][0],n.apply(this,arguments)}})),mt.deleteProperty=function(e,n){return mt.set.call(this,e,n,void 0)},mt.set=function(e,n,t){return ht.set.call(this,e[0],n,t,e[0])};var vt=function(){function e(e){var n=this;this.g=it,this.F=!0,this.produce=function(e,t,r){if("function"==typeof e&&"function"!=typeof t){var a=t;t=e;var l=n;return function(e){var n=this;void 0===e&&(e=a);for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i1?r-1:0),l=1;l=0;t--){var r=n[t];if(0===r.path.length&&"replace"===r.op){e=r.value;break}}t>-1&&(n=n.slice(t+1));var a=In("Patches").$;return Cn(e)?a(e,n):this.produce(e,(function(e){return a(e,n)}))},e}(),bt=new vt,yt=bt.produce;bt.produceWithPatches.bind(bt),bt.setAutoFreeze.bind(bt),bt.setUseProxies.bind(bt),bt.applyPatches.bind(bt),bt.createDraft.bind(bt),bt.finishDraft.bind(bt);const xt=yt,wt=je` +`,kn=e=>["color","gradient","grid","effect","font"].includes(e),En=()=>{const[n,t]=(0,e.useState)(!1),{figmaUIApi:r,figmaMetaData:a}=(0,e.useContext)(rn),{settings:l,updateSettings:o}=(0,e.useContext)(an);return e.createElement("form",{className:yn,onSubmit:e=>{if(e.preventDefault(),!0===e.target.checkValidity()){const{accessToken:e}=l,n=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);ao((n=>{n.keyInName=e}))}),e.createElement(gn,{width:240,label:'The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".'})),e.createElement(Je,{size:"small",weight:"bold"},"Filename",e.createElement(gn,{width:160,label:"The file name used when exporting the tokens"})),e.createElement("div",{className:"grid-2-col"},e.createElement(qe,{type:"text",required:!0,pattern:"^[\\w\\d\\s\\[\\]._\\-]+$",placeholder:a.filename,value:l.filename,onChange:e=>o((n=>{n.filename=e}))}),e.createElement(Ge,{defaultValue:l.extension,onChange:({value:e})=>o((n=>{n.extension=e})),placeholder:"file extension",options:sn.fileExtensions})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Name conversion"),e.createElement(Ge,{defaultValue:l.nameConversion,onChange:({value:e})=>o((n=>{n.nameConversion=e})),placeholder:"Name conversion",options:[{label:"Default",value:"default"},{label:"camelCase",value:"camelCase"},{label:"kebab-case",value:"kebabCase"}]})),e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Token format",e.createElement(gn,{width:240,label:"The structure of the output json file. Learn more in the docs."})),e.createElement(Ge,{defaultValue:l.tokenFormat,onChange:({value:e})=>{o((n=>{n.tokenFormat=e})),t("standard"===e)},placeholder:"Token format",options:[{label:"Standard (W3C draft)",value:"standard"},{label:"Original (deprecated)",value:"original"}]}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Exclusion prefix"," ",e.createElement(gn,{width:240,label:'Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)'})),e.createElement(qe,{type:"text",pattern:"^[#\\+*\\\\/&%$!?;:~,\\s]+$",placeholder:"exclusion prefix",value:l.exclusionPrefix,onChange:e=>o((n=>{n.exclusionPrefix=e}))})),n&&e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Alias identifier"," ",e.createElement(gn,{width:180,label:"Use to define an alias for a token; case insensitive"})),e.createElement(qe,{type:"text",pattern:"^[A-Za-z,\\s]+$",placeholder:"alias, ref, reference",value:l.alias,onChange:e=>o((n=>{n.alias=e}))}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Reference mode in variables",e.createElement(gn,{width:240,label:"If disabled, the exported json will not include the mode of variables."})),e.createElement(Be,{label:"Enable/disable mode referencing",type:"switch",checked:l.modeReference,onChange:e=>o((n=>{n.modeReference=e}))}))),e.createElement(mn,null),e.createElement(Je,{size:"small",weight:"bold"},"Token prefixes"," ",e.createElement(gn,{width:150,label:"Use commas to separate multiple prefixed"})),e.createElement(nn,{className:wn,size:"small"},'Prefixes are the first part of a tokens name e.g. "radius" in "radius/small". They are used to identify the type of a custom token.'),e.createElement(fn,null,e.createElement(Be,{label:"Include token prefix in token names",type:"switch",checked:l.prefixInName,onChange:e=>o((n=>{n.prefixInName=e}))}),e.createElement(gn,{width:240,label:'When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").'})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},Object.entries(l.prefix).map((([n,t])=>e.createElement(fn,{fill:!0,key:n},e.createElement(Ze,{className:`${xn} flex-grow--none`},n,kn(n)?e.createElement(gn,{width:90,label:"Prefix for style"}):""),e.createElement(qe,{type:"text",pattern:kn(n)?"^[\\w\\-@]+$":"^[\\w\\-@,\\s]+$",required:!0,placeholder:n,value:t,onChange:e=>o((t=>{t.prefix[n]=e}))}))))),e.createElement(cn,null,e.createElement(bn,{align:"start",href:"https://github.com/lukasoppermann/design-tokens#design-tokens"},"Documentation"),e.createElement(on,null),e.createElement(He,{type:"submit",autofocus:!0},"Save changes")))};function zn(e){for(var n=arguments.length,t=Array(n>1?n-1:0),r=1;r3?n.i-4:n.i:Array.isArray(e)?1:An(e)?2:Ln(e)?3:0}function Pn(e,n){return 2===Mn(e)?e.has(n):Object.prototype.hasOwnProperty.call(e,n)}function On(e,n,t){var r=Mn(e);2===r?e.set(n,t):3===r?(e.delete(n),e.add(t)):e[n]=t}function An(e){return lt&&e instanceof Map}function Ln(e){return ot&&e instanceof Set}function Nn(e){return e.o||e.t}function Rn(e){if(Array.isArray(e))return Array.prototype.slice.call(e);var n=pt(e);delete n[ct];for(var t=ft(n),r=0;r1&&(e.set=e.add=e.clear=e.delete=Fn),Object.freeze(e),n&&_n(e,(function(e,n){return Tn(n,!0)}),!0)),e}function Fn(){zn(2)}function Dn(e){return null==e||"object"!=typeof e||Object.isFrozen(e)}function In(e){var n=gt[e];return n||zn(18,e),n}function Un(){return rt}function jn(e,n){n&&(In("Patches"),e.u=[],e.s=[],e.v=n)}function $n(e){Hn(e),e.p.forEach(Bn),e.p=null}function Hn(e){e===rt&&(rt=e.l)}function Vn(e){return rt={p:[],l:rt,h:e,m:!0,_:0}}function Bn(e){var n=e[ct];0===n.i||1===n.i?n.j():n.O=!0}function Wn(e,n){n._=n.p.length;var t=n.p[0],r=void 0!==e&&e!==t;return n.h.g||In("ES5").S(n,e,r),r?(t[ct].P&&($n(n),zn(4)),Sn(e)&&(e=qn(n,e),n.l||Kn(n,e)),n.u&&In("Patches").M(t[ct].t,e,n.u,n.s)):e=qn(n,t,[]),$n(n),n.u&&n.v(n.u,n.s),e!==st?e:void 0}function qn(e,n,t){if(Dn(n))return n;var r=n[ct];if(!r)return _n(n,(function(a,l){return Qn(e,r,n,a,l,t)}),!0),n;if(r.A!==e)return n;if(!r.P)return Kn(e,r.t,!0),r.t;if(!r.I){r.I=!0,r.A._--;var a=4===r.i||5===r.i?r.o=Rn(r.k):r.o;_n(3===r.i?new Set(a):a,(function(n,l){return Qn(e,r,a,n,l,t)})),Kn(e,a,!1),t&&e.u&&In("Patches").R(r,t,e.u,e.s)}return r.o}function Qn(e,n,t,r,a,l){if(Cn(a)){var o=qn(e,a,l&&n&&3!==n.i&&!Pn(n.D,r)?l.concat(r):void 0);if(On(t,r,o),!Cn(o))return;e.m=!1}if(Sn(a)&&!Dn(a)){if(!e.h.F&&e._<1)return;qn(e,a),n&&n.A.l||Kn(e,a)}}function Kn(e,n,t){void 0===t&&(t=!1),e.h.F&&e.m&&Tn(n,t)}function Gn(e,n){var t=e[ct];return(t?Nn(t):e)[n]}function Yn(e,n){if(n in e)for(var t=Object.getPrototypeOf(e);t;){var r=Object.getOwnPropertyDescriptor(t,n);if(r)return r;t=Object.getPrototypeOf(t)}}function Zn(e){e.P||(e.P=!0,e.l&&Zn(e.l))}function Xn(e){e.o||(e.o=Rn(e.t))}function Jn(e,n,t){var r=An(n)?In("MapSet").N(n,t):Ln(n)?In("MapSet").T(n,t):e.g?function(e,n){var t=Array.isArray(e),r={i:t?1:0,A:n?n.A:Un(),P:!1,I:!1,D:{},l:n,t:e,k:null,o:null,j:null,C:!1},a=r,l=ht;t&&(a=[r],l=mt);var o=Proxy.revocable(a,l),i=o.revoke,s=o.proxy;return r.k=s,r.j=i,s}(n,t):In("ES5").J(n,t);return(t?t.A:Un()).p.push(r),r}function et(e){return Cn(e)||zn(22,e),function e(n){if(!Sn(n))return n;var t,r=n[ct],a=Mn(n);if(r){if(!r.P&&(r.i<4||!In("ES5").K(r)))return r.t;r.I=!0,t=nt(n,a),r.I=!1}else t=nt(n,a);return _n(t,(function(n,a){r&&function(e,n){return 2===Mn(e)?e.get(n):e[n]}(r.t,n)===a||On(t,n,e(a))})),3===a?new Set(t):t}(e)}function nt(e,n){switch(n){case 2:return new Map(e);case 3:return Array.from(e)}return Rn(e)}var tt,rt,at="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),lt="undefined"!=typeof Map,ot="undefined"!=typeof Set,it="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,st=at?Symbol.for("immer-nothing"):((tt={})["immer-nothing"]=!0,tt),ut=at?Symbol.for("immer-draftable"):"__$immer_draftable",ct=at?Symbol.for("immer-state"):"__$immer_state",dt=("undefined"!=typeof Symbol&&Symbol.iterator,""+Object.prototype.constructor),ft="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:Object.getOwnPropertyNames,pt=Object.getOwnPropertyDescriptors||function(e){var n={};return ft(e).forEach((function(t){n[t]=Object.getOwnPropertyDescriptor(e,t)})),n},gt={},ht={get:function(e,n){if(n===ct)return e;var t=Nn(e);if(!Pn(t,n))return function(e,n,t){var r,a=Yn(n,t);return a?"value"in a?a.value:null===(r=a.get)||void 0===r?void 0:r.call(e.k):void 0}(e,t,n);var r=t[n];return e.I||!Sn(r)?r:r===Gn(e.t,n)?(Xn(e),e.o[n]=Jn(e.A.h,r,e)):r},has:function(e,n){return n in Nn(e)},ownKeys:function(e){return Reflect.ownKeys(Nn(e))},set:function(e,n,t){var r=Yn(Nn(e),n);if(null==r?void 0:r.set)return r.set.call(e.k,t),!0;if(!e.P){var a=Gn(Nn(e),n),l=null==a?void 0:a[ct];if(l&&l.t===t)return e.o[n]=t,e.D[n]=!1,!0;if(function(e,n){return e===n?0!==e||1/e==1/n:e!=e&&n!=n}(t,a)&&(void 0!==t||Pn(e.t,n)))return!0;Xn(e),Zn(e)}return e.o[n]===t&&"number"!=typeof t&&(void 0!==t||n in e.o)||(e.o[n]=t,e.D[n]=!0,!0)},deleteProperty:function(e,n){return void 0!==Gn(e.t,n)||n in e.t?(e.D[n]=!1,Xn(e),Zn(e)):delete e.D[n],e.o&&delete e.o[n],!0},getOwnPropertyDescriptor:function(e,n){var t=Nn(e),r=Reflect.getOwnPropertyDescriptor(t,n);return r?{writable:!0,configurable:1!==e.i||"length"!==n,enumerable:r.enumerable,value:t[n]}:r},defineProperty:function(){zn(11)},getPrototypeOf:function(e){return Object.getPrototypeOf(e.t)},setPrototypeOf:function(){zn(12)}},mt={};_n(ht,(function(e,n){mt[e]=function(){return arguments[0]=arguments[0][0],n.apply(this,arguments)}})),mt.deleteProperty=function(e,n){return mt.set.call(this,e,n,void 0)},mt.set=function(e,n,t){return ht.set.call(this,e[0],n,t,e[0])};var vt=function(){function e(e){var n=this;this.g=it,this.F=!0,this.produce=function(e,t,r){if("function"==typeof e&&"function"!=typeof t){var a=t;t=e;var l=n;return function(e){var n=this;void 0===e&&(e=a);for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i1?r-1:0),l=1;l=0;t--){var r=n[t];if(0===r.path.length&&"replace"===r.op){e=r.value;break}}t>-1&&(n=n.slice(t+1));var a=In("Patches").$;return Cn(e)?a(e,n):this.produce(e,(function(e){return a(e,n)}))},e}(),bt=new vt,yt=bt.produce;bt.produceWithPatches.bind(bt),bt.setAutoFreeze.bind(bt),bt.setUseProxies.bind(bt),bt.applyPatches.bind(bt),bt.createDraft.bind(bt),bt.finishDraft.bind(bt);const xt=yt,wt=je` font-family: var(--font-stack); font-size: var(--font-size-xsmall); font-weight: var(--font-weight-normal); diff --git a/dist/ui.js b/dist/ui.js index 36b3f77d..854d03bc 100644 --- a/dist/ui.js +++ b/dist/ui.js @@ -605,7 +605,7 @@ select.select-menu { padding: 0 var(--size-xxxsmall) 0 var(--size-xxsmall); color: var(--figma-color-text-secondary); margin-top: 0; -`,kn=e=>["color","gradient","grid","effect","font"].includes(e),En=()=>{const[n,t]=(0,e.useState)(!1),{figmaUIApi:r,figmaMetaData:a}=(0,e.useContext)(rn),{settings:l,updateSettings:o}=(0,e.useContext)(an);return e.createElement("form",{className:yn,onSubmit:e=>{if(e.preventDefault(),!0===e.target.checkValidity()){const{accessToken:e}=l,n=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);ao((n=>{n.keyInName=e}))}),e.createElement(gn,{width:240,label:'The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".'})),e.createElement(Je,{size:"small",weight:"bold"},"Filename",e.createElement(gn,{width:160,label:"The file name used when exporting the tokens"})),e.createElement("div",{className:"grid-2-col"},e.createElement(qe,{type:"text",required:!0,pattern:"^[\\w\\d\\s\\[\\]._\\-]+$",placeholder:a.filename,value:l.filename,onChange:e=>o((n=>{n.filename=e}))}),e.createElement(Ge,{defaultValue:l.extension,onChange:({value:e})=>o((n=>{n.extension=e})),placeholder:"file extension",options:sn.fileExtensions})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Name conversion"),e.createElement(Ge,{defaultValue:l.nameConversion,onChange:({value:e})=>o((n=>{n.nameConversion=e})),placeholder:"Name conversion",options:[{label:"Default",value:"default"},{label:"camelCase",value:"camelCase"},{label:"kebab-case",value:"kebabCase"}]})),e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Token format",e.createElement(gn,{width:240,label:"The structure of the output json file. Learn more in the docs."})),e.createElement(Ge,{defaultValue:l.tokenFormat,onChange:({value:e})=>{o((n=>{n.tokenFormat=e})),t("standard"===e)},placeholder:"Token format",options:[{label:"Standard (W3C draft)",value:"standard"},{label:"Original (deprecated)",value:"original"}]}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Exclusion prefix"," ",e.createElement(gn,{width:240,label:'Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)'})),e.createElement(qe,{type:"text",pattern:"^[#\\+*\\\\/&%$!?;:~,\\s]+$",placeholder:"#, @",value:l.exclusionPrefix,onChange:e=>o((n=>{n.exclusionPrefix=e}))})),n&&e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Alias identifier"," ",e.createElement(gn,{width:180,label:"Use to define an alias for a token; case insensitive"})),e.createElement(qe,{type:"text",pattern:"^[A-Za-z,\\s]+$",placeholder:"alias, ref, reference",value:l.alias,onChange:e=>o((n=>{n.alias=e}))}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Reference mode in variables",e.createElement(gn,{width:240,label:"If disabled, the exported json will not include the mode of variables."})),e.createElement(Be,{label:"Enable/disable mode referencing",type:"switch",checked:l.modeReference,onChange:e=>o((n=>{n.modeReference=e}))}))),e.createElement(mn,null),e.createElement(Je,{size:"small",weight:"bold"},"Token prefixes"," ",e.createElement(gn,{width:150,label:"Use commas to separate multiple prefixed"})),e.createElement(nn,{className:wn,size:"small"},'Prefixes are the first part of a tokens name e.g. "radius" in "radius/small". They are used to identify the type of a custom token.'),e.createElement(fn,null,e.createElement(Be,{label:"Include token prefix in token names",type:"switch",checked:l.prefixInName,onChange:e=>o((n=>{n.prefixInName=e}))}),e.createElement(gn,{width:240,label:'When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").'})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},Object.entries(l.prefix).map((([n,t])=>e.createElement(fn,{fill:!0,key:n},e.createElement(Ze,{className:`${xn} flex-grow--none`},n,kn(n)?e.createElement(gn,{width:90,label:"Prefix for style"}):""),e.createElement(qe,{type:"text",pattern:kn(n)?"^[\\w\\-@]+$":"^[\\w\\-@,\\s]+$",required:!0,placeholder:n,value:t,onChange:e=>o((t=>{t.prefix[n]=e}))}))))),e.createElement(cn,null,e.createElement(bn,{align:"start",href:"https://github.com/lukasoppermann/design-tokens#design-tokens"},"Documentation"),e.createElement(on,null),e.createElement(He,{type:"submit",autofocus:!0},"Save changes")))};function zn(e){for(var n=arguments.length,t=Array(n>1?n-1:0),r=1;r3?n.i-4:n.i:Array.isArray(e)?1:An(e)?2:Ln(e)?3:0}function Pn(e,n){return 2===Mn(e)?e.has(n):Object.prototype.hasOwnProperty.call(e,n)}function On(e,n,t){var r=Mn(e);2===r?e.set(n,t):3===r?(e.delete(n),e.add(t)):e[n]=t}function An(e){return lt&&e instanceof Map}function Ln(e){return ot&&e instanceof Set}function Nn(e){return e.o||e.t}function Rn(e){if(Array.isArray(e))return Array.prototype.slice.call(e);var n=pt(e);delete n[ct];for(var t=ft(n),r=0;r1&&(e.set=e.add=e.clear=e.delete=Fn),Object.freeze(e),n&&_n(e,(function(e,n){return Tn(n,!0)}),!0)),e}function Fn(){zn(2)}function Dn(e){return null==e||"object"!=typeof e||Object.isFrozen(e)}function In(e){var n=gt[e];return n||zn(18,e),n}function Un(){return rt}function jn(e,n){n&&(In("Patches"),e.u=[],e.s=[],e.v=n)}function $n(e){Hn(e),e.p.forEach(Bn),e.p=null}function Hn(e){e===rt&&(rt=e.l)}function Vn(e){return rt={p:[],l:rt,h:e,m:!0,_:0}}function Bn(e){var n=e[ct];0===n.i||1===n.i?n.j():n.O=!0}function Wn(e,n){n._=n.p.length;var t=n.p[0],r=void 0!==e&&e!==t;return n.h.g||In("ES5").S(n,e,r),r?(t[ct].P&&($n(n),zn(4)),Sn(e)&&(e=qn(n,e),n.l||Kn(n,e)),n.u&&In("Patches").M(t[ct].t,e,n.u,n.s)):e=qn(n,t,[]),$n(n),n.u&&n.v(n.u,n.s),e!==st?e:void 0}function qn(e,n,t){if(Dn(n))return n;var r=n[ct];if(!r)return _n(n,(function(a,l){return Qn(e,r,n,a,l,t)}),!0),n;if(r.A!==e)return n;if(!r.P)return Kn(e,r.t,!0),r.t;if(!r.I){r.I=!0,r.A._--;var a=4===r.i||5===r.i?r.o=Rn(r.k):r.o;_n(3===r.i?new Set(a):a,(function(n,l){return Qn(e,r,a,n,l,t)})),Kn(e,a,!1),t&&e.u&&In("Patches").R(r,t,e.u,e.s)}return r.o}function Qn(e,n,t,r,a,l){if(Cn(a)){var o=qn(e,a,l&&n&&3!==n.i&&!Pn(n.D,r)?l.concat(r):void 0);if(On(t,r,o),!Cn(o))return;e.m=!1}if(Sn(a)&&!Dn(a)){if(!e.h.F&&e._<1)return;qn(e,a),n&&n.A.l||Kn(e,a)}}function Kn(e,n,t){void 0===t&&(t=!1),e.h.F&&e.m&&Tn(n,t)}function Gn(e,n){var t=e[ct];return(t?Nn(t):e)[n]}function Yn(e,n){if(n in e)for(var t=Object.getPrototypeOf(e);t;){var r=Object.getOwnPropertyDescriptor(t,n);if(r)return r;t=Object.getPrototypeOf(t)}}function Zn(e){e.P||(e.P=!0,e.l&&Zn(e.l))}function Xn(e){e.o||(e.o=Rn(e.t))}function Jn(e,n,t){var r=An(n)?In("MapSet").N(n,t):Ln(n)?In("MapSet").T(n,t):e.g?function(e,n){var t=Array.isArray(e),r={i:t?1:0,A:n?n.A:Un(),P:!1,I:!1,D:{},l:n,t:e,k:null,o:null,j:null,C:!1},a=r,l=ht;t&&(a=[r],l=mt);var o=Proxy.revocable(a,l),i=o.revoke,s=o.proxy;return r.k=s,r.j=i,s}(n,t):In("ES5").J(n,t);return(t?t.A:Un()).p.push(r),r}function et(e){return Cn(e)||zn(22,e),function e(n){if(!Sn(n))return n;var t,r=n[ct],a=Mn(n);if(r){if(!r.P&&(r.i<4||!In("ES5").K(r)))return r.t;r.I=!0,t=nt(n,a),r.I=!1}else t=nt(n,a);return _n(t,(function(n,a){r&&function(e,n){return 2===Mn(e)?e.get(n):e[n]}(r.t,n)===a||On(t,n,e(a))})),3===a?new Set(t):t}(e)}function nt(e,n){switch(n){case 2:return new Map(e);case 3:return Array.from(e)}return Rn(e)}var tt,rt,at="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),lt="undefined"!=typeof Map,ot="undefined"!=typeof Set,it="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,st=at?Symbol.for("immer-nothing"):((tt={})["immer-nothing"]=!0,tt),ut=at?Symbol.for("immer-draftable"):"__$immer_draftable",ct=at?Symbol.for("immer-state"):"__$immer_state",dt=("undefined"!=typeof Symbol&&Symbol.iterator,""+Object.prototype.constructor),ft="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:Object.getOwnPropertyNames,pt=Object.getOwnPropertyDescriptors||function(e){var n={};return ft(e).forEach((function(t){n[t]=Object.getOwnPropertyDescriptor(e,t)})),n},gt={},ht={get:function(e,n){if(n===ct)return e;var t=Nn(e);if(!Pn(t,n))return function(e,n,t){var r,a=Yn(n,t);return a?"value"in a?a.value:null===(r=a.get)||void 0===r?void 0:r.call(e.k):void 0}(e,t,n);var r=t[n];return e.I||!Sn(r)?r:r===Gn(e.t,n)?(Xn(e),e.o[n]=Jn(e.A.h,r,e)):r},has:function(e,n){return n in Nn(e)},ownKeys:function(e){return Reflect.ownKeys(Nn(e))},set:function(e,n,t){var r=Yn(Nn(e),n);if(null==r?void 0:r.set)return r.set.call(e.k,t),!0;if(!e.P){var a=Gn(Nn(e),n),l=null==a?void 0:a[ct];if(l&&l.t===t)return e.o[n]=t,e.D[n]=!1,!0;if(function(e,n){return e===n?0!==e||1/e==1/n:e!=e&&n!=n}(t,a)&&(void 0!==t||Pn(e.t,n)))return!0;Xn(e),Zn(e)}return e.o[n]===t&&"number"!=typeof t&&(void 0!==t||n in e.o)||(e.o[n]=t,e.D[n]=!0,!0)},deleteProperty:function(e,n){return void 0!==Gn(e.t,n)||n in e.t?(e.D[n]=!1,Xn(e),Zn(e)):delete e.D[n],e.o&&delete e.o[n],!0},getOwnPropertyDescriptor:function(e,n){var t=Nn(e),r=Reflect.getOwnPropertyDescriptor(t,n);return r?{writable:!0,configurable:1!==e.i||"length"!==n,enumerable:r.enumerable,value:t[n]}:r},defineProperty:function(){zn(11)},getPrototypeOf:function(e){return Object.getPrototypeOf(e.t)},setPrototypeOf:function(){zn(12)}},mt={};_n(ht,(function(e,n){mt[e]=function(){return arguments[0]=arguments[0][0],n.apply(this,arguments)}})),mt.deleteProperty=function(e,n){return mt.set.call(this,e,n,void 0)},mt.set=function(e,n,t){return ht.set.call(this,e[0],n,t,e[0])};var vt=function(){function e(e){var n=this;this.g=it,this.F=!0,this.produce=function(e,t,r){if("function"==typeof e&&"function"!=typeof t){var a=t;t=e;var l=n;return function(e){var n=this;void 0===e&&(e=a);for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i1?r-1:0),l=1;l=0;t--){var r=n[t];if(0===r.path.length&&"replace"===r.op){e=r.value;break}}t>-1&&(n=n.slice(t+1));var a=In("Patches").$;return Cn(e)?a(e,n):this.produce(e,(function(e){return a(e,n)}))},e}(),bt=new vt,yt=bt.produce;bt.produceWithPatches.bind(bt),bt.setAutoFreeze.bind(bt),bt.setUseProxies.bind(bt),bt.applyPatches.bind(bt),bt.createDraft.bind(bt),bt.finishDraft.bind(bt);const xt=yt,wt=je` +`,kn=e=>["color","gradient","grid","effect","font"].includes(e),En=()=>{const[n,t]=(0,e.useState)(!1),{figmaUIApi:r,figmaMetaData:a}=(0,e.useContext)(rn),{settings:l,updateSettings:o}=(0,e.useContext)(an);return e.createElement("form",{className:yn,onSubmit:e=>{if(e.preventDefault(),!0===e.target.checkValidity()){const{accessToken:e}=l,n=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);ao((n=>{n.keyInName=e}))}),e.createElement(gn,{width:240,label:'The token type (e.g. "color" or "font") will be added to the name e.g. "color/light/bg".'})),e.createElement(Je,{size:"small",weight:"bold"},"Filename",e.createElement(gn,{width:160,label:"The file name used when exporting the tokens"})),e.createElement("div",{className:"grid-2-col"},e.createElement(qe,{type:"text",required:!0,pattern:"^[\\w\\d\\s\\[\\]._\\-]+$",placeholder:a.filename,value:l.filename,onChange:e=>o((n=>{n.filename=e}))}),e.createElement(Ge,{defaultValue:l.extension,onChange:({value:e})=>o((n=>{n.extension=e})),placeholder:"file extension",options:sn.fileExtensions})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Name conversion"),e.createElement(Ge,{defaultValue:l.nameConversion,onChange:({value:e})=>o((n=>{n.nameConversion=e})),placeholder:"Name conversion",options:[{label:"Default",value:"default"},{label:"camelCase",value:"camelCase"},{label:"kebab-case",value:"kebabCase"}]})),e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Token format",e.createElement(gn,{width:240,label:"The structure of the output json file. Learn more in the docs."})),e.createElement(Ge,{defaultValue:l.tokenFormat,onChange:({value:e})=>{o((n=>{n.tokenFormat=e})),t("standard"===e)},placeholder:"Token format",options:[{label:"Standard (W3C draft)",value:"standard"},{label:"Original (deprecated)",value:"original"}]}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Exclusion prefix"," ",e.createElement(gn,{width:240,label:'Styles & tokens with this prefix will be ignored when exporting. ("." and "_" work by default)'})),e.createElement(qe,{type:"text",pattern:"^[#\\+*\\\\/&%$!?;:~,\\s]+$",placeholder:"exclusion prefix",value:l.exclusionPrefix,onChange:e=>o((n=>{n.exclusionPrefix=e}))})),n&&e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Alias identifier"," ",e.createElement(gn,{width:180,label:"Use to define an alias for a token; case insensitive"})),e.createElement(qe,{type:"text",pattern:"^[A-Za-z,\\s]+$",placeholder:"alias, ref, reference",value:l.alias,onChange:e=>o((n=>{n.alias=e}))}))),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},e.createElement("div",null,e.createElement(Je,{size:"small",weight:"bold"},"Reference mode in variables",e.createElement(gn,{width:240,label:"If disabled, the exported json will not include the mode of variables."})),e.createElement(Be,{label:"Enable/disable mode referencing",type:"switch",checked:l.modeReference,onChange:e=>o((n=>{n.modeReference=e}))}))),e.createElement(mn,null),e.createElement(Je,{size:"small",weight:"bold"},"Token prefixes"," ",e.createElement(gn,{width:150,label:"Use commas to separate multiple prefixed"})),e.createElement(nn,{className:wn,size:"small"},'Prefixes are the first part of a tokens name e.g. "radius" in "radius/small". They are used to identify the type of a custom token.'),e.createElement(fn,null,e.createElement(Be,{label:"Include token prefix in token names",type:"switch",checked:l.prefixInName,onChange:e=>o((n=>{n.prefixInName=e}))}),e.createElement(gn,{width:240,label:'When disabled the prefix is removed ("radius/small" → "small"), when enabled it is added ("radius/small" → "radius/small").'})),e.createElement(mn,null),e.createElement("div",{className:"grid-2-col"},Object.entries(l.prefix).map((([n,t])=>e.createElement(fn,{fill:!0,key:n},e.createElement(Ze,{className:`${xn} flex-grow--none`},n,kn(n)?e.createElement(gn,{width:90,label:"Prefix for style"}):""),e.createElement(qe,{type:"text",pattern:kn(n)?"^[\\w\\-@]+$":"^[\\w\\-@,\\s]+$",required:!0,placeholder:n,value:t,onChange:e=>o((t=>{t.prefix[n]=e}))}))))),e.createElement(cn,null,e.createElement(bn,{align:"start",href:"https://github.com/lukasoppermann/design-tokens#design-tokens"},"Documentation"),e.createElement(on,null),e.createElement(He,{type:"submit",autofocus:!0},"Save changes")))};function zn(e){for(var n=arguments.length,t=Array(n>1?n-1:0),r=1;r3?n.i-4:n.i:Array.isArray(e)?1:An(e)?2:Ln(e)?3:0}function Pn(e,n){return 2===Mn(e)?e.has(n):Object.prototype.hasOwnProperty.call(e,n)}function On(e,n,t){var r=Mn(e);2===r?e.set(n,t):3===r?(e.delete(n),e.add(t)):e[n]=t}function An(e){return lt&&e instanceof Map}function Ln(e){return ot&&e instanceof Set}function Nn(e){return e.o||e.t}function Rn(e){if(Array.isArray(e))return Array.prototype.slice.call(e);var n=pt(e);delete n[ct];for(var t=ft(n),r=0;r1&&(e.set=e.add=e.clear=e.delete=Fn),Object.freeze(e),n&&_n(e,(function(e,n){return Tn(n,!0)}),!0)),e}function Fn(){zn(2)}function Dn(e){return null==e||"object"!=typeof e||Object.isFrozen(e)}function In(e){var n=gt[e];return n||zn(18,e),n}function Un(){return rt}function jn(e,n){n&&(In("Patches"),e.u=[],e.s=[],e.v=n)}function $n(e){Hn(e),e.p.forEach(Bn),e.p=null}function Hn(e){e===rt&&(rt=e.l)}function Vn(e){return rt={p:[],l:rt,h:e,m:!0,_:0}}function Bn(e){var n=e[ct];0===n.i||1===n.i?n.j():n.O=!0}function Wn(e,n){n._=n.p.length;var t=n.p[0],r=void 0!==e&&e!==t;return n.h.g||In("ES5").S(n,e,r),r?(t[ct].P&&($n(n),zn(4)),Sn(e)&&(e=qn(n,e),n.l||Kn(n,e)),n.u&&In("Patches").M(t[ct].t,e,n.u,n.s)):e=qn(n,t,[]),$n(n),n.u&&n.v(n.u,n.s),e!==st?e:void 0}function qn(e,n,t){if(Dn(n))return n;var r=n[ct];if(!r)return _n(n,(function(a,l){return Qn(e,r,n,a,l,t)}),!0),n;if(r.A!==e)return n;if(!r.P)return Kn(e,r.t,!0),r.t;if(!r.I){r.I=!0,r.A._--;var a=4===r.i||5===r.i?r.o=Rn(r.k):r.o;_n(3===r.i?new Set(a):a,(function(n,l){return Qn(e,r,a,n,l,t)})),Kn(e,a,!1),t&&e.u&&In("Patches").R(r,t,e.u,e.s)}return r.o}function Qn(e,n,t,r,a,l){if(Cn(a)){var o=qn(e,a,l&&n&&3!==n.i&&!Pn(n.D,r)?l.concat(r):void 0);if(On(t,r,o),!Cn(o))return;e.m=!1}if(Sn(a)&&!Dn(a)){if(!e.h.F&&e._<1)return;qn(e,a),n&&n.A.l||Kn(e,a)}}function Kn(e,n,t){void 0===t&&(t=!1),e.h.F&&e.m&&Tn(n,t)}function Gn(e,n){var t=e[ct];return(t?Nn(t):e)[n]}function Yn(e,n){if(n in e)for(var t=Object.getPrototypeOf(e);t;){var r=Object.getOwnPropertyDescriptor(t,n);if(r)return r;t=Object.getPrototypeOf(t)}}function Zn(e){e.P||(e.P=!0,e.l&&Zn(e.l))}function Xn(e){e.o||(e.o=Rn(e.t))}function Jn(e,n,t){var r=An(n)?In("MapSet").N(n,t):Ln(n)?In("MapSet").T(n,t):e.g?function(e,n){var t=Array.isArray(e),r={i:t?1:0,A:n?n.A:Un(),P:!1,I:!1,D:{},l:n,t:e,k:null,o:null,j:null,C:!1},a=r,l=ht;t&&(a=[r],l=mt);var o=Proxy.revocable(a,l),i=o.revoke,s=o.proxy;return r.k=s,r.j=i,s}(n,t):In("ES5").J(n,t);return(t?t.A:Un()).p.push(r),r}function et(e){return Cn(e)||zn(22,e),function e(n){if(!Sn(n))return n;var t,r=n[ct],a=Mn(n);if(r){if(!r.P&&(r.i<4||!In("ES5").K(r)))return r.t;r.I=!0,t=nt(n,a),r.I=!1}else t=nt(n,a);return _n(t,(function(n,a){r&&function(e,n){return 2===Mn(e)?e.get(n):e[n]}(r.t,n)===a||On(t,n,e(a))})),3===a?new Set(t):t}(e)}function nt(e,n){switch(n){case 2:return new Map(e);case 3:return Array.from(e)}return Rn(e)}var tt,rt,at="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),lt="undefined"!=typeof Map,ot="undefined"!=typeof Set,it="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,st=at?Symbol.for("immer-nothing"):((tt={})["immer-nothing"]=!0,tt),ut=at?Symbol.for("immer-draftable"):"__$immer_draftable",ct=at?Symbol.for("immer-state"):"__$immer_state",dt=("undefined"!=typeof Symbol&&Symbol.iterator,""+Object.prototype.constructor),ft="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:Object.getOwnPropertyNames,pt=Object.getOwnPropertyDescriptors||function(e){var n={};return ft(e).forEach((function(t){n[t]=Object.getOwnPropertyDescriptor(e,t)})),n},gt={},ht={get:function(e,n){if(n===ct)return e;var t=Nn(e);if(!Pn(t,n))return function(e,n,t){var r,a=Yn(n,t);return a?"value"in a?a.value:null===(r=a.get)||void 0===r?void 0:r.call(e.k):void 0}(e,t,n);var r=t[n];return e.I||!Sn(r)?r:r===Gn(e.t,n)?(Xn(e),e.o[n]=Jn(e.A.h,r,e)):r},has:function(e,n){return n in Nn(e)},ownKeys:function(e){return Reflect.ownKeys(Nn(e))},set:function(e,n,t){var r=Yn(Nn(e),n);if(null==r?void 0:r.set)return r.set.call(e.k,t),!0;if(!e.P){var a=Gn(Nn(e),n),l=null==a?void 0:a[ct];if(l&&l.t===t)return e.o[n]=t,e.D[n]=!1,!0;if(function(e,n){return e===n?0!==e||1/e==1/n:e!=e&&n!=n}(t,a)&&(void 0!==t||Pn(e.t,n)))return!0;Xn(e),Zn(e)}return e.o[n]===t&&"number"!=typeof t&&(void 0!==t||n in e.o)||(e.o[n]=t,e.D[n]=!0,!0)},deleteProperty:function(e,n){return void 0!==Gn(e.t,n)||n in e.t?(e.D[n]=!1,Xn(e),Zn(e)):delete e.D[n],e.o&&delete e.o[n],!0},getOwnPropertyDescriptor:function(e,n){var t=Nn(e),r=Reflect.getOwnPropertyDescriptor(t,n);return r?{writable:!0,configurable:1!==e.i||"length"!==n,enumerable:r.enumerable,value:t[n]}:r},defineProperty:function(){zn(11)},getPrototypeOf:function(e){return Object.getPrototypeOf(e.t)},setPrototypeOf:function(){zn(12)}},mt={};_n(ht,(function(e,n){mt[e]=function(){return arguments[0]=arguments[0][0],n.apply(this,arguments)}})),mt.deleteProperty=function(e,n){return mt.set.call(this,e,n,void 0)},mt.set=function(e,n,t){return ht.set.call(this,e[0],n,t,e[0])};var vt=function(){function e(e){var n=this;this.g=it,this.F=!0,this.produce=function(e,t,r){if("function"==typeof e&&"function"!=typeof t){var a=t;t=e;var l=n;return function(e){var n=this;void 0===e&&(e=a);for(var r=arguments.length,o=Array(r>1?r-1:0),i=1;i1?r-1:0),l=1;l=0;t--){var r=n[t];if(0===r.path.length&&"replace"===r.op){e=r.value;break}}t>-1&&(n=n.slice(t+1));var a=In("Patches").$;return Cn(e)?a(e,n):this.produce(e,(function(e){return a(e,n)}))},e}(),bt=new vt,yt=bt.produce;bt.produceWithPatches.bind(bt),bt.setAutoFreeze.bind(bt),bt.setUseProxies.bind(bt),bt.applyPatches.bind(bt),bt.createDraft.bind(bt),bt.finishDraft.bind(bt);const xt=yt,wt=je` font-family: var(--font-stack); font-size: var(--font-size-xsmall); font-weight: var(--font-weight-normal); diff --git a/src/ui/components/GeneralSettings.tsx b/src/ui/components/GeneralSettings.tsx index 550b97c9..6a622e79 100644 --- a/src/ui/components/GeneralSettings.tsx +++ b/src/ui/components/GeneralSettings.tsx @@ -193,7 +193,7 @@ export const GeneralSettings = () => { updateSettings((draft: Settings) => { @@ -232,7 +232,7 @@ export const GeneralSettings = () => { Reference mode in variables { ...extractGrids(figmaData.gridStyles, getPrefixArray(settings.prefix.grid)), ...extractFonts(figmaData.textStyles, getPrefixArray(settings.prefix.font)), ...extractEffects(figmaData.effectStyles, getPrefixArray(settings.prefix.effect)), - ...getVariables(figma, settings.modeReference) + ...getVariables(figma, settings) ] } diff --git a/src/utilities/getVariables.ts b/src/utilities/getVariables.ts index 35944fce..f6cfa9ae 100644 --- a/src/utilities/getVariables.ts +++ b/src/utilities/getVariables.ts @@ -7,6 +7,7 @@ import { roundRgba } from './convertColor' import { changeNotation } from './changeNotation' import { getVariableTypeByValue } from './getVariableTypeByValue' import roundWithDecimals from './roundWithDecimals' +import { Settings } from '@typings/settings' const extractVariable = (variable, value) => { let category: tokenCategoryType = 'color' @@ -92,11 +93,13 @@ const processAliasModes = (variables) => { }, []) } -export const getVariables = (figma: PluginAPI, modeReference: boolean) => { +export const getVariables = (figma: PluginAPI, settings: Settings) => { + const excludedCollectionIds = figma.variables.getLocalVariableCollections().filter(collection => !['.', '_', ...settings.exclusionPrefix.split(',')].includes(collection.name.charAt(0))).map(collection => collection.id); // get collections const collections = Object.fromEntries(figma.variables.getLocalVariableCollections().map((collection) => [collection.id, collection])) + // get variables - const variables = figma.variables.getLocalVariables().map((variable) => { + const variables = figma.variables.getLocalVariables().filter(variable => excludedCollectionIds.includes(variable.variableCollectionId)).map((variable) => { // get collection name and modes const { variableCollectionId } = variable const { name: collection, modes } = collections[variableCollectionId] @@ -105,11 +108,11 @@ export const getVariables = (figma: PluginAPI, modeReference: boolean) => { return { ...extractVariable(variable, value), // name is contstructed from collection, mode and variable name - name: modeReference ? `${collection}/${modes.find(({ modeId }) => modeId === id).name}/${variable.name}` : `${collection}/${variable.name}`, + name: settings.modeReference ? `${collection}/${modes.find(({ modeId }) => modeId === id).name}/${variable.name}` : `${collection}/${variable.name}`, // add mnetadata to extensions extensions: { [config.key.extensionPluginData]: { - mode: modeReference ? modes.find(({ modeId }) => modeId === id).name : undefined, + mode: settings.modeReference ? modes.find(({ modeId }) => modeId === id).name : undefined, collection: collection, scopes: variable.scopes, [config.key.extensionVariableStyleId]: variable.id, @@ -120,8 +123,5 @@ export const getVariables = (figma: PluginAPI, modeReference: boolean) => { }) }) - return modeReference ? processAliasModes(variables.flat()) : variables.flat(); -} - - - + return settings.modeReference ? processAliasModes(variables.flat()) : variables.flat(); +} \ No newline at end of file