@frontfriend/sdk 1.2.7 → 1.3.0
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/README.md +13 -355
- package/dist/THIRD_PARTY_NOTICES +22 -0
- package/dist/cli.js +2 -2
- package/dist/component-recipes.d.ts +3 -1
- package/dist/lib/core/adoption.js +1 -1
- package/dist/lib/core/application-adoption.js +1 -1
- package/dist/lib/core/component-recipes.js +554 -5
- package/dist/lib/core/token-processor.js +553 -4
- package/dist/mcp.cjs +2 -2
- package/dist/next.js +1 -1
- package/dist/package.json +1 -1
- package/dist/vite.js +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,554 @@
|
|
|
1
|
-
var
|
|
2
|
-
`,{mode:384}),
|
|
3
|
-
`)}H.exports={CROSS_PRIMITIVE_STATES:P,DARK_VARIANT_CSS:K,EXTRA_STATE_MATCHERS:q,PRESSED_STATE:U,STATE_VARIANT_CSS:A,STATE_VARIANT_NAMES:he,stateVariantCss:me}});var z=S((Ie,G)=>{var be="classes.txt",pe="classes.css";G.exports={CLASSES_SOURCE_FILE:be,CSS_CLASSES_SOURCE_FILE:pe}});var Z=S((Le,Y)=>{var ye=new Set(["after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]),ge=new Set(["active","focus","focus-visible","focus-within","hover"]),ve=new Set(["sm","md","lg","xl","2xl","any-pointer-coarse","any-pointer-fine","any-pointer-none","contrast-less","contrast-more","forced-colors","inverted-colors","landscape","motion-reduce","motion-safe","noscript","pointer-coarse","pointer-fine","pointer-none","portrait","print","starting"]),$e=/^(?:min-|max-|@|supports-|in-(?!range$))/,ke=/^\[&(?::(?:active|focus|focus-visible|focus-within|hover))+\]$/;function Se(i){let e=[],t=0,o=0;for(let n=0;n<i.length;n+=1){let a=i[n];a==="["||a==="("?t+=1:(a==="]"||a===")")&&t>0?t-=1:a===":"&&t===0&&(e.push(i.slice(o,n)),o=n+1)}return e.push(i.slice(o)),{variants:e.slice(0,-1),utility:e[e.length-1]}}function B(i){return i.replace(/\/[\w-]+$/,"")}function C(i){let e=B(i);return ye.has(e)||e.startsWith("[")&&e.includes("::")}function w(i){let e=B(i);return ge.has(e)||ve.has(e)?!0:e.startsWith("[")?e.startsWith("[@")||ke.test(e):e.startsWith("not-")?w(e.slice(4)):$e.test(e)}function X(i){if(typeof i!="string"||!i.includes(":"))return null;let e=i.startsWith("!")?"!":"",{variants:t,utility:o}=Se(i.slice(e.length)),n=null,a=[];for(let f of t)n!==null&&!w(f)&&a.push(f),n===null&&C(f)&&(n=f);if(a.length===0)return null;let u=t.reduce((f,h,b)=>C(h)?b:f,-1),r=t.slice(0,u).filter(f=>!C(f)),s=t.slice(u+1),c=`${e}${[...r,...s.filter(f=>!w(f)),t[u],...s.filter(w),o].join(":")}`,l=t.filter(C),d=l.length>1?`${l.join(" and ")} are pseudo-elements, and a selector can hold only one`:`${a.join(", ")} cannot follow the pseudo-element ${n}; only hover, focus, focus-visible, focus-within, active, in-* and media, container or supports variants can`;return{className:i,pseudoElement:n,chained:a,suggestion:c,reason:d}}function Ce(i){return X(i)===null}Y.exports={isCompilableClass:Ce,uncompilableClass:X}});var{fileExists:We,readJsonFileSafe:Me}=L(),we=require("color"),xe=require("https"),Pe=require("fs"),qe=require("path"),{ProcessingError:Fe}=M(),{STATE_VARIANT_CSS:Oe}=J(),{CLASSES_SOURCE_FILE:Ee}=z(),{isCompilableClass:Q}=Z(),je={"--background":"oklch(1 0 0)","--foreground":"oklch(0.145 0 0)","--card":"oklch(1 0 0)","--card-foreground":"oklch(0.145 0 0)","--popover":"oklch(1 0 0)","--popover-foreground":"oklch(0.145 0 0)","--primary":"oklch(0.205 0 0)","--primary-foreground":"oklch(0.985 0 0)","--secondary":"oklch(0.97 0 0)","--secondary-foreground":"oklch(0.205 0 0)","--muted":"oklch(0.97 0 0)","--muted-foreground":"oklch(0.556 0 0)","--accent":"oklch(0.97 0 0)","--accent-foreground":"oklch(0.205 0 0)","--destructive":"oklch(0.577 0.245 27.325)","--destructive-foreground":"oklch(0.985 0 0)","--border":"oklch(0.922 0 0)","--input":"oklch(0.922 0 0)","--ring":"oklch(0.708 0 0)","--sidebar":"oklch(0.985 0 0)","--sidebar-foreground":"oklch(0.145 0 0)","--sidebar-primary":"oklch(0.205 0 0)","--sidebar-primary-foreground":"oklch(0.985 0 0)","--sidebar-accent":"oklch(0.97 0 0)","--sidebar-accent-foreground":"oklch(0.205 0 0)","--sidebar-border":"oklch(0.922 0 0)","--sidebar-ring":"oklch(0.708 0 0)","--chart-1":"oklch(0.646 0.222 41.116)","--chart-2":"oklch(0.6 0.118 184.704)","--chart-3":"oklch(0.398 0.07 227.392)","--chart-4":"oklch(0.828 0.189 84.429)","--chart-5":"oklch(0.769 0.188 70.08)"},Ae={"--background":["--bg-default","--bg-neutral-low","--layer-base"],"--foreground":["--text-neutral-strong","--text-default"],"--card":["--layer-1","--bg-neutral-low","--bg-default"],"--card-foreground":["--text-neutral-strong","--text-default"],"--popover":["--layer-1","--bg-neutral-low","--bg-default"],"--popover-foreground":["--text-neutral-strong","--text-default"],"--primary":["--bg-brand-mid","--bg-brand-strong"],"--primary-foreground":["--text-onbrand-strong","--text-inverse-low"],"--secondary":["--bg-interactive-subtle","--bg-neutral-low"],"--secondary-foreground":["--text-oninteractive-subtle","--text-neutral-strong"],"--muted":["--bg-neutral-low","--bg-disabled"],"--muted-foreground":["--text-neutral-subtle","--text-disabled"],"--accent":["--bg-interactive-low","--bg-brand-low","--bg-neutral-low"],"--accent-foreground":["--text-oninteractive-low","--text-brand-strong","--text-neutral-strong"],"--destructive":["--bg-negative-mid","--bg-negative-subtle"],"--destructive-foreground":["--text-onnegative-subtle","--text-inverse-low"],"--border":["--border-neutral-subtle","--border-default"],"--input":["--border-neutral-subtle","--border-default"],"--ring":["--border-brand-mid","--bg-brand-mid"],"--sidebar":["--layer-1","--bg-neutral-low","--bg-default"],"--sidebar-foreground":["--text-neutral-strong","--text-default"],"--sidebar-primary":["--bg-brand-mid","--bg-brand-strong"],"--sidebar-primary-foreground":["--text-onbrand-strong","--text-inverse-low"],"--sidebar-accent":["--bg-interactive-low","--bg-neutral-low"],"--sidebar-accent-foreground":["--text-oninteractive-low","--text-neutral-strong"],"--sidebar-border":["--border-neutral-subtle","--border-default"],"--sidebar-ring":["--border-brand-mid","--bg-brand-mid"],"--chart-1":["--bg-brand-mid","--bg-brand-strong"],"--chart-2":["--bg-interactive-mid","--bg-interactive-low"],"--chart-3":["--bg-positive-mid","--bg-positive-subtle"],"--chart-4":["--bg-warning-mid","--bg-warning-subtle"],"--chart-5":["--bg-negative-mid","--bg-negative-subtle"]};function Ve(i,e,t){for(let o of e||[])if(i[o])return i[o];return t}function D(i={}){return Object.fromEntries(Object.entries(i?.radius||{}).filter(([,e])=>typeof e?.$value=="string").map(([e,t])=>[e.toLowerCase(),t.$value.replace(/\{([^}]+)\}/g,(o,n)=>`var(--${n.replace(/\./g,"-").toLowerCase()})`)]))}function ee(i={},e={}){let t={};for(let[n,a]of Object.entries(Ae))t[n]=Ve(i,a,je[n]);let o=e.borderRadius||{};return t["--radius"]=o.default||o.md||o.lg||"0.625rem",t["--radius-sm"]=o.sm||"calc(var(--radius) - 4px)",t["--radius-md"]=o.md||"calc(var(--radius) - 2px)",t["--radius-lg"]=o.lg||"var(--radius)",t["--radius-xl"]=o.xl||"calc(var(--radius) + 4px)",t}var V=class{constructor(e={}){this.config=e}hexToOklch(e){if(typeof e=="string"&&/^oklch\(.*\)$/i.test(e.trim()))return e.trim();try{let t=we(e),o=t.rgb(),n=o.red()/255,a=o.green()/255,u=o.blue()/255,r=k=>k<=.04045?k/12.92:Math.pow((k+.055)/1.055,2.4),s=r(n),c=r(a),l=r(u),d=s*.4124564+c*.3575761+l*.1804375,f=s*.2126729+c*.7151522+l*.072175,h=s*.0193339+c*.119192+l*.9503041,b=Math.cbrt(.8189330101*d+.3618667424*f-.1288597137*h),y=Math.cbrt(.0329845436*d+.9293118715*f+.0361456387*h),p=Math.cbrt(.0482003018*d+.2643662691*f+.633851707*h),g=.2104542553*b+.793617785*y-.0040720468*p,$=1.9779984951*b-2.428592205*y+.4505937099*p,v=.0259040371*b+.7827717662*y-.808675766*p,te=Math.sqrt($*$+v*v),x=Math.atan2(v,$)*180/Math.PI;x<0&&(x+=360);let T=Math.round(g*1e3)/1e3,R=Math.round(te*1e3)/1e3,N=Math.round(x*100)/100,_=t.alpha();if(_<1){let k=Math.round(_*100)/100;return`oklch(${T} ${R} ${N} / ${k})`}return`oklch(${T} ${R} ${N})`}catch(t){throw new Fe(`Failed to convert color ${e}: ${t.message}`,e)}}processColors(e){let t={},o={},n={backgroundColor:{},textColor:{},borderColor:{}};if(!e||typeof e!="object")return console.log(" \u26A0\uFE0F No valid color data to process"),{variables:t,colorMap:o,utilities:n};let a=(u,r="")=>{for(let[s,c]of Object.entries(u))if(c&&typeof c=="object")if(c.$value){let l=r?`${r}-${s}`:s,d=`--color-${l}`,f=this.hexToOklch(c.$value);t[d]=f,o[l]=d;let h=`var(${d})`;n.backgroundColor[l]=h,n.textColor[l]=h,n.borderColor[l]=h}else{let l=r?`${r}-${s}`:s;a(c,l)}};return e&&(e.colors?a(e.colors):a(e)),{variables:t,colorMap:o,utilities:n}}processSemanticTokens(e,t){let o={},n={backgroundColor:{},textColor:{},borderColor:{}},a=s=>s.replace(/ /g,"").replace(/\./g,"-").toLowerCase(),u=s=>{if(typeof s!="string")return null;let c=s.match(/^\{(.+)\}$/);if(!c)return null;let l=c[1].split(".");return l[0]==="colors"&&l.length>1?l[1]==="colors"&&l.length>2?l.slice(2).join("-"):l.slice(1).join("-"):l.join("-")},r=(s,c)=>{if(e[s])for(let[l,d]of Object.entries(e[s])){if(l==="disabled"){let f=u(d.$value);if(f){let h=t[f];if(h){let b=`--${s}-disabled`;o[b]=`var(${h})`,n[c].disabled=`var(${b})`}}continue}for(let[f,h]of Object.entries(d))for(let[b,y]of Object.entries(h)){let p=a(`${l}-${f}-${b}`);p.endsWith("-default")&&(p=p.slice(0,-8));let g=`--${s}-${p}`,$=u(y.$value);if($){let v=t[$];v&&(o[g]=`var(${v})`,n[c][p]=`var(${g})`)}else if(y.$value){let v=this.hexToOklch(y.$value);o[g]=v,n[c][p]=`var(${g})`}}}};if(r("bg","backgroundColor"),r("text","textColor"),r("border","borderColor"),e.layer)for(let[s,c]of Object.entries(e.layer)){let l=`--layer-${s}`,d=u(c.$value);if(d){let f=d.replace(/\./g,"-").toLowerCase();if(f.endsWith("-default")&&(f=f.slice(0,-8)),f.startsWith("bg-")||f.startsWith("text-")||f.startsWith("border-")){let h=`--${f}`;o[l]=`var(${h})`,n.backgroundColor[`layer-${s}`]=`var(${l})`}else{let h=t[f];h&&(o[l]=`var(${h})`,n.backgroundColor[`layer-${s}`]=`var(${l})`)}}else if(c.$value){let f=this.hexToOklch(c.$value);o[l]=f,n.backgroundColor[`layer-${s}`]=`var(${l})`}}if(e.overlay)for(let[s,c]of Object.entries(e.overlay)){let l=`--overlay-${s}`;c.$value&&(o[l]=c.$value,n.backgroundColor[`overlay-${s}`]=`var(${l})`)}if(e.icon){n.fill||(n.fill={});for(let[s,c]of Object.entries(e.icon)){if(s==="disabled"){let l=u(c.$value);if(l){let d=t[l];if(d){let f="--icon-disabled";o[f]=`var(${d})`,n.textColor["icon-disabled"]=`var(${f})`,n.fill["icon-disabled"]=`var(${f})`}}continue}for(let[l,d]of Object.entries(c))for(let[f,h]of Object.entries(d)){let b=a(`icon-${s}-${l}-${f}`);b.endsWith("-default")&&(b=b.slice(0,-8));let y=`--${b}`,p=u(h.$value);if(p){let g=t[p];g&&(o[y]=`var(${g})`,n.textColor[b]=`var(${y})`,n.fill[b]=`var(${y})`)}}}}return{semanticVariables:o,tokens:n}}async fetchFontCss(e,{timeoutMs:t=1e4}={}){if(!Number.isFinite(t)||t<=0)throw new Error("Font CSS timeout must be positive");return new Promise((o,n)=>{let a,u=setTimeout(()=>{let s=new Error("Font CSS request timed out");n(s),a?.destroy(s)},t);u.unref?.();let r=s=>{clearTimeout(u),n(s)};try{a=xe.get(e,s=>{let c="";if(s.on("error",r),s.on("aborted",()=>r(new Error("Font CSS response was interrupted"))),s.statusCode!==200){r(new Error(`Failed to fetch font CSS: ${s.statusCode}`)),s.destroy?.();return}s.on("data",l=>{c+=l}),s.on("end",()=>{clearTimeout(u),o(c)})}),a.on("error",r)}catch(s){r(s)}})}parseFontFaces(e){let t=/@font-face\s*{([^}]+)}/g,o=[],n;for(;(n=t.exec(e))!==null;){let a=n[1].trim().split(";").filter(Boolean),u={};a.forEach(r=>{let s=r.indexOf(":");if(s!==-1){let c=r.slice(0,s).trim(),l=r.slice(s+1).trim();c==="font-family"?u[c]=l.replace(/["']/g,""):u[c]=l}}),u.src&&(u.src=u.src.replace(/url\(["']?/,"url('").replace(/["']?\)/,"')")),o.push(u)}return o}async processFonts(e){let t=[];if(!e||typeof e!="object")return t;let o=Object.keys(e).filter(n=>n.startsWith("font"));for(let n of o){let a=e[n];if(typeof a=="string"&&a.startsWith("http"))try{let u=await this.fetchFontCss(a),r=this.parseFontFaces(u);r.length>0&&t.push(...r)}catch(u){console.warn(`Failed to process font ${n}:`,u.message)}}return t}processFontFamilies(e){let t={};if(!e||!e.font||!e.font.family)return t;let o=e.font.family;for(let[n,a]of Object.entries(o))if(a&&a.$value){let u=n.toLowerCase(),r=a.$value;typeof r=="string"&&r.startsWith("{")&&r.endsWith("}")&&(r=r.slice(1,-1));let s=c=>c.split(" ").map(l=>l.charAt(0).toUpperCase()+l.slice(1).toLowerCase()).join(" ");if(r.includes(","))t[u]=r;else{let c=s(r);c.includes(" ")&&!c.startsWith('"')&&!c.startsWith("'")?t[u]=`"${c}", sans-serif`:t[u]=`${c}, sans-serif`}}return t}processAnimations(e){let t={},o={};if(!e||typeof e!="object")return{keyframes:t,animations:o};for(let[n,a]of Object.entries(e))if(a&&typeof a=="object"){let u=`${n}`;if(a.keyframes){let s={};for(let[c,l]of Object.entries(a.keyframes))l&&typeof l=="object"&&(s[c]=l);t[u]=s}let r=[u,a.duration||"1s",a.easing||"ease",a.delay||"0s",a.iterations||"1",a.direction||"normal",a.fillMode||"none"].join(" ");o[n]=r}return{keyframes:t,animations:o}}generateSafelistClasses(e){let t=[];if(e.backgroundColor)for(let o of Object.keys(e.backgroundColor))t.push(`bg-${o}`);if(e.textColor)for(let o of Object.keys(e.textColor))t.push(`text-${o}`);if(e.borderColor)for(let o of Object.keys(e.borderColor))t.push(`border-${o}`);if(e.fill)for(let o of Object.keys(e.fill))t.push(`fill-${o}`),o.startsWith("icon-")&&t.push(`text-${o}`);if(e.fontFamily)for(let o of Object.keys(e.fontFamily))t.push(`font-${o}`);if(e.animations)for(let o of Object.keys(e.animations))t.push(`animate-${o}`);return t}extractClassesFromComponentsConfig(e){let t=new Set,o=a=>{typeof a=="string"&&a.split(/\s+/).filter(r=>r.length>0).forEach(r=>{t.add(r)})},n=a=>{if(!(!a||typeof a!="object"))for(let u in a){if(u==="icons")continue;let r=a[u];typeof r=="string"?o(r):typeof r=="object"&&n(r)}};return e&&n(e),Array.from(t).filter(Q).sort()}generateClassesContent(e=[]){e=e.filter(Q);let t=["/*"," * Frontfriend Component Classes"," *"," * This file contains all classes used in Frontfriend component configs."," * Tailwind v4 scans this file via @source to generate utilities."," * DO NOT EDIT - Auto-generated by frontfriend CLI"," */","","/*"," * Classes:"],o=" * ";for(let n of[...new Set(e)].sort())o.length+n.length+1>100?(t.push(o),o=` * ${n}`):o+=(o===" * "?"":" ")+n;return o!==" * "&&t.push(o),t.push(" */"),t.join(`
|
|
4
|
-
|
|
1
|
+
var $=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports);var L=$((He,I)=>{var h=require("fs");function le(a){try{let e=h.readFileSync(a,"utf8");return JSON.parse(e)}catch(e){if(e.code==="ENOENT")return null;throw e}}function ce(a){try{return h.readFileSync(a,"utf8").replace(/^\uFEFF/,"")}catch(e){if(e.code==="ENOENT")return null;throw e}}function fe(a,e,r=2){let t=JSON.stringify(e,null,r);h.writeFileSync(a,t,"utf8")}function me(a,e){h.writeFileSync(a,e,"utf8")}function de(a,e){if(e==null||typeof e=="object"&&Object.keys(e).length===0||Array.isArray(e)&&e.length===0){let t=`module.exports = ${Array.isArray(e)?"[]":"{}"};`;h.writeFileSync(a,t,"utf8")}else{let r=`module.exports = ${JSON.stringify(e,null,2)};`;h.writeFileSync(a,r,"utf8")}}function ue(a){return h.existsSync(a)}function pe(a){h.mkdirSync(a,{recursive:!0})}function he(a){h.rmSync(a,{recursive:!0,force:!0})}function ve(a){h.rmSync(a,{force:!0})}function ge(a,e){h.mkdirSync(require("path").dirname(a),{recursive:!0,mode:448});let r=`${a}.${process.pid}.${Date.now()}.tmp`;try{h.writeFileSync(r,`${JSON.stringify(e,null,2)}
|
|
2
|
+
`,{mode:384}),h.renameSync(r,a);try{h.chmodSync(a,384)}catch{}}finally{h.rmSync(r,{force:!0})}}async function be(a,e,r){h.mkdirSync(require("path").dirname(a),{recursive:!0,mode:448});let t=`${a}.lock`,o=Date.now()+2e4,n;for(;n===void 0;)try{n=h.openSync(t,"wx",384),h.writeFileSync(n,String(process.pid))}catch(d){if(d.code!=="EEXIST")throw d;try{let l=Number(h.readFileSync(t,"utf8"));if(Number.isInteger(l)&&l>0)try{process.kill(l,0)}catch(c){if(c.code==="ESRCH"){h.unlinkSync(t);continue}}}catch(l){if(l.code==="ENOENT")continue}if(Date.now()>=o)throw r();await new Promise(l=>setTimeout(l,50))}try{return await e()}finally{h.closeSync(n),h.unlinkSync(t)}}I.exports={writePrivateJsonFileAtomic:ge,withPrivateFileLock:be,readJsonFileSafe:le,readFileSafe:ce,writeJsonFile:fe,writeTextFile:me,writeModuleExportsFile:de,fileExists:ue,ensureDirectoryExists:pe,removeDirectory:he,removeFile:ve}});var M=$((Je,W)=>{var F=class extends Error{constructor(e,r,t){super(e),this.name="APIError",this.statusCode=r,this.url=t,this.code=`API_${r}`}},O=class extends Error{constructor(e,r){super(e),this.name="CacheError",this.operation=r,this.code=`CACHE_${r.toUpperCase()}`}},z=class extends Error{constructor(e,r){super(e),this.name="ConfigError",this.field=r,this.code=r?`CONFIG_${String(r).toUpperCase()}`:"CONFIG_ERROR"}},E=class extends Error{constructor(e,r){super(e),this.name="ProcessingError",this.token=r,this.code="PROCESSING_ERROR"}};W.exports={APIError:F,CacheError:O,ConfigError:z,ProcessingError:E}});var J=$((Ge,H)=>{var P=["open","closed","checked","unchecked","indeterminate","active"],q={open:['[data-expanded]:not([data-expanded="false"])','[data-popup-open]:not([data-popup-open="false"])','[data-panel-open]:not([data-panel-open="false"])']},U="on",K=["/* Dark mode follows the root class the theme picker toggles. */","@custom-variant dark {"," &:is(.dark, .dark *) {"," @slot;"," }","}",""],j=[...K,"/* Cross-primitive state variants (Radix `data-state=x`, Base UI `data-x`). */",...P.flatMap(a=>{let e=[`[data-state="${a}"]`,`[data-${a}]:not([data-${a}="false"])`,...q[a]||[]];return[`@custom-variant data-${a} {`,...e.map((r,t)=>` &:where(${r})${t===e.length-1?" {":","}`)," @slot;"," }","}",""]}),`@custom-variant data-${U} {`,' &:where([data-state="on"]),',' &:where([aria-pressed="true"]) {'," @slot;"," }","}","","@custom-variant data-selected {",' &:where([data-selected="true"]) {'," @slot;"," }","}","","@custom-variant data-disabled {",' &:where([data-disabled="true"]),',' &:where([data-disabled]:not([data-disabled="false"])) {'," @slot;"," }","}","",...["horizontal","vertical"].flatMap(a=>[`@custom-variant data-${a} {`,` &:where([data-orientation="${a}"]) {`," @slot;"," }","}",""])],ye=j.filter(a=>a.startsWith("@custom-variant ")).map(a=>a.slice(16).replace(" {",""));function ke(){return j.join(`
|
|
3
|
+
`)}H.exports={CROSS_PRIMITIVE_STATES:P,DARK_VARIANT_CSS:K,EXTRA_STATE_MATCHERS:q,PRESSED_STATE:U,STATE_VARIANT_CSS:j,STATE_VARIANT_NAMES:ye,stateVariantCss:ke}});var B=$((Be,G)=>{var $e=`
|
|
4
|
+
@property --scroll-fade-t {
|
|
5
|
+
syntax: "<length-percentage>";
|
|
6
|
+
inherits: false;
|
|
7
|
+
initial-value: 0px;
|
|
8
|
+
}
|
|
9
|
+
@property --scroll-fade-b {
|
|
10
|
+
syntax: "<length-percentage>";
|
|
11
|
+
inherits: false;
|
|
12
|
+
initial-value: 0px;
|
|
13
|
+
}
|
|
14
|
+
@property --scroll-fade-s {
|
|
15
|
+
syntax: "<length-percentage>";
|
|
16
|
+
inherits: false;
|
|
17
|
+
initial-value: 0px;
|
|
18
|
+
}
|
|
19
|
+
@property --scroll-fade-e {
|
|
20
|
+
syntax: "<length-percentage>";
|
|
21
|
+
inherits: false;
|
|
22
|
+
initial-value: 0px;
|
|
23
|
+
}
|
|
24
|
+
@property --scroll-fade-mask {
|
|
25
|
+
syntax: "*";
|
|
26
|
+
inherits: false;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@layer theme {
|
|
30
|
+
@keyframes scroll-fade-reveal-t {
|
|
31
|
+
from {
|
|
32
|
+
--scroll-fade-t: 0px;
|
|
33
|
+
}
|
|
34
|
+
to {
|
|
35
|
+
--scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
@keyframes scroll-fade-reveal-b {
|
|
39
|
+
from {
|
|
40
|
+
--scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
|
|
41
|
+
}
|
|
42
|
+
to {
|
|
43
|
+
--scroll-fade-b: 0px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
@keyframes scroll-fade-reveal-s {
|
|
47
|
+
from {
|
|
48
|
+
--scroll-fade-s: 0px;
|
|
49
|
+
}
|
|
50
|
+
to {
|
|
51
|
+
--scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
@keyframes scroll-fade-reveal-e {
|
|
55
|
+
from {
|
|
56
|
+
--scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
|
|
57
|
+
}
|
|
58
|
+
to {
|
|
59
|
+
--scroll-fade-e: 0px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@utility scroll-fade {
|
|
65
|
+
--_scroll-fade-size-t: var(
|
|
66
|
+
--scroll-fade-t-size,
|
|
67
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
68
|
+
);
|
|
69
|
+
--_scroll-fade-size-b: var(
|
|
70
|
+
--scroll-fade-b-size,
|
|
71
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
72
|
+
);
|
|
73
|
+
--scroll-fade-block: linear-gradient(
|
|
74
|
+
to bottom,
|
|
75
|
+
transparent 0,
|
|
76
|
+
#000 var(--scroll-fade-t, 0px),
|
|
77
|
+
#000 calc(100% - var(--scroll-fade-b, 0px)),
|
|
78
|
+
transparent 100%
|
|
79
|
+
);
|
|
80
|
+
-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
|
|
81
|
+
mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
|
|
82
|
+
-webkit-mask-composite: source-in;
|
|
83
|
+
mask-composite: intersect;
|
|
84
|
+
-webkit-mask-repeat: no-repeat;
|
|
85
|
+
mask-repeat: no-repeat;
|
|
86
|
+
|
|
87
|
+
@supports (animation-timeline: scroll()) {
|
|
88
|
+
animation:
|
|
89
|
+
scroll-fade-reveal-t 1ms ease-in-out,
|
|
90
|
+
scroll-fade-reveal-b 1ms ease-in-out;
|
|
91
|
+
--_scroll-fade-timeline: scroll(self y), scroll(self y);
|
|
92
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
93
|
+
animation-range:
|
|
94
|
+
0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
|
|
95
|
+
calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
|
|
96
|
+
animation-fill-mode: both;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@supports not (animation-timeline: scroll()) {
|
|
100
|
+
--scroll-fade-t: var(--_scroll-fade-size-t);
|
|
101
|
+
--scroll-fade-b: var(--_scroll-fade-size-b);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@utility scroll-fade-y {
|
|
106
|
+
--_scroll-fade-size-t: var(
|
|
107
|
+
--scroll-fade-t-size,
|
|
108
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
109
|
+
);
|
|
110
|
+
--_scroll-fade-size-b: var(
|
|
111
|
+
--scroll-fade-b-size,
|
|
112
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
113
|
+
);
|
|
114
|
+
--scroll-fade-block: linear-gradient(
|
|
115
|
+
to bottom,
|
|
116
|
+
transparent 0,
|
|
117
|
+
#000 var(--scroll-fade-t, 0px),
|
|
118
|
+
#000 calc(100% - var(--scroll-fade-b, 0px)),
|
|
119
|
+
transparent 100%
|
|
120
|
+
);
|
|
121
|
+
-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
|
|
122
|
+
mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
|
|
123
|
+
-webkit-mask-composite: source-in;
|
|
124
|
+
mask-composite: intersect;
|
|
125
|
+
-webkit-mask-repeat: no-repeat;
|
|
126
|
+
mask-repeat: no-repeat;
|
|
127
|
+
|
|
128
|
+
@supports (animation-timeline: scroll()) {
|
|
129
|
+
animation:
|
|
130
|
+
scroll-fade-reveal-t 1ms ease-in-out,
|
|
131
|
+
scroll-fade-reveal-b 1ms ease-in-out;
|
|
132
|
+
--_scroll-fade-timeline: scroll(self y), scroll(self y);
|
|
133
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
134
|
+
animation-range:
|
|
135
|
+
0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
|
|
136
|
+
calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
|
|
137
|
+
animation-fill-mode: both;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@supports not (animation-timeline: scroll()) {
|
|
141
|
+
--scroll-fade-t: var(--_scroll-fade-size-t);
|
|
142
|
+
--scroll-fade-b: var(--_scroll-fade-size-b);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@utility scroll-fade-x {
|
|
147
|
+
--_scroll-fade-size-s: var(
|
|
148
|
+
--scroll-fade-s-size,
|
|
149
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
150
|
+
);
|
|
151
|
+
--_scroll-fade-size-e: var(
|
|
152
|
+
--scroll-fade-e-size,
|
|
153
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
154
|
+
);
|
|
155
|
+
--scroll-fade-inline: linear-gradient(
|
|
156
|
+
to right,
|
|
157
|
+
transparent 0,
|
|
158
|
+
#000 var(--scroll-fade-s, 0px),
|
|
159
|
+
#000 calc(100% - var(--scroll-fade-e, 0px)),
|
|
160
|
+
transparent 100%
|
|
161
|
+
);
|
|
162
|
+
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
163
|
+
--scroll-fade-inline: linear-gradient(
|
|
164
|
+
to left,
|
|
165
|
+
transparent 0,
|
|
166
|
+
#000 var(--scroll-fade-s, 0px),
|
|
167
|
+
#000 calc(100% - var(--scroll-fade-e, 0px)),
|
|
168
|
+
transparent 100%
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
|
|
172
|
+
mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
|
|
173
|
+
-webkit-mask-composite: source-in;
|
|
174
|
+
mask-composite: intersect;
|
|
175
|
+
-webkit-mask-repeat: no-repeat;
|
|
176
|
+
mask-repeat: no-repeat;
|
|
177
|
+
|
|
178
|
+
@supports (animation-timeline: scroll()) {
|
|
179
|
+
animation:
|
|
180
|
+
scroll-fade-reveal-s 1ms ease-in-out,
|
|
181
|
+
scroll-fade-reveal-e 1ms ease-in-out;
|
|
182
|
+
--_scroll-fade-timeline: scroll(self inline), scroll(self inline);
|
|
183
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
184
|
+
animation-range:
|
|
185
|
+
0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
|
|
186
|
+
calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
|
|
187
|
+
animation-fill-mode: both;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@supports not (animation-timeline: scroll()) {
|
|
191
|
+
--scroll-fade-s: var(--_scroll-fade-size-s);
|
|
192
|
+
--scroll-fade-e: var(--_scroll-fade-size-e);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@utility scroll-fade-t {
|
|
197
|
+
--_scroll-fade-size-t: var(
|
|
198
|
+
--scroll-fade-t-size,
|
|
199
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
200
|
+
);
|
|
201
|
+
--scroll-fade-mask: linear-gradient(
|
|
202
|
+
to bottom,
|
|
203
|
+
transparent 0,
|
|
204
|
+
#000 var(--scroll-fade-t, 0px),
|
|
205
|
+
#000 100%
|
|
206
|
+
);
|
|
207
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
208
|
+
mask-image: var(--scroll-fade-mask);
|
|
209
|
+
-webkit-mask-composite: source-in;
|
|
210
|
+
mask-composite: intersect;
|
|
211
|
+
-webkit-mask-repeat: no-repeat;
|
|
212
|
+
mask-repeat: no-repeat;
|
|
213
|
+
|
|
214
|
+
@supports (animation-timeline: scroll()) {
|
|
215
|
+
animation: scroll-fade-reveal-t 1ms ease-in-out;
|
|
216
|
+
--_scroll-fade-timeline: scroll(self y);
|
|
217
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
218
|
+
animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
|
|
219
|
+
animation-fill-mode: both;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@supports not (animation-timeline: scroll()) {
|
|
223
|
+
--scroll-fade-t: var(--_scroll-fade-size-t);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@utility scroll-fade-b {
|
|
228
|
+
--_scroll-fade-size-b: var(
|
|
229
|
+
--scroll-fade-b-size,
|
|
230
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
231
|
+
);
|
|
232
|
+
--scroll-fade-mask: linear-gradient(
|
|
233
|
+
to bottom,
|
|
234
|
+
#000 0,
|
|
235
|
+
#000 calc(100% - var(--scroll-fade-b, 0px)),
|
|
236
|
+
transparent 100%
|
|
237
|
+
);
|
|
238
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
239
|
+
mask-image: var(--scroll-fade-mask);
|
|
240
|
+
-webkit-mask-composite: source-in;
|
|
241
|
+
mask-composite: intersect;
|
|
242
|
+
-webkit-mask-repeat: no-repeat;
|
|
243
|
+
mask-repeat: no-repeat;
|
|
244
|
+
|
|
245
|
+
@supports (animation-timeline: scroll()) {
|
|
246
|
+
animation: scroll-fade-reveal-b 1ms ease-in-out;
|
|
247
|
+
--_scroll-fade-timeline: scroll(self y);
|
|
248
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
249
|
+
animation-range: calc(
|
|
250
|
+
100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
|
|
251
|
+
)
|
|
252
|
+
100%;
|
|
253
|
+
animation-fill-mode: both;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@supports not (animation-timeline: scroll()) {
|
|
257
|
+
--scroll-fade-b: var(--_scroll-fade-size-b);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
@utility scroll-fade-l {
|
|
262
|
+
--_scroll-fade-size-s: var(
|
|
263
|
+
--scroll-fade-s-size,
|
|
264
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
265
|
+
);
|
|
266
|
+
--scroll-fade-mask: linear-gradient(
|
|
267
|
+
to right,
|
|
268
|
+
transparent 0,
|
|
269
|
+
#000 var(--scroll-fade-s, 0px),
|
|
270
|
+
#000 100%
|
|
271
|
+
);
|
|
272
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
273
|
+
mask-image: var(--scroll-fade-mask);
|
|
274
|
+
-webkit-mask-composite: source-in;
|
|
275
|
+
mask-composite: intersect;
|
|
276
|
+
-webkit-mask-repeat: no-repeat;
|
|
277
|
+
mask-repeat: no-repeat;
|
|
278
|
+
|
|
279
|
+
@supports (animation-timeline: scroll()) {
|
|
280
|
+
animation: scroll-fade-reveal-s 1ms ease-in-out;
|
|
281
|
+
--_scroll-fade-timeline: scroll(self x);
|
|
282
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
283
|
+
animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
|
|
284
|
+
animation-fill-mode: both;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
@supports not (animation-timeline: scroll()) {
|
|
288
|
+
--scroll-fade-s: var(--_scroll-fade-size-s);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
@utility scroll-fade-r {
|
|
293
|
+
--_scroll-fade-size-e: var(
|
|
294
|
+
--scroll-fade-e-size,
|
|
295
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
296
|
+
);
|
|
297
|
+
--scroll-fade-mask: linear-gradient(
|
|
298
|
+
to right,
|
|
299
|
+
#000 0,
|
|
300
|
+
#000 calc(100% - var(--scroll-fade-e, 0px)),
|
|
301
|
+
transparent 100%
|
|
302
|
+
);
|
|
303
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
304
|
+
mask-image: var(--scroll-fade-mask);
|
|
305
|
+
-webkit-mask-composite: source-in;
|
|
306
|
+
mask-composite: intersect;
|
|
307
|
+
-webkit-mask-repeat: no-repeat;
|
|
308
|
+
mask-repeat: no-repeat;
|
|
309
|
+
|
|
310
|
+
@supports (animation-timeline: scroll()) {
|
|
311
|
+
animation: scroll-fade-reveal-e 1ms ease-in-out;
|
|
312
|
+
--_scroll-fade-timeline: scroll(self x);
|
|
313
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
314
|
+
animation-range: calc(
|
|
315
|
+
100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
|
|
316
|
+
)
|
|
317
|
+
100%;
|
|
318
|
+
animation-fill-mode: both;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@supports not (animation-timeline: scroll()) {
|
|
322
|
+
--scroll-fade-e: var(--_scroll-fade-size-e);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
@utility scroll-fade-s {
|
|
327
|
+
--_scroll-fade-size-s: var(
|
|
328
|
+
--scroll-fade-s-size,
|
|
329
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
330
|
+
);
|
|
331
|
+
--scroll-fade-mask: linear-gradient(
|
|
332
|
+
to right,
|
|
333
|
+
transparent 0,
|
|
334
|
+
#000 var(--scroll-fade-s, 0px),
|
|
335
|
+
#000 100%
|
|
336
|
+
);
|
|
337
|
+
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
338
|
+
--scroll-fade-mask: linear-gradient(
|
|
339
|
+
to left,
|
|
340
|
+
transparent 0,
|
|
341
|
+
#000 var(--scroll-fade-s, 0px),
|
|
342
|
+
#000 100%
|
|
343
|
+
);
|
|
344
|
+
}
|
|
345
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
346
|
+
mask-image: var(--scroll-fade-mask);
|
|
347
|
+
-webkit-mask-composite: source-in;
|
|
348
|
+
mask-composite: intersect;
|
|
349
|
+
-webkit-mask-repeat: no-repeat;
|
|
350
|
+
mask-repeat: no-repeat;
|
|
351
|
+
|
|
352
|
+
@supports (animation-timeline: scroll()) {
|
|
353
|
+
animation: scroll-fade-reveal-s 1ms ease-in-out;
|
|
354
|
+
--_scroll-fade-timeline: scroll(self inline);
|
|
355
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
356
|
+
animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
|
|
357
|
+
animation-fill-mode: both;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
@supports not (animation-timeline: scroll()) {
|
|
361
|
+
--scroll-fade-s: var(--_scroll-fade-size-s);
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
@utility scroll-fade-e {
|
|
366
|
+
--_scroll-fade-size-e: var(
|
|
367
|
+
--scroll-fade-e-size,
|
|
368
|
+
var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
|
|
369
|
+
);
|
|
370
|
+
--scroll-fade-mask: linear-gradient(
|
|
371
|
+
to right,
|
|
372
|
+
#000 0,
|
|
373
|
+
#000 calc(100% - var(--scroll-fade-e, 0px)),
|
|
374
|
+
transparent 100%
|
|
375
|
+
);
|
|
376
|
+
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
377
|
+
--scroll-fade-mask: linear-gradient(
|
|
378
|
+
to left,
|
|
379
|
+
#000 0,
|
|
380
|
+
#000 calc(100% - var(--scroll-fade-e, 0px)),
|
|
381
|
+
transparent 100%
|
|
382
|
+
);
|
|
383
|
+
}
|
|
384
|
+
-webkit-mask-image: var(--scroll-fade-mask);
|
|
385
|
+
mask-image: var(--scroll-fade-mask);
|
|
386
|
+
-webkit-mask-composite: source-in;
|
|
387
|
+
mask-composite: intersect;
|
|
388
|
+
-webkit-mask-repeat: no-repeat;
|
|
389
|
+
mask-repeat: no-repeat;
|
|
390
|
+
|
|
391
|
+
@supports (animation-timeline: scroll()) {
|
|
392
|
+
animation: scroll-fade-reveal-e 1ms ease-in-out;
|
|
393
|
+
--_scroll-fade-timeline: scroll(self inline);
|
|
394
|
+
animation-timeline: var(--_scroll-fade-timeline);
|
|
395
|
+
animation-range: calc(
|
|
396
|
+
100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
|
|
397
|
+
)
|
|
398
|
+
100%;
|
|
399
|
+
animation-fill-mode: both;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
@supports not (animation-timeline: scroll()) {
|
|
403
|
+
--scroll-fade-e: var(--_scroll-fade-size-e);
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
@utility scroll-fade-* {
|
|
408
|
+
--scroll-fade-size: calc(var(--spacing) * --value(integer));
|
|
409
|
+
--scroll-fade-size: --value([length], [percentage]);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
@utility scroll-fade-t-* {
|
|
413
|
+
--scroll-fade-t-size: calc(var(--spacing) * --value(integer));
|
|
414
|
+
--scroll-fade-t-size: --value([length], [percentage]);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
@utility scroll-fade-b-* {
|
|
418
|
+
--scroll-fade-b-size: calc(var(--spacing) * --value(integer));
|
|
419
|
+
--scroll-fade-b-size: --value([length], [percentage]);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
@utility scroll-fade-s-* {
|
|
423
|
+
--scroll-fade-s-size: calc(var(--spacing) * --value(integer));
|
|
424
|
+
--scroll-fade-s-size: --value([length], [percentage]);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
@utility scroll-fade-e-* {
|
|
428
|
+
--scroll-fade-e-size: calc(var(--spacing) * --value(integer));
|
|
429
|
+
--scroll-fade-e-size: --value([length], [percentage]);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
@utility scroll-fade-none {
|
|
433
|
+
--scroll-fade-mask: none;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
@property --shimmer-angle {
|
|
438
|
+
syntax: "<angle>";
|
|
439
|
+
inherits: true;
|
|
440
|
+
initial-value: 20deg;
|
|
441
|
+
}
|
|
442
|
+
@property --shimmer-image {
|
|
443
|
+
syntax: "*";
|
|
444
|
+
inherits: false;
|
|
445
|
+
}
|
|
446
|
+
@property --shimmer-text-fill {
|
|
447
|
+
syntax: "*";
|
|
448
|
+
inherits: false;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
@layer theme {
|
|
452
|
+
@keyframes tw-shimmer {
|
|
453
|
+
from {
|
|
454
|
+
background-position: 100% 0;
|
|
455
|
+
}
|
|
456
|
+
to {
|
|
457
|
+
background-position: 0 0;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
@utility shimmer {
|
|
463
|
+
--_spread: var(--shimmer-spread, calc(3ch + 40px));
|
|
464
|
+
--_base: currentColor;
|
|
465
|
+
--_highlight: var(
|
|
466
|
+
--shimmer-color,
|
|
467
|
+
oklch(from currentColor l c h / calc(alpha* 0.2))
|
|
468
|
+
);
|
|
469
|
+
|
|
470
|
+
background-image: var(
|
|
471
|
+
--shimmer-image,
|
|
472
|
+
linear-gradient(
|
|
473
|
+
calc(90deg + var(--shimmer-angle)),
|
|
474
|
+
var(--_base) calc(50% - var(--_spread)),
|
|
475
|
+
color-mix(in oklch, var(--_highlight), var(--_base) 50%)
|
|
476
|
+
calc(50% - var(--_spread) * 0.5),
|
|
477
|
+
var(--_highlight) 50%,
|
|
478
|
+
color-mix(in oklch, var(--_highlight), var(--_base) 50%)
|
|
479
|
+
calc(50% + var(--_spread) * 0.5),
|
|
480
|
+
var(--_base) calc(50% + var(--_spread))
|
|
481
|
+
)
|
|
482
|
+
);
|
|
483
|
+
background-repeat: no-repeat;
|
|
484
|
+
background-size: calc(200% + var(--_spread) * 2) 100%;
|
|
485
|
+
background-position: 0 0;
|
|
486
|
+
background-clip: text;
|
|
487
|
+
-webkit-background-clip: text;
|
|
488
|
+
-webkit-text-fill-color: var(--shimmer-text-fill, transparent);
|
|
489
|
+
animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
|
|
490
|
+
|
|
491
|
+
@variant dark {
|
|
492
|
+
--_highlight: var(
|
|
493
|
+
--shimmer-color,
|
|
494
|
+
oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
|
|
495
|
+
);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
499
|
+
animation-direction: reverse;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
@media (prefers-reduced-motion: reduce) {
|
|
503
|
+
animation: none;
|
|
504
|
+
background-image: none;
|
|
505
|
+
-webkit-text-fill-color: currentColor;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
@utility shimmer-once {
|
|
510
|
+
animation-iteration-count: 1;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
@utility shimmer-reverse {
|
|
514
|
+
animation-direction: reverse;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
@utility shimmer-none {
|
|
518
|
+
--shimmer-image: none;
|
|
519
|
+
--shimmer-text-fill: currentColor;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
@utility shimmer-color-* {
|
|
523
|
+
--shimmer-color: --value(--color, [color]);
|
|
524
|
+
--shimmer-color: color-mix(
|
|
525
|
+
in oklch,
|
|
526
|
+
--value(--color, [color]) calc(--modifier(integer) * 1%),
|
|
527
|
+
transparent
|
|
528
|
+
);
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
@utility shimmer-duration-* {
|
|
532
|
+
--shimmer-duration: calc(--value(integer) * 1ms);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
@utility shimmer-spread-* {
|
|
536
|
+
--shimmer-spread: calc(var(--spacing) * --value(integer));
|
|
537
|
+
--shimmer-spread: --value([length], [percentage]);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
@utility shimmer-angle-* {
|
|
541
|
+
--shimmer-angle: calc(--value(integer) * 1deg);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
@media (prefers-reduced-motion: reduce) {
|
|
546
|
+
.shimmer {
|
|
547
|
+
animation: none;
|
|
548
|
+
background-image: none;
|
|
549
|
+
-webkit-text-fill-color: currentColor;
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
`;function xe(){return $e}G.exports={motionUtilityCss:xe}});var Z=$((Xe,Y)=>{function X(a,e=[]){return!a||typeof a!="object"?[]:"$value"in a?[[e,a.$value]]:Object.entries(a).flatMap(([r,t])=>X(t,[...e,r]))}function we(a){return a.join("-").replace(/\./g,"_")}function b(a,e){return X(a).map(([r,t])=>[`${e}${we(r)}`,String(t)])}function Se(a){if(!a||typeof a!="object")return{theme:[],root:[]};let e=b(a.spacing,"--spacing-"),r=a.spacing?.["1"]?.$value,t=a.font||{},o=a.motion||{},n=a.layout||{},d=o.easing?.standard?.$value,l=o.duration?.normal?.$value;return{theme:[...r?[["--spacing",String(r)]]:[],...e,...b(t.size,"--text-"),...b(t.weight,"--font-weight-"),...b(t.lineHeight,"--leading-"),...b(t.letterSpacing,"--tracking-"),...b(a.blur,"--blur-"),...b(o.easing,"--ease-"),...d?[["--default-transition-timing-function",String(d)]]:[],...l?[["--default-transition-duration",String(l)]]:[],...b(n.screen,"--breakpoint-")],root:[...b(a.opacity,"--opacity-"),...b(a.border?.width,"--border-width-"),...b(a.border?.style,"--border-style-"),...b(o.duration,"--duration-"),...b(n.maxWidth,"--max-width-"),...b(n.container,"--layout-container-"),...b(n.gutter,"--gutter-")]}}Y.exports={foundationTheme:Se}});var D=$((Ye,Q)=>{var Ce="classes.txt",_e="classes.css";Q.exports={CLASSES_SOURCE_FILE:Ce,CSS_CLASSES_SOURCE_FILE:_e}});var ae=$((Ze,te)=>{var Fe=new Set(["after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]),Oe=new Set(["active","focus","focus-visible","focus-within","hover"]),ze=new Set(["sm","md","lg","xl","2xl","any-pointer-coarse","any-pointer-fine","any-pointer-none","contrast-less","contrast-more","forced-colors","inverted-colors","landscape","motion-reduce","motion-safe","noscript","pointer-coarse","pointer-fine","pointer-none","portrait","print","starting"]),Ee=/^(?:min-|max-|@|supports-|in-(?!range$))/,je=/^\[&(?::(?:active|focus|focus-visible|focus-within|hover))+\]$/;function Ve(a){let e=[],r=0,t=0;for(let o=0;o<a.length;o+=1){let n=a[o];n==="["||n==="("?r+=1:(n==="]"||n===")")&&r>0?r-=1:n===":"&&r===0&&(e.push(a.slice(t,o)),t=o+1)}return e.push(a.slice(t)),{variants:e.slice(0,-1),utility:e[e.length-1]}}function ee(a){return a.replace(/\/[\w-]+$/,"")}function S(a){let e=ee(a);return Fe.has(e)||e.startsWith("[")&&e.includes("::")}function C(a){let e=ee(a);return Oe.has(e)||ze.has(e)?!0:e.startsWith("[")?e.startsWith("[@")||je.test(e):e.startsWith("not-")?C(e.slice(4)):Ee.test(e)}function re(a){if(typeof a!="string"||!a.includes(":"))return null;let e=a.startsWith("!")?"!":"",{variants:r,utility:t}=Ve(a.slice(e.length)),o=null,n=[];for(let i of r)o!==null&&!C(i)&&n.push(i),o===null&&S(i)&&(o=i);if(n.length===0)return null;let d=r.reduce((i,u,p)=>S(u)?p:i,-1),l=r.slice(0,d).filter(i=>!S(i)),c=r.slice(d+1),m=`${e}${[...l,...c.filter(i=>!C(i)),r[d],...c.filter(C),t].join(":")}`,f=r.filter(S),s=f.length>1?`${f.join(" and ")} are pseudo-elements, and a selector can hold only one`:`${n.join(", ")} cannot follow the pseudo-element ${o}; only hover, focus, focus-visible, focus-within, active, in-* and media, container or supports variants can`;return{className:a,pseudoElement:o,chained:n,suggestion:m,reason:s}}function Ae(a){return re(a)===null}te.exports={isCompilableClass:Ae,uncompilableClass:re}});var{fileExists:Qe,readJsonFileSafe:De}=L(),Ne=require("color"),Re=require("https"),er=require("fs"),rr=require("path"),{ProcessingError:Te}=M(),{STATE_VARIANT_CSS:Ie}=J(),{motionUtilityCss:Le}=B(),{foundationTheme:We}=Z(),{CLASSES_SOURCE_FILE:Me}=D(),{isCompilableClass:oe}=ae(),Pe={"--background":"oklch(1 0 0)","--foreground":"oklch(0.145 0 0)","--card":"oklch(1 0 0)","--card-foreground":"oklch(0.145 0 0)","--popover":"oklch(1 0 0)","--popover-foreground":"oklch(0.145 0 0)","--primary":"oklch(0.205 0 0)","--primary-foreground":"oklch(0.985 0 0)","--secondary":"oklch(0.97 0 0)","--secondary-foreground":"oklch(0.205 0 0)","--muted":"oklch(0.97 0 0)","--muted-foreground":"oklch(0.556 0 0)","--accent":"oklch(0.97 0 0)","--accent-foreground":"oklch(0.205 0 0)","--destructive":"oklch(0.577 0.245 27.325)","--destructive-foreground":"oklch(0.985 0 0)","--border":"oklch(0.922 0 0)","--input":"oklch(0.922 0 0)","--ring":"oklch(0.708 0 0)","--sidebar":"oklch(0.985 0 0)","--sidebar-foreground":"oklch(0.145 0 0)","--sidebar-primary":"oklch(0.205 0 0)","--sidebar-primary-foreground":"oklch(0.985 0 0)","--sidebar-accent":"oklch(0.97 0 0)","--sidebar-accent-foreground":"oklch(0.205 0 0)","--sidebar-border":"oklch(0.922 0 0)","--sidebar-ring":"oklch(0.708 0 0)","--chart-1":"oklch(0.646 0.222 41.116)","--chart-2":"oklch(0.6 0.118 184.704)","--chart-3":"oklch(0.398 0.07 227.392)","--chart-4":"oklch(0.828 0.189 84.429)","--chart-5":"oklch(0.769 0.188 70.08)"},qe={"--background":["--bg-default","--bg-neutral-low","--layer-base"],"--foreground":["--text-neutral-strong","--text-default"],"--card":["--layer-1","--bg-neutral-low","--bg-default"],"--card-foreground":["--text-neutral-strong","--text-default"],"--popover":["--layer-1","--bg-neutral-low","--bg-default"],"--popover-foreground":["--text-neutral-strong","--text-default"],"--primary":["--bg-brand-mid","--bg-brand-strong"],"--primary-foreground":["--text-onbrand-strong","--text-inverse-low"],"--secondary":["--bg-interactive-subtle","--bg-neutral-low"],"--secondary-foreground":["--text-oninteractive-subtle","--text-neutral-strong"],"--muted":["--bg-neutral-low","--bg-disabled"],"--muted-foreground":["--text-neutral-subtle","--text-disabled"],"--accent":["--bg-interactive-low","--bg-brand-low","--bg-neutral-low"],"--accent-foreground":["--text-oninteractive-low","--text-brand-strong","--text-neutral-strong"],"--destructive":["--bg-negative-mid","--bg-negative-subtle"],"--destructive-foreground":["--text-onnegative-subtle","--text-inverse-low"],"--border":["--border-neutral-subtle","--border-default"],"--input":["--border-neutral-subtle","--border-default"],"--ring":["--border-brand-mid","--bg-brand-mid"],"--sidebar":["--layer-1","--bg-neutral-low","--bg-default"],"--sidebar-foreground":["--text-neutral-strong","--text-default"],"--sidebar-primary":["--bg-brand-mid","--bg-brand-strong"],"--sidebar-primary-foreground":["--text-onbrand-strong","--text-inverse-low"],"--sidebar-accent":["--bg-interactive-low","--bg-neutral-low"],"--sidebar-accent-foreground":["--text-oninteractive-low","--text-neutral-strong"],"--sidebar-border":["--border-neutral-subtle","--border-default"],"--sidebar-ring":["--border-brand-mid","--bg-brand-mid"],"--chart-1":["--bg-brand-mid","--bg-brand-strong"],"--chart-2":["--bg-interactive-mid","--bg-interactive-low"],"--chart-3":["--bg-positive-mid","--bg-positive-subtle"],"--chart-4":["--bg-warning-mid","--bg-warning-subtle"],"--chart-5":["--bg-negative-mid","--bg-negative-subtle"]};function Ue(a,e,r){for(let t of e||[])if(a[t])return a[t];return r}function se(a={}){return Object.fromEntries(Object.entries(a?.radius||{}).filter(([,e])=>typeof e?.$value=="string").map(([e,r])=>[e.toLowerCase(),r.$value.replace(/\{([^}]+)\}/g,(t,o)=>`var(--${o.replace(/\./g,"-").toLowerCase()})`)]))}function ie(a={},e={}){let r={};for(let[o,n]of Object.entries(qe))r[o]=Ue(a,n,Pe[o]);let t=e.borderRadius||{};return r["--radius"]=t.default||t.md||t.lg||"0.625rem",r["--radius-sm"]=t.sm||"calc(var(--radius) - 4px)",r["--radius-md"]=t.md||"calc(var(--radius) - 2px)",r["--radius-lg"]=t.lg||"var(--radius)",r["--radius-xl"]=t.xl||"calc(var(--radius) + 4px)",r}var V=class{constructor(e={}){this.config=e}hexToOklch(e){if(typeof e=="string"&&/^oklch\(.*\)$/i.test(e.trim()))return e.trim();try{let r=Ne(e),t=r.rgb(),o=t.red()/255,n=t.green()/255,d=t.blue()/255,l=w=>w<=.04045?w/12.92:Math.pow((w+.055)/1.055,2.4),c=l(o),m=l(n),f=l(d),s=c*.4124564+m*.3575761+f*.1804375,i=c*.2126729+m*.7151522+f*.072175,u=c*.0193339+m*.119192+f*.9503041,p=Math.cbrt(.8189330101*s+.3618667424*i-.1288597137*u),v=Math.cbrt(.0329845436*s+.9293118715*i+.0361456387*u),g=Math.cbrt(.0482003018*s+.2643662691*i+.633851707*u),y=.2104542553*p+.793617785*v-.0040720468*g,x=1.9779984951*p-2.428592205*v+.4505937099*g,k=.0259040371*p+.7827717662*v-.808675766*g,ne=Math.sqrt(x*x+k*k),_=Math.atan2(k,x)*180/Math.PI;_<0&&(_+=360);let A=Math.round(y*1e3)/1e3,N=Math.round(ne*1e3)/1e3,R=Math.round(_*100)/100,T=r.alpha();if(T<1){let w=Math.round(T*100)/100;return`oklch(${A} ${N} ${R} / ${w})`}return`oklch(${A} ${N} ${R})`}catch(r){throw new Te(`Failed to convert color ${e}: ${r.message}`,e)}}processColors(e){let r={},t={},o={backgroundColor:{},textColor:{},borderColor:{}};if(!e||typeof e!="object")return console.log(" \u26A0\uFE0F No valid color data to process"),{variables:r,colorMap:t,utilities:o};let n=(d,l="")=>{for(let[c,m]of Object.entries(d))if(m&&typeof m=="object")if(m.$value){let f=l?`${l}-${c}`:c,s=`--color-${f}`,i=this.hexToOklch(m.$value);r[s]=i,t[f]=s;let u=`var(${s})`;o.backgroundColor[f]=u,o.textColor[f]=u,o.borderColor[f]=u}else{let f=l?`${l}-${c}`:c;n(m,f)}};return e&&(e.colors?n(e.colors):n(e)),{variables:r,colorMap:t,utilities:o}}processSemanticTokens(e,r){let t={},o={backgroundColor:{},textColor:{},borderColor:{}},n=c=>c.replace(/ /g,"").replace(/\./g,"-").toLowerCase(),d=c=>{if(typeof c!="string")return null;let m=c.match(/^\{(.+)\}$/);if(!m)return null;let f=m[1].split(".");return f[0]==="colors"&&f.length>1?f[1]==="colors"&&f.length>2?f.slice(2).join("-"):f.slice(1).join("-"):f.join("-")},l=(c,m)=>{if(e[c])for(let[f,s]of Object.entries(e[c])){if(f==="disabled"){let i=d(s.$value);if(i){let u=r[i];if(u){let p=`--${c}-disabled`;t[p]=`var(${u})`,o[m].disabled=`var(${p})`}}continue}for(let[i,u]of Object.entries(s))for(let[p,v]of Object.entries(u)){let g=n(`${f}-${i}-${p}`);g.endsWith("-default")&&(g=g.slice(0,-8));let y=`--${c}-${g}`,x=d(v.$value);if(x){let k=r[x];k&&(t[y]=`var(${k})`,o[m][g]=`var(${y})`)}else if(v.$value){let k=this.hexToOklch(v.$value);t[y]=k,o[m][g]=`var(${y})`}}}};if(l("bg","backgroundColor"),l("text","textColor"),l("border","borderColor"),e.layer)for(let[c,m]of Object.entries(e.layer)){let f=`--layer-${c}`,s=d(m.$value);if(s){let i=s.replace(/\./g,"-").toLowerCase();if(i.endsWith("-default")&&(i=i.slice(0,-8)),i.startsWith("bg-")||i.startsWith("text-")||i.startsWith("border-")){let u=`--${i}`;t[f]=`var(${u})`,o.backgroundColor[`layer-${c}`]=`var(${f})`}else{let u=r[i];u&&(t[f]=`var(${u})`,o.backgroundColor[`layer-${c}`]=`var(${f})`)}}else if(m.$value){let i=this.hexToOklch(m.$value);t[f]=i,o.backgroundColor[`layer-${c}`]=`var(${f})`}}if(e.overlay)for(let[c,m]of Object.entries(e.overlay)){let f=`--overlay-${c}`;m.$value&&(t[f]=m.$value,o.backgroundColor[`overlay-${c}`]=`var(${f})`)}if(e.icon){o.fill||(o.fill={});for(let[c,m]of Object.entries(e.icon)){if(c==="disabled"){let f=d(m.$value);if(f){let s=r[f];if(s){let i="--icon-disabled";t[i]=`var(${s})`,o.textColor["icon-disabled"]=`var(${i})`,o.fill["icon-disabled"]=`var(${i})`}}continue}for(let[f,s]of Object.entries(m))for(let[i,u]of Object.entries(s)){let p=n(`icon-${c}-${f}-${i}`);p.endsWith("-default")&&(p=p.slice(0,-8));let v=`--${p}`,g=d(u.$value);if(g){let y=r[g];y&&(t[v]=`var(${y})`,o.textColor[p]=`var(${v})`,o.fill[p]=`var(${v})`)}}}}return{semanticVariables:t,tokens:o}}async fetchFontCss(e,{timeoutMs:r=1e4}={}){if(!Number.isFinite(r)||r<=0)throw new Error("Font CSS timeout must be positive");return new Promise((t,o)=>{let n,d=setTimeout(()=>{let c=new Error("Font CSS request timed out");o(c),n?.destroy(c)},r);d.unref?.();let l=c=>{clearTimeout(d),o(c)};try{n=Re.get(e,c=>{let m="";if(c.on("error",l),c.on("aborted",()=>l(new Error("Font CSS response was interrupted"))),c.statusCode!==200){l(new Error(`Failed to fetch font CSS: ${c.statusCode}`)),c.destroy?.();return}c.on("data",f=>{m+=f}),c.on("end",()=>{clearTimeout(d),t(m)})}),n.on("error",l)}catch(c){l(c)}})}parseFontFaces(e){let r=/@font-face\s*{([^}]+)}/g,t=[],o;for(;(o=r.exec(e))!==null;){let n=o[1].trim().split(";").filter(Boolean),d={};n.forEach(l=>{let c=l.indexOf(":");if(c!==-1){let m=l.slice(0,c).trim(),f=l.slice(c+1).trim();m==="font-family"?d[m]=f.replace(/["']/g,""):d[m]=f}}),d.src&&(d.src=d.src.replace(/url\(["']?/,"url('").replace(/["']?\)/,"')")),t.push(d)}return t}async processFonts(e){let r=[];if(!e||typeof e!="object")return r;let t=Object.keys(e).filter(o=>o.startsWith("font"));for(let o of t){let n=e[o];if(typeof n=="string"&&n.startsWith("http"))try{let d=await this.fetchFontCss(n),l=this.parseFontFaces(d);l.length>0&&r.push(...l)}catch(d){console.warn(`Failed to process font ${o}:`,d.message)}}return r}processFontFamilies(e){let r={};if(!e||!e.font||!e.font.family)return r;let t=e.font.family;for(let[o,n]of Object.entries(t))if(n&&n.$value){let d=o.toLowerCase(),l=n.$value;typeof l=="string"&&l.startsWith("{")&&l.endsWith("}")&&(l=l.slice(1,-1));let c=m=>m.split(" ").map(f=>f.charAt(0).toUpperCase()+f.slice(1).toLowerCase()).join(" ");if(l.includes(","))r[d]=l;else{let m=c(l);m.includes(" ")&&!m.startsWith('"')&&!m.startsWith("'")?r[d]=`"${m}", sans-serif`:r[d]=`${m}, sans-serif`}}return r}processAnimations(e){let r={},t={};if(!e||typeof e!="object")return{keyframes:r,animations:t};for(let[o,n]of Object.entries(e))if(n&&typeof n=="object"){let d=`${o}`;if(n.keyframes){let c={};for(let[m,f]of Object.entries(n.keyframes))f&&typeof f=="object"&&(c[m]=f);r[d]=c}let l=[d,n.duration||"1s",n.easing||"ease",n.delay||"0s",n.iterations||"1",n.direction||"normal",n.fillMode||"none"].join(" ");t[o]=l}return{keyframes:r,animations:t}}generateSafelistClasses(e){let r=[];if(e.backgroundColor)for(let t of Object.keys(e.backgroundColor))r.push(`bg-${t}`);if(e.textColor)for(let t of Object.keys(e.textColor))r.push(`text-${t}`);if(e.borderColor)for(let t of Object.keys(e.borderColor))r.push(`border-${t}`);if(e.fill)for(let t of Object.keys(e.fill))r.push(`fill-${t}`),t.startsWith("icon-")&&r.push(`text-${t}`);if(e.fontFamily)for(let t of Object.keys(e.fontFamily))r.push(`font-${t}`);if(e.animations)for(let t of Object.keys(e.animations))r.push(`animate-${t}`);return r}extractClassesFromComponentsConfig(e){let r=new Set,t=n=>{typeof n=="string"&&n.split(/\s+/).filter(l=>l.length>0).forEach(l=>{r.add(l)})},o=n=>{if(!(!n||typeof n!="object"))for(let d in n){if(d==="icons")continue;let l=n[d];typeof l=="string"?t(l):typeof l=="object"&&o(l)}};return e&&o(e),Array.from(r).filter(oe).sort()}generateClassesContent(e=[]){e=e.filter(oe);let r=["/*"," * Frontfriend Component Classes"," *"," * This file contains all classes used in Frontfriend component configs."," * Tailwind v4 scans this file via @source to generate utilities."," * DO NOT EDIT - Auto-generated by frontfriend CLI"," */","","/*"," * Classes:"],t=" * ";for(let o of[...new Set(e)].sort())t.length+o.length+1>100?(r.push(t),t=` * ${o}`):t+=(t===" * "?"":" ")+o;return t!==" * "&&r.push(t),r.push(" */"),r.join(`
|
|
553
|
+
`)}processCustomCss(e){return!e||typeof e!="string"?{}:{raw:e}}async process(e){try{let r={variables:{},semanticVariables:{},semanticDarkVariables:{},utilities:{},fontFaces:[],keyframes:{},animations:{},safelist:[],metadata:{},custom:e.customCss?this.processCustomCss(e.customCss):{}},t=e.colors;if(t){let o=this.processColors(t);r.variables={...r.variables,...o.variables},r.utilities={...r.utilities,...o.utilities},r.colorMap=o.colorMap||{}}else r.colorMap={};if(e.semantic&&r.colorMap){let o=this.processSemanticTokens(e.semantic,r.colorMap);r.semanticVariables=o.semanticVariables,o.tokens&&(r.tokens=o.tokens,r.utilities=o.tokens)}if(e.semanticDark&&r.colorMap){let o=this.processSemanticTokens(e.semanticDark,r.colorMap);r.semanticDarkVariables=o.semanticVariables}if(e.fonts&&(r.fontFaces=await this.processFonts(e.fonts)),e.globalTokens){r.fontFamilies=this.processFontFamilies(e.globalTokens);let o=se(e.globalTokens);Object.keys(o).length&&(r.utilities.borderRadius=o),r.fontFamilies&&(r.utilities.fontFamily||(r.utilities.fontFamily={}),Object.assign(r.utilities.fontFamily,r.fontFamilies))}if(e.animations){let o=this.processAnimations(e.animations);r.keyframes=o.keyframes,r.animations=o.animations}return r.safelist=this.generateSafelistClasses(r.tokens||r.utilities),r.metadata={timestamp:new Date().toISOString(),version:e.version||"2.0.0",ffId:e.ffId},r}catch(r){throw console.error("Error processing tokens:",r),r}}buildSemanticColorNamespaces(e){let r=[["","border","--border-"],["layer-","layer","--layer-"],["overlay-","overlay","--overlay-"],["icon-","icon","--icon-"]],t=[["","bg","--bg-"],["layer-","layer","--layer-"],["overlay-","overlay","--overlay-"],["icon-","icon","--icon-"]],n=[{namespace:"--background-color",roles:t},{namespace:"--text-color",roles:[["","text","--text-"],["layer-","layer","--layer-"],["overlay-","overlay","--overlay-"],["icon-","icon","--icon-"]]},{namespace:"--border-color",roles:r},{namespace:"--ring-color",roles:r},{namespace:"--outline-color",roles:r},{namespace:"--stroke",roles:r},{namespace:"--ring-offset-color",roles:t},{namespace:"--fill",roles:t}],d=[];for(let{namespace:l,roles:c}of n)for(let[m,f,s]of c)for(let i of e[f]||[])d.push(` ${l}-${m}${i}: var(${s}${i});`);return d.length===0?[]:["","@theme {",...d,"}"]}generateThemeCSSFromProcessedTokens(e){return this.generateThemeCSS({variables:e.variables||{},semanticVariables:e.semanticVariables||{},semanticDarkVariables:e.semanticDarkVariables||{},fontFamilies:e.tokens?.fontFamily||{},utilities:{borderRadius:se(e.globalTokens)},foundation:We(e.globalTokens),shadows:e.shadows,fontFaces:e.fonts||[],keyframes:e.keyframes||{},animations:e.animations||{},custom:e.custom||{}})}generateThemeCSS(e){let r=['@import "tw-animate-css";',"",...Ie,Le(),"@theme {"];for(let[s,i]of Object.entries(e.variables||{}))r.push(` ${s}: ${i};`);for(let[s,i]of Object.entries(e.fontFamilies||{})){let u=s.startsWith("--")?s:`--font-${s}`,p=Array.isArray(i)?i.join(", "):i;r.push(` ${u}: ${p};`)}e.fontFamilies?.primary&&!e.fontFamilies.sans&&r.push(" --font-sans: var(--font-primary);");for(let[s,i]of Object.entries(e.utilities?.spacing||{})){let u=s.startsWith("--")?s:`--spacing-${s}`;r.push(` ${u}: ${i};`)}for(let[s,i]of Object.entries(e.utilities?.borderRadius||{})){let u=s.startsWith("--")?s:`--radius-${s}`;r.push(` ${u}: ${i};`)}for(let[s,i]of e.foundation?.theme||[])r.push(` ${s}: ${i};`);r.push("}","");let t=e.shadows?.light||{},o=e.shadows?.dark||{},n=[...new Set([...Object.keys(t),...Object.keys(o)])];if(n.length){r.push("@theme inline {");for(let s of n)r.push(` --shadow-${s}: var(--elevation-${s});`);r.push("}","")}let d=e.foundation?.root||[];if(d.length){r.push(":root {");for(let[s,i]of d)r.push(` ${s}: ${i};`);r.push("}","")}let l=e.semanticVariables||{},c=ie(l,e.utilities||{});r.push(":root:not(.dark) {");for(let[s,i]of Object.entries(c))r.push(` ${s}: ${i};`);for(let[s,i]of Object.entries(l))r.push(` ${s}: ${i};`);for(let[s,i]of Object.entries(t))r.push(` --elevation-${s}: ${i};`);if(r.push("}"),e.semanticDarkVariables&&Object.keys(e.semanticDarkVariables).length>0||Object.keys(o).length>0){let s={...l,...e.semanticDarkVariables},i=ie(s,e.utilities||{});r.push("",":root.dark {");for(let[u,p]of Object.entries(i))r.push(` ${u}: ${p};`);for(let[u,p]of Object.entries(e.semanticDarkVariables||{}))r.push(` ${u}: ${p};`);for(let[u,p]of Object.entries(o))r.push(` --elevation-${u}: ${p};`);r.push("}")}let m={bg:[],text:[],border:[],icon:[],layer:[],overlay:[]};for(let s of Object.keys(e.semanticVariables||{}))s.startsWith("--bg-")&&m.bg.push(s.slice(5)),s.startsWith("--text-")&&m.text.push(s.slice(7)),s.startsWith("--border-")&&m.border.push(s.slice(9)),s.startsWith("--icon-")&&m.icon.push(s.slice(7)),s.startsWith("--layer-")&&m.layer.push(s.slice(8)),s.startsWith("--overlay-")&&m.overlay.push(s.slice(10));let f=(s,i)=>{r.push("",`@utility ${s} {`);for(let u of i)r.push(` ${u}`);r.push("}")};for(let s of m.icon)f(`icon-${s}`,[`color: var(--icon-${s});`]);r.push(...this.buildSemanticColorNamespaces(m));for(let s of e.fontFaces||[]){r.push("","@font-face {");for(let[i,u]of Object.entries(s)){let p=i.replace(/([A-Z])/g,"-$1").toLowerCase(),v=Array.isArray(u)?u.join(", "):u;r.push(` ${p}: ${v};`)}r.push("}")}for(let[s,i]of Object.entries(e.keyframes||{})){r.push("",`@keyframes ${s} {`);for(let[u,p]of Object.entries(i)){r.push(` ${u} {`);for(let[v,g]of Object.entries(p)){let y=v.replace(/([A-Z])/g,"-$1").toLowerCase();r.push(` ${y}: ${g};`)}r.push(" }")}r.push("}")}for(let[s,i]of Object.entries(e.animations||{}))f(`animate-${s}`,[`animation: ${i};`]);return e.custom?.raw&&r.push("","/* Custom CSS */",e.custom.raw),r.push("","/* Component classes for Tailwind scanning */",`@source './${Me}';`),r.join(`
|
|
5
554
|
`)}};module.exports=V;
|