@guruhotel/aura-ui/esm/theme/utils.js

⚛️ React UI library by GuruHotel

import e from"./common";import t from"./light-theme";import s from"./functions/clsx";import{hexToRGBA as n,rgbToRgba as r}from"./functions/color";import{useEffect as o,useState as c}from"react";export const getTokenValue=(t,s,o=1)=>{if("undefined"==typeof document||!t)return"";let c=getComputedStyle(document.documentElement);const i=`--${e.prefix}-${t}-${s}`,l=c.getPropertyValue(i);if(null!=l&&l.includes("var")&&getTokenValue(t,l),l&&1!==o){if(l.includes("rgb"))return r(l,o);if(l.includes("#"))return n(l,o)}return l};export const getDocumentCSSTokens=()=>{const s=[...Object.keys(e.theme.colors),...Object.keys(t.colors)],n=[...Object.keys(e.theme.fonts),...Object.keys(t.fonts)],r=[...Object.keys(e.theme.fontSizes),...Object.keys(t.fontSizes)],o=[...Object.keys(e.theme.fontWeights),...Object.keys(t.fontWeights)],c=[...Object.keys(e.theme.letterSpacings),...Object.keys(t.letterSpacings)],i=[...Object.keys(e.theme.space),...Object.keys(t.space)],l=[...Object.keys(e.theme.sizes),...Object.keys(t.sizes)],u=[...Object.keys(e.theme.radii),...Object.keys(t.radii)],a=[...Object.keys(e.theme.zIndices),...Object.keys(t.zIndices)],d=[...Object.keys(e.theme.borderWeights),...Object.keys(t.borderWeights)],p=[...Object.keys(e.theme.shadows),...Object.keys(t.shadows)],f=[...Object.keys(e.theme.transitions),...Object.keys(t.transitions)],k=[...Object.keys(e.theme.breakpoints),...Object.keys(t.breakpoints)];return{colors:s.reduce(((t,s)=>{const n=getTokenValue("colors",s);return n&&(t[s]={prefix:e.prefix,scale:"colors",token:s,value:n}),t}),{}),fonts:n.reduce(((t,s)=>{const n=getTokenValue("fonts",s);return n&&(t[s]={prefix:e.prefix,scale:"fonts",token:s,value:n}),t}),{}),fontSizes:r.reduce(((t,s)=>{const n=getTokenValue("fontSizes",s);return n&&(t[s]={prefix:e.prefix,scale:"fontSize",token:s,value:n}),t}),{}),fontWeigths:o.reduce(((t,s)=>{const n=getTokenValue("fontWeights",s);return n&&(t[s]={prefix:e.prefix,scale:"fontWeigths",token:s,value:n}),t}),{}),letterSpacings:c.reduce(((t,s)=>{const n=getTokenValue("letterSpacings",s);return n&&(t[s]={prefix:e.prefix,scale:"letterSpacings",token:s,value:n}),t}),{}),space:i.reduce(((t,s)=>{const n=getTokenValue("space",s);return n&&(t[s]={prefix:e.prefix,scale:"space",token:s,value:n}),t}),{}),sizes:l.reduce(((t,s)=>{const n=getTokenValue("sizes",s);return n&&(t[s]={prefix:e.prefix,scale:"sizes",token:s,value:n}),t}),{}),radii:u.reduce(((t,s)=>{const n=getTokenValue("radii",s);return n&&(t[s]={prefix:e.prefix,scale:"radii",token:s,value:n}),t}),{}),zIndices:a.reduce(((t,s)=>{const n=getTokenValue("zIndices",s);return n&&(t[s]={prefix:e.prefix,scale:"zIndices",token:s,value:n}),t}),{}),borderWeights:d.reduce(((t,s)=>{const n=getTokenValue("borderWeights",s);return n&&(t[s]={prefix:e.prefix,scale:"borderWeights",token:s,value:n}),t}),{}),shadows:p.reduce(((t,s)=>{const n=getTokenValue("shadows",s);return n&&(t[s]={prefix:e.prefix,scale:"shadows",token:s,value:n}),t}),{}),transitions:f.reduce(((t,s)=>{const n=getTokenValue("transitions",s);return n&&(t[s]={prefix:e.prefix,scale:"transitions",token:s,value:n}),t}),{}),breakpoints:k.reduce(((t,s)=>{const n=getTokenValue("breakpoints",s);return n&&(t[s]={prefix:e.prefix,scale:"breakpoints",token:s,value:n}),t}),{})}};export const getDocumentTheme=e=>{var t,s;const n=(null==e||null==(t=e.getAttribute("style"))?void 0:t.split(";").map((e=>e.trim())).filter((e=>e.includes("color-scheme"))))||[],r=n.length>0?null==(s=n[0])?void 0:s.replace("color-scheme: ","").replace(";",""):"";return(null==e?void 0:e.getAttribute("data-theme"))||r};export const getThemeName=e=>"string"==typeof e&&null!=e&&e.includes("-theme")?null==e?void 0:e.replace("-theme",""):e;export const changeTheme=e=>{var t,n;if(!document)return;const r=document.documentElement,o=(null==r||null==(t=r.getAttribute("class"))?void 0:t.split(" ").filter((e=>!(e.includes("theme")||e.includes("light")||e.includes("dark")))))||[],c=(null==r||null==(n=r.getAttribute("style"))?void 0:n.split(";").filter((e=>!e.includes("color-scheme"))).map((e=>`${e};`)))||[],i=getThemeName(e);null==r||r.setAttribute("class",s(o,`${i}-theme`)),null==r||r.setAttribute("style",s(c,`color-scheme: ${i};`))};export const useSSR=()=>{const[e,t]=c(!1);return o((()=>{t(Boolean("undefined"!=typeof window&&window.document&&window.document.createElement))}),[]),{isBrowser:e,isServer:!e}};