@frank-auth/react/dist/cjs/utils/theme.cjs

Flexible and customizable React UI components for Frank Authentication

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=n=>{const t=Number.parseInt(n.slice(1,3),16)/255,e=Number.parseInt(n.slice(3,5),16)/255,r=Number.parseInt(n.slice(5,7),16)/255,c=Math.max(t,e,r),o=Math.min(t,e,r);let i=0,f=0;const a=(c+o)/2;if(c===o)i=f=0;else{const s=c-o;switch(f=a>.5?s/(2-c-o):s/(c+o),c){case t:i=(e-r)/s+(e<r?6:0);break;case e:i=(r-t)/s+2;break;case r:i=(t-e)/s+4;break}i/=6}return[Math.round(i*360),Math.round(f*100),Math.round(a*100)]},g=(n,t,e)=>{n/=360,t/=100,e/=100;const r=(a,s,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<1/6?a+(s-a)*6*l:l<1/2?s:l<2/3?a+(s-a)*(2/3-l)*6:a);let c,o,i;if(t===0)c=o=i=e;else{const a=e<.5?e*(1+t):e+t-e*t,s=2*e-a;c=r(s,a,n+1/3),o=r(s,a,n),i=r(s,a,n-1/3)}const f=a=>{const s=Math.round(a*255).toString(16);return s.length===1?"0"+s:s};return`#${f(c)}${f(o)}${f(i)}`},F=(n,t)=>{const[e,r,c]=p(n),o=Math.max(0,Math.min(100,c+t));return g(e,r,o)},$=(n,t)=>{const[e,r,c]=p(n),o=Math.max(0,Math.min(100,r+t));return g(e,o,c)},M=(n,t)=>{const[e,r,c]=p(n),o=(e+t+360)%360;return g(o,r,c)},y=(n,t)=>{const e=f=>{const a=Number.parseInt(f.slice(1,3),16)/255,s=Number.parseInt(f.slice(3,5),16)/255,l=Number.parseInt(f.slice(5,7),16)/255,d=m=>m<=.03928?m/12.92:Math.pow((m+.055)/1.055,2.4);return .2126*d(a)+.7152*d(s)+.0722*d(l)},r=e(n),c=e(t),o=Math.max(r,c),i=Math.min(r,c);return(o+.05)/(i+.05)},b=(n,t,e="AA")=>{const r=y(n,t);return e==="AA"?r>=4.5:r>=7},h=(n,t,e="AA")=>{const r=n,[c,o,i]=p(r);for(let s=0;s<=50;s+=5){const l=Math.min(100,i+s),d=g(c,o,l);if(b(d,t,e))return d;const m=Math.max(0,i-s),T=g(c,o,m);if(b(T,t,e))return T}const f="#ffffff",a="#000000";return b(f,t,e)?f:b(a,t,e)?a:n},u=n=>{const[t,e,r]=p(n);return{50:g(t,Math.max(10,e-40),Math.min(95,r+40)),100:g(t,Math.max(20,e-30),Math.min(90,r+35)),200:g(t,Math.max(30,e-20),Math.min(85,r+25)),300:g(t,Math.max(40,e-10),Math.min(75,r+15)),400:g(t,e,Math.min(65,r+5)),500:n,600:g(t,Math.min(100,e+10),Math.max(35,r-5)),700:g(t,Math.min(100,e+15),Math.max(25,r-15)),800:g(t,Math.min(100,e+20),Math.max(15,r-25)),900:g(t,Math.min(100,e+25),Math.max(10,r-35)),950:g(t,Math.min(100,e+30),Math.max(5,r-45)),DEFAULT:n,foreground:h(n,"#ffffff")}},S=(n,t="light")=>({success:t==="light"?"#22c55e":"#16a34a",warning:t==="light"?"#f59e0b":"#d97706",danger:t==="light"?"#ef4444":"#dc2626",info:t==="light"?"#3b82f6":"#2563eb"}),w=()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",C=n=>{if(typeof window>"u")return()=>{};const t=window.matchMedia("(prefers-color-scheme: dark)"),e=r=>{n(r.matches?"dark":"light")};return t.addEventListener("change",e),()=>{t.removeEventListener("change",e)}},x=n=>n==="system"?w():n,k=n=>{const t={};return Object.entries(n.colors).forEach(([e,r])=>{t[`--frank-${e.replace(/([A-Z])/g,"-$1").toLowerCase()}`]=r}),Object.entries(n.spacing).forEach(([e,r])=>{t[`--frank-spacing-${e}`]=r}),Object.entries(n.borderRadius).forEach(([e,r])=>{t[`--frank-radius-${e}`]=r}),Object.entries(n.shadows).forEach(([e,r])=>{t[`--frank-shadow-${e}`]=r}),Object.entries(n.typography.fontSize).forEach(([e,[r,c]])=>{t[`--frank-text-${e}`]=r,t[`--frank-text-${e}-line-height`]=c.lineHeight,c.letterSpacing&&(t[`--frank-text-${e}-letter-spacing`]=c.letterSpacing)}),Object.entries(n.typography.fontWeight).forEach(([e,r])=>{t[`--frank-font-${e}`]=r}),n.cssVariables&&Object.entries(n.cssVariables).forEach(([e,r])=>{t[e.startsWith("--")?e:`--${e}`]=r}),t},j=(n,t)=>{const e=t||document.documentElement;Object.entries(n).forEach(([r,c])=>{e.style.setProperty(r,c)})},A=(n,t)=>{const e=t||document.documentElement;n.forEach(r=>{e.style.removeProperty(r)})},V=n=>{const{primaryColor:t,secondaryColor:e,mode:r,colorHarmony:c}=n,o=u(t),i=u(e||M(t,30)),a=u(r==="light"?"#6b7280":"#9ca3af"),s=S(t,r),l={background:r==="light"?"#ffffff":"#0f172a",foreground:r==="light"?"#0f172a":"#f8fafc",content1:r==="light"?"#ffffff":"#18181b",content2:r==="light"?"#f4f4f5":"#27272a",content3:r==="light"?"#e4e4e7":"#3f3f46",content4:r==="light"?"#d4d4d8":"#52525b",primary:o,primaryForeground:h("#ffffff",o[500]),secondary:i,secondaryForeground:h("#ffffff",i[500]),accent:o[600],accentForeground:h("#ffffff",o[600]),muted:a[100],mutedForeground:a[600],border:r==="light"?a[200]:a[800],divider:r==="light"?a[100]:a[800],input:r==="light"?"#ffffff":"#27272a",inputForeground:r==="light"?"#0f172a":"#f8fafc",focus:o[500],focusVisible:o[500],overlay:r==="light"?"rgba(0, 0, 0, 0.5)":"rgba(0, 0, 0, 0.8)",success:s.success,successForeground:h("#ffffff",s.success),warning:s.warning,warningForeground:h("#ffffff",s.warning),danger:s.danger,dangerForeground:h("#ffffff",s.danger),info:s.info,infoForeground:h("#ffffff",s.info),selection:o[100],selectionForeground:o[900],disabled:a[300],disabledForeground:a[500],card:"",cardForeground:"",popover:"",popoverForeground:"",ring:"",destructive:"",destructiveForeground:""},d={primary:o,secondary:i,neutral:a,success:u(s.success),warning:u(s.warning),danger:u(s.danger),info:u(s.info)};return{name:`Generated ${r} theme`,mode:r,colors:l,palette:d}},E=n=>{const t=[],e=[],r={};if(!n.colors)return t.push("Theme must have colors defined"),{valid:!1,errors:t,warnings:e,accessibility:{contrastRatios:r,wcagLevel:"fail"}};const c=["background","foreground","primary","primaryForeground"];for(const a of c)a in n.colors||t.push(`Missing required color: ${a}`);const o=(a,s)=>{const l=n.colors[a],d=n.colors[s];if(l&&d){const m=y(typeof l=="string"?l:l.DEFAULT,typeof d=="string"?d:d.DEFAULT);r[`${a}/${s}`]=m,m<4.5&&e.push(`Low contrast ratio for ${a} on ${s}: ${m.toFixed(2)}`)}};o("foreground","background"),o("primaryForeground","primary"),o("secondaryForeground","secondary"),o("successForeground","success"),o("warningForeground","warning"),o("dangerForeground","danger"),o("infoForeground","info");const i=Math.min(...Object.values(r));let f;return i>=7?f="AAA":i>=4.5?f="AA":i>=3?f="A":f="fail",{valid:t.length===0,errors:t,warnings:e,accessibility:{contrastRatios:r,wcagLevel:f}}},L=(n,t)=>{const e={...n};return t.colors&&(e.colors={...e.colors,...t.colors}),t.typography&&(e.typography={...e.typography,...t.typography}),t.spacing&&(e.spacing={...e.spacing,...t.spacing}),t.components&&(e.components={...e.components,...t.components}),t.cssVariables&&(e.cssVariables={...e.cssVariables,...t.cssVariables}),t.custom&&(e.custom={...e.custom,...t.custom}),e},v=(n,t,e,r="default")=>{const c=n.components[t];if(!c)return;const o=c[e];if(!(!o||typeof o!="object"))return o},H=(n,t,e,r="default",c="md")=>{const o=v(n,t,e,r);if(!o)return"";let i=o.base||"";const f=o.colors?.[r];f&&(i+=` ${f.background||""} ${f.foreground||""} ${f.border||""}`);const a=o.sizes?.[c];return a&&(i+=` ${a}`),i.trim()},I=(n,t)=>{if(!(typeof window>"u"))try{localStorage.setItem("frank-auth-theme",n),localStorage.setItem("frank-auth-theme-mode",t)}catch{}},O=()=>{if(typeof window>"u")return{};try{const n=localStorage.getItem("frank-auth-theme"),t=localStorage.getItem("frank-auth-theme-mode");return{theme:n||void 0,mode:t||void 0}}catch{return{}}},P={hexToHsl:p,hslToHex:g,adjustBrightness:F,adjustSaturation:$,adjustHue:M,getContrastRatio:y,isValidContrast:b,findAccessibleColor:h,generateColorPalette:u,generateSemanticColors:S,getSystemTheme:w,watchSystemTheme:C,resolveThemeMode:x,generateCSSVariables:k,applyCSSVariables:j,removeCSSVariables:A,generateTheme:V,validateTheme:E,mergeThemes:L,getComponentVariant:v,getComponentStyles:H,saveThemeToStorage:I,loadThemeFromStorage:O};exports.ThemeUtils=P;exports.adjustBrightness=F;exports.adjustHue=M;exports.adjustSaturation=$;exports.applyCSSVariables=j;exports.findAccessibleColor=h;exports.generateCSSVariables=k;exports.generateColorPalette=u;exports.generateSemanticColors=S;exports.generateTheme=V;exports.getComponentStyles=H;exports.getComponentVariant=v;exports.getContrastRatio=y;exports.getSystemTheme=w;exports.hexToHsl=p;exports.hslToHex=g;exports.isValidContrast=b;exports.loadThemeFromStorage=O;exports.mergeThemes=L;exports.removeCSSVariables=A;exports.resolveThemeMode=x;exports.saveThemeToStorage=I;exports.validateTheme=E;exports.watchSystemTheme=C;
//# sourceMappingURL=theme.cjs.map