@rogieking/figui3 6.4.6 → 6.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cursor/skills/a11y/SKILL.md +96 -0
- package/.cursor/skills/css-render-performance/SKILL.md +46 -0
- package/.cursor/skills/frontend-performance-testing/SKILL.md +46 -0
- package/.cursor/skills/js-runtime-performance/SKILL.md +45 -0
- package/.cursor/skills/web-component-performance/SKILL.md +47 -0
- package/README.md +126 -17
- package/components.css +238 -318
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +62 -60
- package/dist/fig-lab.css +1 -1
- package/dist/fig-layer.css +1 -0
- package/dist/fig-layer.js +1 -0
- package/dist/fig.css +1 -1
- package/dist/fig.js +57 -55
- package/fig-editor.css +61 -0
- package/fig-editor.js +369 -61
- package/fig-lab.css +33 -5
- package/fig-layer.css +111 -0
- package/fig-layer.js +155 -0
- package/fig.js +2240 -919
- package/package.json +13 -4
package/dist/fig-editor.js
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer","increasing","decreasing"];function O(j){let Q={...j??{}},X=String(Q.interpolationSpace??"oklab").toLowerCase();if(!N.includes(X))X="oklab";if(X==="srgb"||X==="display-p3")X="oklab";Q.interpolationSpace=X;let Y=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=f.includes(Y)?Y:"shorter",Q}function V(j){let Q=O(j),X={...Q,interpolationSpace:Q.interpolationSpace};if(Q.interpolationSpace==="oklch")X.hueInterpolation=Q.hueInterpolation;else delete X.hueInterpolation;return X}function D(j){let Q=O(j);if(Q.interpolationSpace==="oklch")return`in oklch ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}class M extends HTMLElement{#E=null;#Z=null;#j=null;#b="solid";anchorElement=null;#U="solid";#L="srgb";#X={h:0,s:0,v:85,a:1};#H="hex";#Q={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"oklab",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#$={url:null,scaleMode:"fill",scale:50};#J={url:null,scaleMode:"fill",scale:50};#K={stream:null,snapshot:null};#R={};#S={};#q=null;#B=null;#M=null;#k=null;#F=!1;#V=null;#T=null;#P=null;constructor(){super()}static get observedAttributes(){return["value","disabled","alpha","mode","experimental"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#o(),this.#h(),this.#W()})}disconnectedCallback(){if(this.#V)this.#V(),this.#V=null;if(this.#T)this.#T.disconnect(),this.#T=null;if(this.#P)this.#P.disconnect(),this.#P=null;if(this.#K.stream)this.#K.stream.getTracks().forEach((j)=>j.stop()),this.#K.stream=null;if(this.#K.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#K.snapshot),this.#K.snapshot=null;if(this.#J.url&&this.#J.url.startsWith("blob:"))URL.revokeObjectURL(this.#J.url);if(this.#Z)this.#Z.removeAttribute("selected");if(this.#j)this.#j.close(),this.#j.remove(),this.#j=null}#o(){let j=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!j)this.#Z=document.createElement("fig-chit"),this.#Z.setAttribute("background","#D9D9D9"),this.appendChild(this.#Z),this.#E=this.#Z;else if(j.tagName==="FIG-CHIT")this.#Z=j,this.#E=j;else this.#E=j,this.#Z=null;if(this.#E.addEventListener("click",(Q)=>{if(this.hasAttribute("disabled"))return;Q.stopPropagation(),Q.preventDefault(),this.#m()}),this.#Z)requestAnimationFrame(()=>{let Q=this.#Z.querySelector('input[type="color"]');if(Q)Q.style.pointerEvents="none"})}#h(){let j=this.getAttribute("value");if(!j)return;let Q=["solid","gradient","image","video","webcam"];try{let X=JSON.parse(j);if(X.type)this.#U=X.type;if(X.color){if(typeof X.color==="string")this.#X=this.#I(X.color);else if(typeof X.color==="object"&&X.color.h!==void 0)this.#X=X.color}if(X.opacity!==void 0)this.#X.a=X.opacity/100;if(X.colorSpace==="display-p3"||X.colorSpace==="srgb")this.#L=X.colorSpace;if(X.gradient)this.#Q=O({...this.#Q,...X.gradient});if(X.image)this.#$={...this.#$,...X.image};if(X.video)this.#J={...this.#J,...X.video};if(X.type&&!Q.includes(X.type)){let{type:Y,...Z}=X;this.#S[X.type]=Z}}catch(X){if(j.startsWith("#"))this.#U="solid",this.#X=this.#I(j)}}#W(){if(!this.#Z)return;let j,Q="cover",X="center";switch(this.#U){case"solid":j=this.#O(this.#X);break;case"gradient":j=this.#l();break;case"image":if(this.#$.url){j=`url(${this.#$.url})`;let Z=this.#u(this.#$.scaleMode,this.#$.scale);Q=Z.size,X=Z.position}else j="";break;case"video":if(this.#J.url){j=`url(${this.#J.url})`;let Z=this.#u(this.#J.scaleMode,this.#J.scale);Q=Z.size,X=Z.position}else j="";break;default:j=this.#R[this.#U]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Z.setAttribute("background",j),this.#Z.style.setProperty("--chit-bg-size",Q),this.#Z.style.setProperty("--chit-bg-position",X),this.#U==="solid")this.#Z.setAttribute("alpha",this.#X.a);else this.#Z.removeAttribute("alpha")}#u(j,Q){switch(j){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#m(){if(!this.#j)this.#t();this.#x(this.#U);let j=this.#j.querySelector(".fig-fill-picker-gamut");if(j)j.value=this.#L;if(this.#Z)this.#Z.setAttribute("selected","true");this.#j.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#D(),this.#_()})})}open(){this.#m()}close(){if(this.#j)this.#j.open=!1}#t(){this.#R={},this.querySelectorAll('[slot^="mode-"]').forEach((_)=>{let R=_.getAttribute("slot").slice(5);this.#R[R]={element:_,label:_.getAttribute("label")||R.charAt(0).toUpperCase()+R.slice(1)}}),this.#j=document.createElement("dialog",{is:"fig-popup"}),this.#j.setAttribute("is","fig-popup"),this.#j.setAttribute("drag","true"),this.#j.setAttribute("handle","fig-header"),this.#j.setAttribute("autoresize","false"),this.#j.classList.add("fig-fill-picker-dialog"),this.#j.anchor=this.anchorElement||this.#E;let j=this.getAttribute("dialog-position")||"left";this.#j.setAttribute("position",j),this.#j.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],X={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Y=this.getAttribute("mode"),Z;if(Y){if(Z=Y.split(",").map((R)=>R.trim().toLowerCase()).filter((R)=>Q.includes(R)||this.#R[R]),Z.length===0)Z=[...Q]}else Z=[...Q];let $={...X};for(let[_,{label:R}]of Object.entries(this.#R))$[_]=R;if(!Z.includes(this.#U))this.#U=Z[0],this.#b=Z[0];let J=this.getAttribute("experimental"),U=J?`experimental="${J}"`:"",L;if(Z.length===1)L=`<h3 class="fig-fill-picker-type-label">${$[Z[0]]}</h3>`;else{let _=Z.map((R)=>`<option value="${R}">${$[R]}</option>`).join(`
|
|
2
|
-
`);
|
|
3
|
-
${
|
|
4
|
-
</fig-dropdown>`}let
|
|
5
|
-
`),
|
|
1
|
+
var e=(f,X)=>()=>(f&&(X=f(f=0)),X);var ff={};var p=e(()=>{/*! Vendored from @ungap/custom-elements-builtin@0.6.5 (ISC). */(function(f,X,J){if(f.importNode.length!=1||X.get("ungap-li"))return;var Q="extends";try{var Y={};Y[Q]="li";var Z=HTMLLIElement,$=function(){return Reflect.construct(Z,[],$)};if($.prototype=J.create(Z.prototype),X.define("ungap-li",$,Y),!/is="ungap-li"/.test(new $().outerHTML))throw Y}catch(K){(function(){var q="attributeChangedCallback",W="connectedCallback",U="disconnectedCallback",j=Element.prototype,O=J.assign,V=J.create,G=J.defineProperties,M=J.getOwnPropertyDescriptor,_=J.setPrototypeOf,k=X.define,d=X.get,l=X.upgrade,i=X.whenDefined,H=V(null),P=new WeakMap,v={childList:!0,subtree:!0};Reflect.ownKeys(self).filter(function(L){return typeof L=="string"&&/^HTML(?!Element)/.test(L)}).forEach(function(L){function R(){}var N=self[L];_(R,N),(R.prototype=N.prototype).constructor=R,N={},N[L]={value:R},G(self,N)}),new MutationObserver(h).observe(f,v),s(Document.prototype,"importNode"),s(Node.prototype,"cloneNode"),G(X,{define:{value:function(L,R,N){if(L=L.toLowerCase(),N&&Q in N){H[L]=O({},N,{Class:R});var z=N[Q]+'[is="'+L+'"]',F=f.querySelectorAll(z);for(var B=0,D=F.length;B<D;B++)E(F[B])}else k.apply(X,arguments)}},get:{value:function(L){return L in H?H[L].Class:d.call(X,L)}},upgrade:{value:function(L){var R=C(L);if(R&&!(L instanceof R.Class))c(L,R);else l.call(X,L)}},whenDefined:{value:function(L){return L in H?Promise.resolve():i.call(X,L)}}});var r=f.createElement;G(f,{createElement:{value:function(L,R){var N=r.call(f,L);if(R&&"is"in R)N.setAttribute("is",R.is),X.upgrade(N);return N}}});var n=M(j,"attachShadow").value,w=M(j,"innerHTML");G(j,{attachShadow:{value:function(){var L=n.apply(this,arguments);return new MutationObserver(h).observe(L,v),L}},innerHTML:{get:w.get,set:function(L){if(w.set.call(this,L),/\bis=("|')?[a-z0-9_-]+\1/i.test(L))T(this,E)}}});function h(L){for(var R=0,N=L.length;R<N;R++){var z=L[R],F=z.addedNodes,B=z.removedNodes;for(var D=0,A=F.length;D<A;D++)E(F[D]);for(var I=0,a=B.length;I<a;I++)b(B[I])}}function u(L){for(var R=0,N=L.length;R<N;R++){var z=L[R],F=z.attributeName,B=z.oldValue,D=z.target,A=D.getAttribute(F);if(q in D&&!(B==A&&A==null))D[q](F,B,D.getAttribute(F),null)}}function b(L){if(L.nodeType!==1)return;var R=C(L);if(R&&L instanceof R.Class&&U in L&&P.get(L)!==U)P.set(L,U),Promise.resolve(L).then(t);T(L,b)}function C(L){var R=L.getAttribute("is");if(R){if(R=R.toLowerCase(),R in H)return H[R]}return null}function o(L){L[W]()}function t(L){L[U]()}function c(L,R){var N=R.Class,z=N.observedAttributes||[];if(_(L,N.prototype),z.length){new MutationObserver(u).observe(L,{attributes:!0,attributeFilter:z,attributeOldValue:!0});var F=[];for(var B=0,D=z.length;B<D;B++)F.push({attributeName:z[B],oldValue:null,target:L});u(F)}}function E(L){if(L.nodeType!==1)return;var R=C(L);if(R){if(!(L instanceof R.Class))c(L,R);if(W in L&&L.isConnected&&P.get(L)!==W)P.set(L,W),Promise.resolve(L).then(o)}T(L,E)}function T(L,R){for(var N=L.content,z=(N&&N.nodeType==11?N:L).querySelectorAll("[is]"),F=0,B=z.length;F<B;F++)R(z[F])}function s(L,R){var N=L[R],z={};z[R]={value:function(){var F=N.apply(this,arguments);switch(F.nodeType){case 1:case 11:T(F,E)}return F}},G(L,z)}})()}})(document,customElements,Object)});function Xf(){if(typeof navigator>"u")return!1;let f=navigator.userAgent||"",X=/\b(iPad|iPhone|iPod)\b/.test(f)||/\bMacintosh\b/.test(f)&&/\bMobile\b/.test(f),J=/\bAppleWebKit\b/.test(f)&&!/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser)\b/.test(f);return X||J}function Jf(){if(typeof window>"u"||!window.customElements||typeof HTMLButtonElement>"u")return!1;let f=`fig-editor-builtin-probe-${Math.random().toString(36).slice(2)}`;class X extends HTMLButtonElement{}try{return customElements.define(f,X,{extends:"button"}),document.createElement("button",{is:f})instanceof X}catch(J){return!1}}var m=Xf()&&!Jf(),Qf=(m?Promise.resolve().then(() => (p(),ff)):Promise.resolve()).then(()=>{}).catch((f)=>{throw f});function Yf(f,X,J){let Q=()=>{if(!customElements.get(f))customElements.define(f,X,J)};if(!m){Q();return}Qf.then(Q).catch((Y)=>{console.error(`[figui3] Failed to load customized built-in polyfill for "${f}".`,Y)})}class g extends HTMLDialogElement{constructor(){super();this._figInit()}_figInit(){if(this._figInitialized)return;this._figInitialized=!0,this._defaultOffset=16,this._autoCloseTimer=null,this._boundHandleClose=this.handleClose.bind(this)}getOffset(){return parseInt(this.getAttribute("offset")??this._defaultOffset)}connectedCallback(){if(this._figInit(),!this.hasAttribute("theme"))this.setAttribute("theme","dark");this.syncLiveRegion();let f=this.getAttribute("open")==="true"||this.getAttribute("open")==="";if(this.hasAttribute("open")&&!f)this.removeAttribute("open");if(!f)this.close();requestAnimationFrame(()=>{if(this.addCloseListeners(),this.applyPosition(),f)this.showToast()})}disconnectedCallback(){this._figInit(),this.clearAutoClose()}addCloseListeners(){this.querySelectorAll("[close-toast]").forEach((f)=>{f.removeEventListener("click",this._boundHandleClose),f.addEventListener("click",this._boundHandleClose)})}handleClose(){this.hideToast()}applyPosition(){this.style.position="fixed",this.style.margin="0",this.style.top="auto",this.style.bottom=`${this.getOffset()}px`,this.style.left="50%",this.style.right="auto",this.style.transform="translateX(-50%)"}startAutoClose(){this.clearAutoClose();let f=parseInt(this.getAttribute("duration")??"5000");if(f>0)this._autoCloseTimer=setTimeout(()=>{this.hideToast()},f)}syncLiveRegion(){let f=this.getAttribute("live")==="assertive"||this.getAttribute("theme")==="danger";if(!this.hasAttribute("role"))this.setAttribute("role",f?"alert":"status");if(!this.hasAttribute("aria-live"))this.setAttribute("aria-live",f?"assertive":"polite");if(!this.hasAttribute("aria-atomic"))this.setAttribute("aria-atomic","true")}clearAutoClose(){if(this._autoCloseTimer)clearTimeout(this._autoCloseTimer),this._autoCloseTimer=null}_resolveAutoTheme(){if(this.getAttribute("theme")!=="auto")return;let X=(getComputedStyle(document.documentElement).colorScheme||"").includes("dark");this.style.colorScheme=X?"light":"dark"}showToast(){if(this._resolveAutoTheme(),!this.open)this.show();this.applyPosition(),this.startAutoClose(),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0}))}hideToast(){this.clearAutoClose(),this.close(),this.dispatchEvent(new CustomEvent("toast-hide",{bubbles:!0}))}static get observedAttributes(){return["duration","offset","open","theme","live"]}attributeChangedCallback(f,X,J){if(this._figInit(),!this.isConnected)return;if(f==="offset")this.applyPosition();if(f==="open")if(J!==null&&J!=="false")this.showToast();else this.hideToast();if(f==="theme")if(J==="auto")this._resolveAutoTheme();else this.style.removeProperty("color-scheme");if(f==="theme"||f==="live")this.syncLiveRegion()}}Yf("fig-toast",g,{extends:"dialog"});var Zf=["srgb","srgb-linear","display-p3","oklab","oklch"],$f=["shorter","longer","increasing","decreasing"];function y(f){let X={...f??{}},J=String(X.interpolationSpace??"srgb").toLowerCase();if(!Zf.includes(J))J="srgb";X.interpolationSpace=J;let Q=String(X.hueInterpolation??"shorter").toLowerCase();return X.hueInterpolation=$f.includes(Q)?Q:"shorter",X}function x(f){let X=y(f),J={...X,interpolationSpace:X.interpolationSpace};if(X.interpolationSpace==="oklch")J.hueInterpolation=X.hueInterpolation;else delete J.hueInterpolation;return J}function Lf(f){let X=y(f);if(X.interpolationSpace==="srgb")return"";if(X.interpolationSpace==="oklch")return`in oklch ${X.hueInterpolation} hue`;return`in ${X.interpolationSpace}`}class S extends HTMLElement{#Y=null;#Z=null;#f=null;#s="solid";anchorElement=null;#K="solid";#q="srgb";#J={h:0,s:0,v:85,a:1};#E="hex";#X={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#$={url:null,scaleMode:"fill",scale:50};#L={url:null,scaleMode:"fill",scale:50};#W={stream:null,snapshot:null};#R={};#S={};#U=null;#O=null;#F=null;#N=null;#z=!1;#B=null;#P=null;#T=null;#C=null;#I=null;constructor(){super();this.#C=this.#Xf.bind(this),this.#I=this.#Jf.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","experimental","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",requestAnimationFrame(()=>{this.#ff(),this.#m(),this.#j()})}disconnectedCallback(){if(this.#B)this.#B(),this.#B=null;if(this.#P)this.#P.disconnect(),this.#P=null;if(this.#T)this.#T.disconnect(),this.#T=null;if(this.#W.stream)this.#W.stream.getTracks().forEach((f)=>f.stop()),this.#W.stream=null;if(this.#W.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#W.snapshot),this.#W.snapshot=null;if(this.#L.url&&this.#L.url.startsWith("blob:"))URL.revokeObjectURL(this.#L.url);if(this.#Z)this.#Z.removeAttribute("selected");if(this.#Y)this.#Y.removeEventListener("click",this.#C),this.#Y.removeEventListener("keydown",this.#I);if(this.#f)this.#f.close(),this.#f.remove(),this.#f=null}#ff(){let f=Array.from(this.children).find((X)=>!X.getAttribute("slot")?.startsWith("mode-"));if(!f)this.#Z=document.createElement("fig-chit"),this.#Z.setAttribute("background","#D9D9D9"),this.appendChild(this.#Z),this.#Y=this.#Z;else if(f.tagName==="FIG-CHIT")this.#Z=f,this.#Y=f;else this.#Y=f,this.#Z=null;if(this.#x(),this.#Y.removeEventListener("click",this.#C),this.#Y.addEventListener("click",this.#C),this.#Y.removeEventListener("keydown",this.#I),this.#Y.addEventListener("keydown",this.#I),this.#Z)requestAnimationFrame(()=>{let X=this.#Z.querySelector('input[type="color"]');if(X)X.remove();this.#x()})}#p(){return this.getAttribute("aria-label")||"Fill picker"}#x(){if(!this.#Y)return;let f=this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false",X=this.getAttribute("aria-labelledby");if(!this.#Y.hasAttribute("role"))this.#Y.setAttribute("role","button");if(this.#Y.setAttribute("tabindex",f?"-1":"0"),this.#Y.setAttribute("aria-disabled",f?"true":"false"),X)this.#Y.setAttribute("aria-labelledby",X),this.#Y.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#Y.setAttribute("aria-label",`Open ${this.#p()}`),this.#Y.removeAttribute("aria-labelledby");else if(this.#Y.removeAttribute("aria-labelledby"),!this.#Y.hasAttribute("aria-label"))this.#Y.setAttribute("aria-label",`Open ${this.#p()}`);let J=this.getAttribute("aria-describedby");if(J)this.#Y.setAttribute("aria-describedby",J);else this.#Y.removeAttribute("aria-describedby")}#Xf(f){if(this.hasAttribute("disabled"))return;f.stopPropagation(),f.preventDefault(),this.#h()}#Jf(f){if(f.key!=="Enter"&&f.key!==" ")return;if(this.hasAttribute("disabled"))return;f.preventDefault(),f.stopPropagation(),this.#h()}#m(){let f=this.getAttribute("value");if(!f)return;let X=["solid","gradient","image","video","webcam"];try{let J=JSON.parse(f);if(J.type)this.#K=J.type;if(J.color){if(typeof J.color==="string")this.#J=this.#w(J.color);else if(typeof J.color==="object"&&J.color.h!==void 0)this.#J=J.color}if(J.opacity!==void 0)this.#J.a=J.opacity/100;if(J.colorSpace==="display-p3"||J.colorSpace==="srgb")this.#q=J.colorSpace;if(J.gradient)this.#X=y({...this.#X,...J.gradient});if(J.image)this.#$={...this.#$,...J.image};if(J.video)this.#L={...this.#L,...J.video};if(J.type&&!X.includes(J.type)){let{type:Q,...Y}=J;this.#S[J.type]=Y}}catch(J){if(f.startsWith("#"))this.#K="solid",this.#J=this.#w(f)}}#j(){if(!this.#Z)return;let f,X="cover",J="center";switch(this.#K){case"solid":f=this.#k(this.#J);break;case"gradient":f=this.#o();break;case"image":if(this.#$.url){f=`url(${this.#$.url})`;let Y=this.#g(this.#$.scaleMode,this.#$.scale);X=Y.size,J=Y.position}else f="";break;case"video":if(this.#L.url){f=`url(${this.#L.url})`;let Y=this.#g(this.#L.scaleMode,this.#L.scale);X=Y.size,J=Y.position}else f="";break;default:f=this.#R[this.#K]?.element?.getAttribute("chit-background")||"#D9D9D9"}if(this.#Z.setAttribute("background",f),this.#Z.style.setProperty("--chit-bg-size",X),this.#Z.style.setProperty("--chit-bg-position",J),this.#K==="solid")this.#Z.setAttribute("alpha",this.#J.a);else this.#Z.removeAttribute("alpha")}#g(f,X){switch(f){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${X}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#h(){if(!this.#f)this.#Qf();this.#u(this.#K);let f=this.#f.querySelector(".fig-fill-picker-gamut");if(f)f.value=this.#q;if(this.#Z)this.#Z.setAttribute("selected","true");this.#f.open=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.#G(),this.#_()})})}open(){this.#h()}close(){if(this.#f)this.#f.open=!1}#Qf(){this.#R={},this.querySelectorAll('[slot^="mode-"]').forEach((M)=>{let _=M.getAttribute("slot").slice(5);this.#R[_]={element:M,label:M.getAttribute("label")||_.charAt(0).toUpperCase()+_.slice(1)}}),this.#f=document.createElement("dialog",{is:"fig-popup"}),this.#f.setAttribute("is","fig-popup"),this.#f.setAttribute("drag","true"),this.#f.setAttribute("handle","fig-header"),this.#f.setAttribute("autoresize","false"),this.#f.classList.add("fig-fill-picker-dialog"),this.#f.anchor=this.anchorElement||this.#Y;let f=this.getAttribute("dialog-position")||"left";this.#f.setAttribute("position",f),this.#f.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let X=["solid","gradient","image","video","webcam"],J={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},Q=this.getAttribute("mode"),Y;if(Q){if(Y=Q.split(",").map((_)=>_.trim().toLowerCase()).filter((_)=>X.includes(_)||this.#R[_]),Y.length===0)Y=[...X]}else Y=[...X];let Z={...J};for(let[M,{label:_}]of Object.entries(this.#R))Z[M]=_;if(!Y.includes(this.#K))this.#K=Y[0],this.#s=Y[0];let $=this.getAttribute("experimental"),K=$?`experimental="${$}"`:"",q;if(Y.length===1)q=`<h3 class="fig-fill-picker-type-label">${Z[Y[0]]}</h3>`;else{let M=Y.map((_)=>`<option value="${_}">${Z[_]}</option>`).join(`
|
|
2
|
+
`);q=`<fig-dropdown class="fig-fill-picker-type" label="Fill type" ${K} value="${this.#K}">
|
|
3
|
+
${M}
|
|
4
|
+
</fig-dropdown>`}let W=Y.map((M)=>`<div class="fig-fill-picker-tab" data-tab="${M}"></div>`).join(`
|
|
5
|
+
`),U=`<fig-dropdown class="fig-fill-picker-gamut" label="Color gamut" ${K} value="${this.#q}">
|
|
6
6
|
<option value="srgb">sRGB</option>
|
|
7
7
|
<option value="display-p3">Display P3</option>
|
|
8
|
-
</fig-dropdown>`;this.#
|
|
8
|
+
</fig-dropdown>`;this.#f.innerHTML=`
|
|
9
9
|
<fig-header>
|
|
10
|
-
${L}
|
|
11
10
|
${q}
|
|
12
|
-
|
|
11
|
+
${U}
|
|
12
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-close" aria-label="Close fill picker">
|
|
13
13
|
<fig-icon name="close"></fig-icon>
|
|
14
14
|
</fig-button>
|
|
15
15
|
</fig-header>
|
|
16
16
|
<fig-content>
|
|
17
|
-
${
|
|
17
|
+
${W}
|
|
18
18
|
</fig-content>
|
|
19
|
-
`,document.body.appendChild(this.#
|
|
19
|
+
`,document.body.appendChild(this.#f);for(let[M,{element:_}]of Object.entries(this.#R)){let k=this.#f.querySelector(`[data-tab="${M}"]`);if(!k)continue;while(_.firstChild)k.appendChild(_.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:M,container:k}}))}let j=this.#f.querySelector(".fig-fill-picker-type");if(j)j.addEventListener("change",(M)=>{this.#u(M.target.value)});let O=this.#f.querySelector(".fig-fill-picker-gamut");if(O){let M=(_)=>{let k=_.currentTarget?.value??_.target?.value??_.detail;if(k&&k!==this.#q)this.#q=k,this.#Zf()};O.addEventListener("input",M),O.addEventListener("change",M)}this.#f.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#f.open=!1});let V=()=>{if(this.#Z)this.#Z.removeAttribute("selected");this.#M(),this.dispatchEvent(new CustomEvent("close"))};this.#f.addEventListener("close",V),this.#P=new MutationObserver(()=>{if(!(this.#f.hasAttribute("open")&&this.#f.getAttribute("open")!=="false"))V()}),this.#P.observe(this.#f,{attributes:!0,attributeFilter:["open"]});let G={solid:()=>this.#Yf(),gradient:()=>this.#Wf(),image:()=>this.#Uf(),video:()=>this.#Rf(),webcam:()=>this.#Mf()};for(let[M,_]of Object.entries(G))if(!this.#R[M]&&Y.includes(M))_();for(let M of Object.keys(this.#R)){if(X.includes(M))continue;let _=this.#f.querySelector(`[data-tab="${M}"]`);if(!_)continue;_.addEventListener("input",(k)=>{if(k.target===this)return;if(k.stopPropagation(),k.detail)this.#S[M]=k.detail;this.#Q()}),_.addEventListener("change",(k)=>{if(k.target===this)return;if(k.stopPropagation(),k.detail)this.#S[M]=k.detail;this.#M()})}}#u(f){let X=this.#f?.querySelector(`.fig-fill-picker-tab[data-tab="${f}"]`);if(!X)return;this.#s=f,this.#K=f;let J=this.#f.querySelector(".fig-fill-picker-type");if(J&&J.value!==f)J.value=f;this.#f.querySelectorAll(".fig-fill-picker-tab").forEach((Z)=>{if(Z.dataset.tab===f)Z.style.display="block";else Z.style.display="none"});let Y=this.#f.querySelector("fig-content");if(Y)Y.style.padding=this.#R[f]?"0":"";if(f==="gradient")requestAnimationFrame(()=>{this.#V();let Z=X.querySelector(".fig-fill-picker-gradient-bar-input");Z?.refreshLayout?.(),requestAnimationFrame(()=>{Z?.refreshLayout?.()})});this.#j(),this.#Q()}#Yf(){let f=this.#f.querySelector('[data-tab="solid"]'),X=this.getAttribute("alpha")!=="false",J=this.getAttribute("experimental"),Q=J?`experimental="${J}"`:"";if(f.innerHTML=`
|
|
20
20
|
<fig-preview class="fig-fill-picker-color-area">
|
|
21
21
|
<canvas width="200" height="200"></canvas>
|
|
22
22
|
<fig-handle
|
|
23
|
+
aria-label="Color saturation and brightness"
|
|
23
24
|
type="color"
|
|
24
|
-
color="${this.#
|
|
25
|
+
color="${this.#k({...this.#J,a:1})}"
|
|
25
26
|
data-no-color-picker
|
|
26
27
|
drag
|
|
27
28
|
drag-surface=".fig-fill-picker-color-area"
|
|
@@ -30,12 +31,12 @@ var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer",
|
|
|
30
31
|
></fig-handle>
|
|
31
32
|
</fig-preview>
|
|
32
33
|
<div class="fig-fill-picker-sliders">
|
|
33
|
-
<fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
|
|
34
|
-
<fig-slider type="hue" text="false" min="0" max="360" value="${this.#
|
|
35
|
-
${
|
|
34
|
+
<fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" aria-label="Sample color"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
|
|
35
|
+
<fig-slider type="hue" text="false" min="0" max="360" aria-label="Hue" value="${this.#J.h}"></fig-slider>
|
|
36
|
+
${X?`<fig-slider type="opacity" text="true" units="%" min="0" max="100" aria-label="Opacity" value="${this.#J.a*100}" color="${this.#k(this.#J)}"></fig-slider>`:""}
|
|
36
37
|
</div>
|
|
37
38
|
<fig-field class="fig-fill-picker-inputs">
|
|
38
|
-
<fig-dropdown class="fig-fill-picker-input-mode" ${
|
|
39
|
+
<fig-dropdown class="fig-fill-picker-input-mode" label="Color value format" ${Q} value="${this.#E}">
|
|
39
40
|
<option value="hex">Hex</option>
|
|
40
41
|
<option value="rgb">RGB</option>
|
|
41
42
|
<option value="hsl">HSL</option>
|
|
@@ -45,53 +46,54 @@ var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer",
|
|
|
45
46
|
</fig-dropdown>
|
|
46
47
|
<span class="fig-fill-picker-input-fields"></span>
|
|
47
48
|
</fig-field>
|
|
48
|
-
`,this.#
|
|
49
|
-
${
|
|
50
|
-
${
|
|
51
|
-
${
|
|
52
|
-
</div>`;break;case"hsl":
|
|
53
|
-
${
|
|
54
|
-
${
|
|
55
|
-
${
|
|
56
|
-
</div>`;break;case"hsb":
|
|
57
|
-
${
|
|
58
|
-
${
|
|
59
|
-
${
|
|
60
|
-
</div>`;break;case"lab":
|
|
61
|
-
${
|
|
62
|
-
${
|
|
63
|
-
${
|
|
64
|
-
</div>`;break;case"lch":
|
|
65
|
-
${
|
|
66
|
-
${
|
|
67
|
-
${
|
|
68
|
-
</div>`;break;default:
|
|
49
|
+
`,this.#U=f.querySelector("canvas"),this.#O=f.querySelector("fig-handle"),this.#G(),this.#_(),this.#d(),this.#F=f.querySelector('fig-slider[type="hue"]'),this.#F.addEventListener("input",($)=>{this.#J.h=parseFloat($.target.value),this.#G(),this.#_(),this.#y(),this.#Q()}),this.#F.addEventListener("change",()=>{this.#M()}),X)this.#N=f.querySelector('fig-slider[type="opacity"]'),this.#N.addEventListener("input",($)=>{this.#J.a=parseFloat($.target.value)/100,this.#y(),this.#Q()}),this.#N.addEventListener("change",()=>{this.#M()});f.querySelector(".fig-fill-picker-input-mode").addEventListener("input",($)=>{this.#E=$.target.value,this.#l()}),this.#l();let Z=f.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)Z.addEventListener("click",async()=>{try{let K=await new EyeDropper().open();this.#J={...this.#w(K.sRGBHex),a:this.#J.a},this.#G(),this.#_(),this.#y(),this.#Q()}catch($){}});else Z.setAttribute("disabled",""),Z.title="EyeDropper not supported in this browser"}#Zf(){let f=this.#f?.querySelector('[data-tab="solid"]');if(f){let X=f.querySelector("canvas");if(X){let J=document.createElement("canvas");J.width=X.width,J.height=X.height,X.replaceWith(J),this.#U=J,this.#d()}this.#G(),this.#_()}this.#D(),this.#Q()}#G(){if(!this.#U&&this.#f)this.#U=this.#f.querySelector('[data-tab="solid"] canvas');if(!this.#U)return;let f=this.#q==="display-p3"?"display-p3":"srgb",X=this.#U.getContext("2d",{colorSpace:f});if(!X)return;let J=this.#U.width,Q=this.#U.height;X.clearRect(0,0,J,Q);let Y=this.#J.h,Z=this.#q==="display-p3",$=X.createLinearGradient(0,0,J,0);if(Z){$.addColorStop(0,"color(display-p3 1 1 1)");let[q,W,U]=hslToP3(Y,100,50);$.addColorStop(1,`color(display-p3 ${q} ${W} ${U})`)}else $.addColorStop(0,"#FFFFFF"),$.addColorStop(1,`hsl(${Y}, 100%, 50%)`);X.fillStyle=$,X.fillRect(0,0,J,Q);let K=X.createLinearGradient(0,0,0,Q);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),X.fillStyle=K,X.fillRect(0,0,J,Q)}#_(f=0){if(!this.#O||!this.#U)return;let X=this.#U.getBoundingClientRect();if((X.width===0||X.height===0)&&f<5){requestAnimationFrame(()=>this.#_(f+1));return}let J=Math.max(0,Math.min(100,this.#J.s)),Q=Math.max(0,Math.min(100,100-this.#J.v));this.#O.setAttribute("value",`${J}% ${Q}%`),this.#O.setAttribute("color",this.#k({...this.#J,a:1}))}#b(f,X,J={}){let{updateHandle:Q=!0,emitInput:Y=!0,emitChange:Z=!1}=J;if(this.#J.s=Math.max(0,Math.min(100,f*100)),this.#J.v=Math.max(0,Math.min(100,(1-X)*100)),this.#O)this.#O.setAttribute("color",this.#k({...this.#J,a:1}));if(Q)this.#_();if(this.#y(),Y)this.#Q();if(Z)this.#M()}#d(){if(this.#B)this.#B(),this.#B=null;if(!this.#U||!this.#O)return;let f=this.#U.parentElement||this.#U,X=this.#O,J=!1,Q=(W,U={})=>{let j=f.getBoundingClientRect();if(j.width===0||j.height===0)return;let O=Math.max(0,Math.min(W.clientX-j.left,j.width)),V=Math.max(0,Math.min(W.clientY-j.top,j.height));this.#b(O/j.width,V/j.height,U)},Y=(W)=>{if(W.button!==0)return;if(W.target===X||X.contains(W.target))return;J=!0,this.#z=!0,f.setPointerCapture(W.pointerId),Q(W,{updateHandle:!0,emitInput:!0})},Z=(W)=>{if(!J)return;if(W.buttons===0){$();return}Q(W,{updateHandle:!0,emitInput:!0})},$=()=>{if(!J)return;J=!1,this.#z=!1,this.#M()},K=(W)=>{this.#z=!0;let U=W.detail?.px,j=W.detail?.py;if(!Number.isFinite(U)||!Number.isFinite(j))return;X.setAttribute("value",`${U*100}% ${j*100}%`),this.#b(U,j,{updateHandle:!1,emitInput:!0})},q=(W)=>{let U=W.detail?.px,j=W.detail?.py;if(Number.isFinite(U)&&Number.isFinite(j))X.setAttribute("value",`${U*100}% ${j*100}%`),this.#b(U,j,{updateHandle:!1,emitInput:!1});this.#z=!1,this.#M()};f.addEventListener("pointerdown",Y),f.addEventListener("pointermove",Z),f.addEventListener("pointerup",$),f.addEventListener("pointercancel",$),f.addEventListener("lostpointercapture",$),X.addEventListener("input",K),X.addEventListener("change",q),this.#B=()=>{f.removeEventListener("pointerdown",Y),f.removeEventListener("pointermove",Z),f.removeEventListener("pointerup",$),f.removeEventListener("pointercancel",$),f.removeEventListener("lostpointercapture",$),X.removeEventListener("input",K),X.removeEventListener("change",q),this.#z=!1}}#l(){let f=this.#f?.querySelector(".fig-fill-picker-input-fields");if(!f)return;let X=(Y,Z)=>`<fig-tooltip text="${Y}">${Z}</fig-tooltip>`,J=(Y,Z,$,K,q)=>`<fig-input-number class="${Y}" aria-label="${Z}" min="${$}" max="${K}"${q!=null?` step="${q}"`:""}></fig-input-number>`,Q;switch(this.#E){case"rgb":Q=`<div class="input-combo">
|
|
50
|
+
${X("Red",J("fig-fill-picker-ci-r","Red",0,255))}
|
|
51
|
+
${X("Green",J("fig-fill-picker-ci-g","Green",0,255))}
|
|
52
|
+
${X("Blue",J("fig-fill-picker-ci-b","Blue",0,255))}
|
|
53
|
+
</div>`;break;case"hsl":Q=`<div class="input-combo">
|
|
54
|
+
${X("Hue",J("fig-fill-picker-ci-h","Hue",0,360))}
|
|
55
|
+
${X("Saturation",J("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
56
|
+
${X("Lightness",J("fig-fill-picker-ci-l","Lightness",0,100))}
|
|
57
|
+
</div>`;break;case"hsb":Q=`<div class="input-combo">
|
|
58
|
+
${X("Hue",J("fig-fill-picker-ci-h","Hue",0,360))}
|
|
59
|
+
${X("Saturation",J("fig-fill-picker-ci-s","Saturation",0,100))}
|
|
60
|
+
${X("Brightness",J("fig-fill-picker-ci-v","Brightness",0,100))}
|
|
61
|
+
</div>`;break;case"lab":Q=`<div class="input-combo">
|
|
62
|
+
${X("Lightness",J("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
63
|
+
${X("Green-Red axis",J("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001))}
|
|
64
|
+
${X("Blue-Yellow axis",J("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001))}
|
|
65
|
+
</div>`;break;case"lch":Q=`<div class="input-combo">
|
|
66
|
+
${X("Lightness",J("fig-fill-picker-ci-okl","Lightness",0,100))}
|
|
67
|
+
${X("Chroma",J("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001))}
|
|
68
|
+
${X("Hue",J("fig-fill-picker-ci-okh","Hue",0,360))}
|
|
69
|
+
</div>`;break;default:Q='<fig-input-text class="fig-fill-picker-ci-hex" aria-label="Hex color" placeholder="FFFFFF"></fig-input-text>';break}f.innerHTML=Q,this.#$f(),requestAnimationFrame(()=>this.#y())}#$f(){let f=this.#f?.querySelector(".fig-fill-picker-input-fields");if(!f)return;let X=()=>{if(this.#z)return;let Y=this.#Lf();if(!Y)return;if(this.#J={...Y,a:this.#J.a},this.#G(),this.#_(),this.#F)this.#F.setAttribute("value",this.#J.h);this.#Q()},J=()=>this.#M();f.querySelectorAll("fig-input-number, fig-input-text").forEach((Y)=>{Y.addEventListener("input",X),Y.addEventListener("change",J)})}#Lf(){let f=(J)=>this.#f?.querySelector(`.${J}`),X=(J)=>parseFloat(f(J)?.value??0);switch(this.#E){case"rgb":return this.#A({r:X("fig-fill-picker-ci-r"),g:X("fig-fill-picker-ci-g"),b:X("fig-fill-picker-ci-b")});case"hsl":{let J=this.#zf({h:X("fig-fill-picker-ci-h"),s:X("fig-fill-picker-ci-s"),l:X("fig-fill-picker-ci-l")});return this.#A(J)}case"hsb":return{h:X("fig-fill-picker-ci-h"),s:X("fig-fill-picker-ci-s"),v:X("fig-fill-picker-ci-v"),a:1};case"lab":{let J=this.#e({l:X("fig-fill-picker-ci-okl")/100,a:X("fig-fill-picker-ci-oka"),b:X("fig-fill-picker-ci-okb")});return this.#A(J)}case"lch":{let J=this.#Vf({l:X("fig-fill-picker-ci-okl")/100,c:X("fig-fill-picker-ci-okc"),h:X("fig-fill-picker-ci-okh")});return this.#A(J)}default:{let J=f("fig-fill-picker-ci-hex");if(!J)return null;let Q=J.value.replace(/^#/,"");if(Q.length===3)Q=Q[0]+Q[0]+Q[1]+Q[1]+Q[2]+Q[2];if(Q.length!==6||!/^[0-9a-fA-F]{6}$/.test(Q))return null;return this.#w(`#${Q}`)}}}#y(){if(!this.#f)return;let f=this.#k(this.#J),X=this.#t(this.#J),J=(Y)=>this.#f.querySelector(`.${Y}`),Q=(Y,Z)=>{let $=J(Y);if($)$.setAttribute("value",Z)};switch(this.#E){case"rgb":Q("fig-fill-picker-ci-r",X.r),Q("fig-fill-picker-ci-g",X.g),Q("fig-fill-picker-ci-b",X.b);break;case"hsl":{let Y=this.#Ff(X);Q("fig-fill-picker-ci-h",Math.round(Y.h)),Q("fig-fill-picker-ci-s",Math.round(Y.s)),Q("fig-fill-picker-ci-l",Math.round(Y.l));break}case"hsb":Q("fig-fill-picker-ci-h",Math.round(this.#J.h)),Q("fig-fill-picker-ci-s",Math.round(this.#J.s)),Q("fig-fill-picker-ci-v",Math.round(this.#J.v));break;case"lab":{let Y=this.#a(X);Q("fig-fill-picker-ci-okl",Math.round(Y.l*100)),Q("fig-fill-picker-ci-oka",+Y.a.toFixed(3)),Q("fig-fill-picker-ci-okb",+Y.b.toFixed(3));break}case"lch":{let Y=this.#Bf(X);Q("fig-fill-picker-ci-okl",Math.round(Y.l*100)),Q("fig-fill-picker-ci-okc",+Y.c.toFixed(3)),Q("fig-fill-picker-ci-okh",Math.round(Y.h));break}default:Q("fig-fill-picker-ci-hex",f.replace(/^#/,"").toUpperCase());break}if(this.#N)this.#N.setAttribute("color",f);this.#j()}#Wf(){let f=this.#f.querySelector('[data-tab="gradient"]'),X=this.getAttribute("experimental"),J=X?`experimental="${X}"`:"";f.innerHTML=`
|
|
69
70
|
<fig-field class="fig-fill-picker-gradient-header">
|
|
70
|
-
<fig-dropdown class="fig-fill-picker-gradient-type" ${
|
|
71
|
+
<fig-dropdown class="fig-fill-picker-gradient-type" label="Gradient type" ${J} value="${this.#X.type}">
|
|
71
72
|
<option value="linear" selected>Linear</option>
|
|
72
73
|
<option value="radial">Radial</option>
|
|
73
74
|
<option value="angular">Angular</option>
|
|
74
75
|
</fig-dropdown>
|
|
75
76
|
<fig-tooltip text="Rotate gradient">
|
|
76
|
-
<fig-input-number class="fig-fill-picker-gradient-angle" value="${(this.#
|
|
77
|
+
<fig-input-number class="fig-fill-picker-gradient-angle" aria-label="Gradient angle" value="${(this.#X.angle-90+360)%360}" min="0" max="360" units="°" wrap></fig-input-number>
|
|
77
78
|
</fig-tooltip>
|
|
78
79
|
<div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
|
|
79
|
-
<fig-input-number min="0" max="100" value="${this.#
|
|
80
|
-
<fig-input-number min="0" max="100" value="${this.#
|
|
80
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center X" value="${this.#X.centerX}" units="%" class="fig-fill-picker-gradient-cx"></fig-input-number>
|
|
81
|
+
<fig-input-number min="0" max="100" aria-label="Gradient center Y" value="${this.#X.centerY}" units="%" class="fig-fill-picker-gradient-cy"></fig-input-number>
|
|
81
82
|
</div>
|
|
82
83
|
<fig-tooltip text="Flip gradient">
|
|
83
|
-
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip">
|
|
84
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip" aria-label="Flip gradient">
|
|
84
85
|
<fig-icon name="swap"></fig-icon>
|
|
85
86
|
</fig-button>
|
|
86
87
|
</fig-tooltip>
|
|
87
88
|
</fig-field>
|
|
88
89
|
<fig-preview class="fig-fill-picker-gradient-preview">
|
|
89
|
-
<fig-input-gradient class="fig-fill-picker-gradient-bar-input" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:
|
|
90
|
+
<fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({type:"gradient",gradient:x(this.#X)})}'></fig-input-gradient>
|
|
90
91
|
</fig-preview>
|
|
91
92
|
<fig-field class="fig-fill-picker-gradient-interpolation">
|
|
92
93
|
<label>Mixing</label>
|
|
93
|
-
<fig-dropdown class="fig-fill-picker-gradient-space" full ${
|
|
94
|
+
<fig-dropdown class="fig-fill-picker-gradient-space" label="Gradient mixing" full ${J} value="${this.#X.interpolationSpace==="oklch"?`oklch-${this.#X.hueInterpolation||"shorter"}`:this.#X.interpolationSpace}">
|
|
94
95
|
<optgroup label="sRGB">
|
|
96
|
+
<option value="srgb">Classic</option>
|
|
95
97
|
<option value="srgb-linear">Linear</option>
|
|
96
98
|
</optgroup>
|
|
97
99
|
<optgroup label="OKLab">
|
|
@@ -108,37 +110,37 @@ var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer",
|
|
|
108
110
|
<div class="fig-fill-picker-gradient-stops">
|
|
109
111
|
<fig-header class="fig-fill-picker-gradient-stops-header" borderless>
|
|
110
112
|
<span>Stops</span>
|
|
111
|
-
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" title="Add stop">
|
|
113
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" aria-label="Add gradient stop" title="Add stop">
|
|
112
114
|
<fig-icon name="add"></fig-icon>
|
|
113
115
|
</fig-button>
|
|
114
116
|
</fig-header>
|
|
115
117
|
<div class="fig-fill-picker-gradient-stops-list"></div>
|
|
116
118
|
</div>
|
|
117
|
-
`,this.#
|
|
118
|
-
<fig-field class="fig-fill-picker-gradient-stop-row" data-index="${
|
|
119
|
-
<fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${
|
|
120
|
-
<fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${
|
|
121
|
-
<fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#
|
|
119
|
+
`,this.#V(),this.#jf(f)}#jf(f){let X=f.querySelector(".fig-fill-picker-gradient-type"),J=(U)=>U.currentTarget?.value??U.target?.value??U.detail,Q=(U)=>{this.#X.type=J(U),this.#V(),this.#Q()};X.addEventListener("input",Q),X.addEventListener("change",Q);let Y=f.querySelector(".fig-fill-picker-gradient-space"),Z=(U)=>{let j=J(U),O=j,V="shorter";if(j.startsWith("oklch-"))O="oklch",V=j.slice(6);this.#X=y({...this.#X,interpolationSpace:O,hueInterpolation:V}),this.#V(),this.#Q()};Y?.addEventListener("input",Z),Y?.addEventListener("change",Z),f.querySelector(".fig-fill-picker-gradient-angle").addEventListener("input",(U)=>{let j=parseFloat(U.target.value)||0;this.#X.angle=(j+90)%360,this.#D(),this.#Q()});let K=f.querySelector(".fig-fill-picker-gradient-cx"),q=f.querySelector(".fig-fill-picker-gradient-cy");K?.addEventListener("input",(U)=>{this.#X.centerX=parseFloat(U.target.value)||50,this.#D(),this.#Q()}),q?.addEventListener("input",(U)=>{this.#X.centerY=parseFloat(U.target.value)||50,this.#D(),this.#Q()}),f.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#X.stops.forEach((U)=>{U.position=100-U.position}),this.#X.stops.sort((U,j)=>U.position-j.position),this.#V(),this.#Q()}),f.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#X.stops.push({position:50,color:"#888888",opacity:100}),this.#X.stops.sort((j,O)=>j.position-O.position),this.#V(),this.#Q()});let W=f.querySelector(".fig-fill-picker-gradient-bar-input");if(W){let U=(j)=>{j.stopPropagation();let O=j.detail;if(!O?.gradient)return;this.#X=y({...this.#X,...O.gradient}),this.#j(),this.#i()};W.addEventListener("input",(j)=>{U(j),this.#Q()}),W.addEventListener("change",(j)=>{U(j),this.#M()})}}#V(){if(!this.#f)return;let f=this.#f.querySelector('[data-tab="gradient"]');if(!f)return;this.#X=y(this.#X);let X=f.querySelector(".fig-fill-picker-gradient-angle"),J=f.querySelector(".fig-fill-picker-gradient-center");if(this.#X.type==="radial")X.style.display="none",J.style.display="flex";else{X.style.display="block",J.style.display="none";let Y=(this.#X.angle-90+360)%360;X.setAttribute("value",Y)}let Q=f.querySelector(".fig-fill-picker-gradient-space");if(Q)Q.value=this.#X.interpolationSpace==="oklch"?`oklch-${this.#X.hueInterpolation||"shorter"}`:this.#X.interpolationSpace;this.#D(),this.#i()}#D(){if(!this.#f)return;let f=this.#f.querySelector(".fig-fill-picker-gradient-bar-input");if(f)f.setAttribute("value",JSON.stringify({type:"gradient",gradient:x(this.#X)}));this.#j()}#i(){if(!this.#f)return;let f=this.#f.querySelector(".fig-fill-picker-gradient-stops-list");if(!f)return;let X=f.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(X.length===this.#X.stops.length){this.#X.stops.forEach((J,Q)=>{let Y=X[Q];Y.dataset.index=Q;let Z=Y.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",J.position);let $=Y.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",J.color);let K=Y.querySelector(".fig-fill-picker-stop-remove");if(K)if(this.#X.stops.length<=2)K.setAttribute("disabled","");else K.removeAttribute("disabled")});return}this.#Kf(f)}#Kf(f){f.innerHTML=this.#X.stops.map((X,J)=>`
|
|
120
|
+
<fig-field class="fig-fill-picker-gradient-stop-row" data-index="${J}">
|
|
121
|
+
<fig-input-number class="fig-fill-picker-stop-position" aria-label="Gradient stop position" min="0" max="100" value="${X.position}" units="%"></fig-input-number>
|
|
122
|
+
<fig-input-color class="fig-fill-picker-stop-color" aria-label="Gradient stop color" text="true" alpha="true" picker="figma" picker-dialog-position="right" value="${X.color}"></fig-input-color>
|
|
123
|
+
<fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${this.#X.stops.length<=2?"disabled":""} aria-label="Remove gradient stop">
|
|
122
124
|
<fig-icon name="minus"></fig-icon>
|
|
123
125
|
</fig-button>
|
|
124
126
|
</fig-field>
|
|
125
|
-
`).join(""),
|
|
127
|
+
`).join(""),f.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach((X)=>{let J=parseInt(X.dataset.index);X.querySelector(".fig-fill-picker-stop-position").addEventListener("input",(Z)=>{this.#X.stops[J].position=parseFloat(Z.target.value)||0,this.#D(),this.#Q()});let Q=X.querySelector(".fig-fill-picker-stop-color"),Y=Q.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#f;else requestAnimationFrame(()=>{let Z=Q.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#f});Q.addEventListener("input",(Z)=>{this.#X.stops[J].color=Z.target.hexOpaque||Z.target.value;let $=Z.detail?.rgba?.a;if($!==void 0)this.#X.stops[J].opacity=Math.round($*100);this.#D(),this.#Q()}),X.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{if(this.#X.stops.length>2)this.#X.stops.splice(J,1),this.#V(),this.#Q()})})}#c(f,X=!0){let J=y({...this.#X,interpolationSpace:f??this.#X.interpolationSpace}),Q=this.#q==="display-p3",Y=J.stops.map((K)=>{let q=(K.opacity??100)/100;return`${Q?this.#kf(K.color,q):this.#Nf(K.color,q)} ${K.position}%`}).join(", "),Z=Lf(J),$=X&&Z?` ${Z}`:"";switch(J.type){case"linear":return`linear-gradient(${J.angle}deg${$}, ${Y})`;case"radial":return`radial-gradient(circle at ${J.centerX}% ${J.centerY}%${$}, ${Y})`;case"angular":return`conic-gradient(from ${J.angle}deg${$}, ${Y})`;default:return`linear-gradient(${J.angle}deg${$}, ${Y})`}}static#r=new Map;#n(f){let X=S.#r.get(f);if(X!==void 0)return X;let J=document.createElement("div");J.style.background=f;let Q=!!J.style.background;return S.#r.set(f,Q),Q}#o(){let f=this.#c(void 0,!0);if(this.#n(f))return f;let X=this.#c("oklab",!0);if(this.#n(X))return X;return this.#c("oklab",!1)}#Uf(){let f=this.#f.querySelector('[data-tab="image"]'),X=this.getAttribute("experimental"),J=X?`experimental="${X}"`:"";f.innerHTML=`
|
|
126
128
|
<fig-field class="fig-fill-picker-media-header">
|
|
127
|
-
<fig-dropdown class="fig-fill-picker-scale-mode" ${
|
|
129
|
+
<fig-dropdown class="fig-fill-picker-scale-mode" label="Image scale mode" ${J} value="${this.#$.scaleMode}">
|
|
128
130
|
<option value="fill" selected>Fill</option>
|
|
129
131
|
<option value="fit">Fit</option>
|
|
130
132
|
<option value="crop">Crop</option>
|
|
131
133
|
<option value="tile">Tile</option>
|
|
132
134
|
</fig-dropdown>
|
|
133
|
-
<fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${this.#$.scale}" units="%" ${this.#$.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
|
|
135
|
+
<fig-input-number class="fig-fill-picker-scale" aria-label="Image tile scale" min="1" max="200" value="${this.#$.scale}" units="%" ${this.#$.scaleMode==="tile"?"":'style="display: none;"'}></fig-input-number>
|
|
134
136
|
<fig-button class="fig-fill-picker-media-rotate" icon variant="ghost" aria-label="Rotate">
|
|
135
137
|
<fig-icon name="rotate"></fig-icon>
|
|
136
138
|
</fig-button>
|
|
137
139
|
</fig-field>
|
|
138
|
-
<fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
|
|
139
|
-
`,this.#
|
|
140
|
+
<fig-image class="fig-fill-picker-media-preview fig-fill-picker-image-preview" upload="true" label="Upload from computer" alt="Image fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true"></fig-image>
|
|
141
|
+
`,this.#qf(f)}#qf(f){let X=f.querySelector(".fig-fill-picker-scale-mode"),J=f.querySelector(".fig-fill-picker-scale"),Q=f.querySelector(".fig-fill-picker-image-preview");X.addEventListener("change",(Y)=>{this.#$.scaleMode=Y.target.value,J.style.display=Y.target.value==="tile"?"block":"none",this.#H(Q),this.#j(),this.#Q()}),J.addEventListener("input",(Y)=>{this.#$.scale=parseFloat(Y.target.value)||100,this.#H(Q),this.#j(),this.#Q()}),Q.addEventListener("loaded",(Y)=>{let Z=Y.detail?.src||Q.src;if(!Z)return;this.#$.url=Z,this.#H(Q),this.#j(),this.#Q()}),Q.addEventListener("change",()=>{if(Q.src)return;this.#$.url=null,this.#H(Q),this.#j(),this.#Q()}),this.#H(Q)}#H(f){if(!this.#$.url){f.removeAttribute("src"),f.classList.remove("has-media","is-tiled"),f.style.backgroundImage="",f.style.backgroundPosition="",f.style.backgroundRepeat="",f.style.backgroundSize="";return}f.setAttribute("src",this.#$.url),f.classList.add("has-media"),f.style.backgroundImage="",f.style.backgroundPosition="",f.style.backgroundRepeat="",f.style.backgroundSize="",f.mediaEl?.style.removeProperty("opacity");let X=f.querySelector("fig-input-file[data-generated]");if(X)X.setAttribute("label","Replace"),X.removeAttribute("url");switch(this.#$.scaleMode){case"fill":f.classList.remove("is-tiled"),f.setAttribute("fit","cover");break;case"crop":f.classList.remove("is-tiled"),f.setAttribute("fit","cover");break;case"fit":f.classList.remove("is-tiled"),f.setAttribute("fit","contain");break;case"tile":if(f.classList.add("is-tiled"),f.setAttribute("fit","none"),f.style.backgroundImage=`url(${this.#$.url})`,f.style.backgroundPosition="top left",f.style.backgroundSize=`${this.#$.scale}%`,f.style.backgroundRepeat="repeat",f.mediaEl)f.mediaEl.style.opacity="0";break}}#v(f){if(f.tagName==="FIG-MEDIA"){if(!this.#L.url){f.removeAttribute("src"),f.classList.remove("has-media");return}f.setAttribute("src",this.#L.url),f.classList.add("has-media");let X=f.querySelector("fig-input-file[data-generated]");if(X)X.setAttribute("label","Replace"),X.removeAttribute("url");switch(this.#L.scaleMode){case"fill":case"crop":f.setAttribute("fit","cover");break;case"fit":f.setAttribute("fit","contain");break}return}switch(f.style.objectPosition="center",f.style.width="100%",f.style.height="100%",this.#L.scaleMode){case"fill":case"crop":f.style.objectFit="cover";break;case"fit":f.style.objectFit="contain";break}}#Rf(){let f=this.#f.querySelector('[data-tab="video"]'),X=this.getAttribute("experimental"),J=X?`experimental="${X}"`:"";f.innerHTML=`
|
|
140
142
|
<fig-field class="fig-fill-picker-media-header">
|
|
141
|
-
<fig-dropdown class="fig-fill-picker-scale-mode" ${
|
|
143
|
+
<fig-dropdown class="fig-fill-picker-scale-mode" label="Video scale mode" ${J} value="${this.#L.scaleMode}">
|
|
142
144
|
<option value="fill" selected>Fill</option>
|
|
143
145
|
<option value="fit">Fit</option>
|
|
144
146
|
<option value="crop">Crop</option>
|
|
@@ -147,13 +149,13 @@ var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer",
|
|
|
147
149
|
<fig-icon name="rotate"></fig-icon>
|
|
148
150
|
</fig-button>
|
|
149
151
|
</fig-field>
|
|
150
|
-
<fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true" loop="true"></fig-media>
|
|
151
|
-
`,this.#
|
|
152
|
+
<fig-media class="fig-fill-picker-media-preview fig-fill-picker-video-preview" type="video" upload="true" label="Upload from computer" aria-label="Video fill preview" size="auto" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" controls muted="true" loop="true"></fig-media>
|
|
153
|
+
`,this.#_f(f)}#_f(f){let X=f.querySelector(".fig-fill-picker-scale-mode"),J=f.querySelector(".fig-fill-picker-video-preview");X.addEventListener("change",(Q)=>{this.#L.scaleMode=Q.target.value,this.#v(J),this.#j(),this.#Q()}),J.addEventListener("loaded",(Q)=>{let Y=Q.detail?.src||J.src;if(!Y)return;this.#L.url=Y,this.#v(J),J.play?.(),this.#j(),this.#Q()}),J.addEventListener("change",()=>{if(J.src)return;this.#L.url=null,this.#v(J),this.#j(),this.#Q()}),this.#v(J)}#Mf(){let f=this.#f.querySelector('[data-tab="webcam"]'),X=this.getAttribute("experimental"),J=X?`experimental="${X}"`:"";f.innerHTML=`
|
|
152
154
|
<fig-field class="fig-fill-picker-webcam-camera" style="display: none;">
|
|
153
|
-
<fig-dropdown class="fig-fill-picker-camera-select" full ${
|
|
155
|
+
<fig-dropdown class="fig-fill-picker-camera-select" label="Camera" full ${J}>
|
|
154
156
|
</fig-dropdown>
|
|
155
157
|
</fig-field>
|
|
156
|
-
<fig-video class="fig-fill-picker-webcam-preview" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true">
|
|
158
|
+
<fig-video class="fig-fill-picker-webcam-preview" aria-label="Webcam preview" aspect-ratio="1/1" fit="cover" checkerboard="true" autoplay="true" muted="true">
|
|
157
159
|
<video class="fig-fill-picker-webcam-video" autoplay muted playsinline></video>
|
|
158
160
|
<div class="fig-fill-picker-webcam-status">
|
|
159
161
|
<span>Camera access required</span>
|
|
@@ -164,4 +166,4 @@ var N=["srgb","srgb-linear","display-p3","oklab","oklch"],f=["shorter","longer",
|
|
|
164
166
|
Capture
|
|
165
167
|
</fig-button>
|
|
166
168
|
</div>
|
|
167
|
-
`,this.#
|
|
169
|
+
`,this.#Of(f)}#Of(f){let X=f.querySelector(".fig-fill-picker-webcam-video"),J=f.querySelector(".fig-fill-picker-webcam-status"),Q=f.querySelector(".fig-fill-picker-webcam-capture"),Y=f.querySelector(".fig-fill-picker-webcam-camera"),Z=f.querySelector(".fig-fill-picker-camera-select"),$=async(K=null)=>{try{let q={video:K?{deviceId:{exact:K}}:!0};if(this.#W.stream)this.#W.stream.getTracks().forEach((j)=>j.stop());this.#W.stream=await navigator.mediaDevices.getUserMedia(q),X.srcObject=this.#W.stream,X.style.display="block",J.style.display="none";let U=(await navigator.mediaDevices.enumerateDevices()).filter((j)=>j.kind==="videoinput");if(U.length>1){if(Y.style.display="",Z.querySelectorAll(":scope > option, :scope > optgroup").forEach((j)=>j.remove()),U.forEach((j,O)=>{let V=document.createElement("option");V.value=j.deviceId;let G=j.label||(U.length>1?`Camera ${O+1}`:"Camera");V.textContent=G.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(M,_)=>{return` ${/^\d+$/.test(_)?Number.parseInt(_,10).toString():_.replace(/^0+/,"")||"0"}`}),Z.append(V)}),K)Z.value=K}else Y.style.display="none",Z.querySelectorAll(":scope > option, :scope > optgroup").forEach((j)=>j.remove())}catch(q){console.error("Webcam error:",q.name,q.message);let W="Camera access denied";if(q.name==="NotAllowedError")W="Camera permission denied";else if(q.name==="NotFoundError")W="No camera found";else if(q.name==="NotReadableError")W="Camera in use by another app";else if(q.name==="OverconstrainedError")W="Camera constraints not supported";else if(!window.isSecureContext)W="Camera requires secure context";J.innerHTML=`<span>${W}</span>`,J.style.display="flex",X.style.display="none"}};this.#T=new MutationObserver(()=>{if(f.style.display!=="none"&&!this.#W.stream)$()}),this.#T.observe(f,{attributes:!0,attributeFilter:["style"]}),Z.addEventListener("change",(K)=>{$(K.target.value)}),Q.addEventListener("click",async()=>{if(!this.#W.stream)return;if(!X.videoWidth||!X.videoHeight)return;let K=document.createElement("canvas");K.width=X.videoWidth,K.height=X.videoHeight,K.getContext("2d").drawImage(X,0,0,K.width,K.height);let q=await new Promise((U)=>K.toBlob(U,"image/png"));if(!q)return;if(this.#W.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#W.snapshot);this.#W.snapshot=URL.createObjectURL(q),this.#$.url=this.#W.snapshot;let W=this.#f.querySelector(".fig-fill-picker-image-preview");if(W)this.#H(W);this.#u("image")})}#t(f){let X=f.h/360,J=f.s/100,Q=f.v/100,Y,Z,$,K=Math.floor(X*6),q=X*6-K,W=Q*(1-J),U=Q*(1-q*J),j=Q*(1-(1-q)*J);switch(K%6){case 0:Y=Q,Z=j,$=W;break;case 1:Y=U,Z=Q,$=W;break;case 2:Y=W,Z=Q,$=j;break;case 3:Y=W,Z=U,$=Q;break;case 4:Y=j,Z=W,$=Q;break;case 5:Y=Q,Z=W,$=U;break}return{r:Math.round(Y*255),g:Math.round(Z*255),b:Math.round($*255)}}#A(f){let X=f.r/255,J=f.g/255,Q=f.b/255,Y=Math.max(X,J,Q),Z=Math.min(X,J,Q),$=Y-Z,K=0,q=Y===0?0:$/Y,W=Y;if(Y!==Z){switch(Y){case X:K=(J-Q)/$+(J<Q?6:0);break;case J:K=(Q-X)/$+2;break;case Q:K=(X-J)/$+4;break}K/=6}return{h:K*360,s:q*100,v:W*100,a:1}}#k(f){if(!f||typeof f.h!=="number"||typeof f.s!=="number"||typeof f.v!=="number")return"#D9D9D9";let X=this.#t(f),J=(Q)=>{return(isNaN(Q)?217:Math.max(0,Math.min(255,Math.round(Q)))).toString(16).padStart(2,"0")};return`#${J(X.r)}${J(X.g)}${J(X.b)}`}#w(f){let X=parseInt(f.slice(1,3),16),J=parseInt(f.slice(3,5),16),Q=parseInt(f.slice(5,7),16);return this.#A({r:X,g:J,b:Q})}#Nf(f,X=1){let J=parseInt(f.slice(1,3),16),Q=parseInt(f.slice(3,5),16),Y=parseInt(f.slice(5,7),16);return`rgba(${J}, ${Q}, ${Y}, ${X})`}#kf(f,X=1){let J=+(parseInt(f.slice(1,3),16)/255).toFixed(4),Q=+(parseInt(f.slice(3,5),16)/255).toFixed(4),Y=+(parseInt(f.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${J} ${Q} ${Y} / ${X})`}#Ff(f){let X=f.r/255,J=f.g/255,Q=f.b/255,Y=Math.max(X,J,Q),Z=Math.min(X,J,Q),$,K,q=(Y+Z)/2;if(Y===Z)$=K=0;else{let W=Y-Z;switch(K=q>0.5?W/(2-Y-Z):W/(Y+Z),Y){case X:$=((J-Q)/W+(J<Q?6:0))/6;break;case J:$=((Q-X)/W+2)/6;break;case Q:$=((X-J)/W+4)/6;break}}return{h:$*360,s:K*100,l:q*100}}#zf(f){let X=f.h/360,J=f.s/100,Q=f.l/100,Y,Z,$;if(J===0)Y=Z=$=Q;else{let K=(U,j,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return U+(j-U)*6*O;if(O<0.5)return j;if(O<0.6666666666666666)return U+(j-U)*(0.6666666666666666-O)*6;return U},q=Q<0.5?Q*(1+J):Q+J-Q*J,W=2*Q-q;Y=K(W,q,X+0.3333333333333333),Z=K(W,q,X),$=K(W,q,X-0.3333333333333333)}return{r:Math.round(Y*255),g:Math.round(Z*255),b:Math.round($*255)}}#a(f){let X=(j)=>{return j=j/255,j<=0.04045?j/12.92:Math.pow((j+0.055)/1.055,2.4)},J=X(f.r),Q=X(f.g),Y=X(f.b),Z=0.4122214708*J+0.5363325363*Q+0.0514459929*Y,$=0.2119034982*J+0.6806995451*Q+0.1073969566*Y,K=0.0883024619*J+0.2817188376*Q+0.6299787005*Y,q=Math.cbrt(Z),W=Math.cbrt($),U=Math.cbrt(K);return{l:0.2104542553*q+0.793617785*W-0.0040720468*U,a:1.9779984951*q-2.428592205*W+0.4505937099*U,b:0.0259040371*q+0.7827717662*W-0.808675766*U}}#Bf(f){let X=this.#a(f);return{l:X.l,c:Math.sqrt(X.a*X.a+X.b*X.b),h:(Math.atan2(X.b,X.a)*180/Math.PI+360)%360}}#e(f){let X=f.l+0.3963377774*f.a+0.2158037573*f.b,J=f.l-0.1055613458*f.a-0.0638541728*f.b,Q=f.l-0.0894841775*f.a-1.291485548*f.b,Y=X*X*X,Z=J*J*J,$=Q*Q*Q,K=(q)=>{let W=q<=0.0031308?12.92*q:1.055*Math.pow(q,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,W))*255)};return{r:K(4.0767416621*Y-3.3077115913*Z+0.2309699292*$),g:K(-1.2684380046*Y+2.6097574011*Z-0.3413193965*$),b:K(-0.0041960863*Y-0.7034186147*Z+1.707614701*$)}}#Vf(f){let X=f.h*Math.PI/180;return this.#e({l:f.l,a:f.c*Math.cos(X),b:f.c*Math.sin(X)})}#Q(){this.#j(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#M(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let f={type:this.#K,colorSpace:this.#q};switch(this.#K){case"solid":return{...f,color:this.#k(this.#J),alpha:this.#J.a,hsv:{...this.#J}};case"gradient":return{...f,gradient:x(this.#X),css:this.#o()};case"image":return{...f,image:{...this.#$}};case"video":return{...f,video:{...this.#L}};case"webcam":return{...f,image:{url:this.#W.snapshot,scaleMode:"fill",scale:50}};default:return{...f,...this.#S[this.#K]}}}set value(f){if(typeof f==="string")this.setAttribute("value",f);else this.setAttribute("value",JSON.stringify(f))}attributeChangedCallback(f,X,J){if(X===J)return;switch(f){case"value":if(this.#m(),this.#j(),this.#f){if(!this.#z){if(this.#_(),this.#y(),this.#F)this.#F.setAttribute("value",this.#J.h);if(this.#N)this.#N.setAttribute("value",this.#J.a*100),this.#N.setAttribute("color",this.#k(this.#J))}}break;case"disabled":this.#x();break;case"aria-label":case"aria-labelledby":case"aria-describedby":this.#x();break}}}customElements.define("fig-fill-picker",S);
|
package/dist/fig-lab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
fig-field-slider{border-radius:var(--radius-medium);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;&:focus-within{outline:1px solid var(--figma-color-border-selected)}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5);display:flex;position:relative;&>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;background-color:#0000;padding:0;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}& .fig-slider-input-container{box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area{cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus,&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}
|
|
1
|
+
fig-field-slider{border-radius:var(--radius-medium);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5);display:flex;position:relative;&>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;background-color:#0000;padding:0;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:var(--figma-focus-outline)!important;--slider-thumb-outline-offset:var(--figma-focus-outline-offset)!important}& .fig-slider-input-container{box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){outline:var(--figma-focus-outline)!important;outline-offset:var(--figma-focus-outline-offset)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:1px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area{cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}
|