@ably/ui 17.0.0-dev.c0c91c03 → 17.0.1-dev.42035e80

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.
Files changed (6) hide show
  1. package/core/Footer.js +1 -1
  2. package/core/Footer.js.map +1 -1
  3. package/core/Icon.js +1 -1
  4. package/core/Icon.js.map +1 -1
  5. package/package.json +1 -1
  6. package/tailwind.config.js +136 -134
package/core/Footer.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-6"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[6.375rem]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-6"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-5 h-5 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-2 mt-4"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4"},title),React.createElement("ul",{className:"flex flex-col gap-y-3"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-2"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-6 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-6"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
1
+ import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-6"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[6.375rem]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-6"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-5 h-5 flex group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-2 mt-4"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4"},title),React.createElement("ul",{className:"flex flex-col gap-y-3"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-2"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-6 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-6"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
2
2
  //# sourceMappingURL=Footer.js.map
package/core/Footer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n const textColorClassnames =\n \"ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n return (\n <footer\n className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n data-id=\"footer\"\n >\n <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10\">\n <div className=\"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between\">\n <div className=\"flex-1 flex flex-col gap-6\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href=\"/\"\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"focus-base rounded w-[6.375rem]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n\n <Status statusUrl={StatusUrl} showDescription />\n\n <div className=\"flex gap-x-6\">\n {socialLinks.map((link) => (\n <a\n key={link.key}\n href={link.link}\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n aria-label={`Visit Ably on ${link.key}`}\n className=\"w-5 h-5 group/social-icon\"\n >\n <Icon\n name={link.monoIcon}\n size=\"20px\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n />\n <Icon\n name={link.colorIcon}\n size=\"20px\"\n additionalCSS=\"hidden group-hover/social-icon:flex\"\n />\n </a>\n ))}\n </div>\n <div className=\"flex gap-2 mt-4\">\n {ablyAwards.map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n </div>\n <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12\">\n {footerLinks.map(({ title, links }) => (\n <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4\">\n {title}\n </h3>\n <ul className=\"flex flex-col gap-y-3\">\n {links.map(({ label, link, badge }) => (\n <li key={label} className=\"flex gap-x-2\">\n <a\n href={link}\n className={textColorClassnames}\n aria-label={`Visit ${label}`}\n >\n {label}\n </a>\n {badge && (\n <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n {badge}\n </Badge>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n\n <div className=\"pt-6 border-t border-neutral-300 dark:border-neutral-1000\">\n <div className=\"flex gap-6\">\n {bottomFooterLinks.map((link) => (\n <a\n key={link.label}\n href={link.link}\n className={textColorClassnames}\n aria-label={`Visit ${link.label}`}\n >\n {link.label}\n </a>\n ))}\n </div>\n </div>\n </div>\n </footer>\n );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,sOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,8BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,kCAAmC,CAC/C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,gBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,6BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,mBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,+DACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,iEACX4B,OAEH,oBAACG,MAAG/B,UAAU,yBACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,6DACb,oBAACE,OAAIF,UAAU,cACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}
1
+ {"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n const textColorClassnames =\n \"ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n return (\n <footer\n className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n data-id=\"footer\"\n >\n <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10\">\n <div className=\"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between\">\n <div className=\"flex-1 flex flex-col gap-6\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href=\"/\"\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"focus-base rounded w-[6.375rem]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n\n <Status statusUrl={StatusUrl} showDescription />\n\n <div className=\"flex gap-x-6\">\n {socialLinks.map((link) => (\n <a\n key={link.key}\n href={link.link}\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n aria-label={`Visit Ably on ${link.key}`}\n className=\"w-5 h-5 flex group/social-icon\"\n >\n <Icon\n name={link.monoIcon}\n size=\"20px\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n />\n <Icon\n name={link.colorIcon}\n size=\"20px\"\n additionalCSS=\"hidden group-hover/social-icon:flex\"\n />\n </a>\n ))}\n </div>\n <div className=\"flex gap-2 mt-4\">\n {ablyAwards.map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n </div>\n <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12\">\n {footerLinks.map(({ title, links }) => (\n <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4\">\n {title}\n </h3>\n <ul className=\"flex flex-col gap-y-3\">\n {links.map(({ label, link, badge }) => (\n <li key={label} className=\"flex gap-x-2\">\n <a\n href={link}\n className={textColorClassnames}\n aria-label={`Visit ${label}`}\n >\n {label}\n </a>\n {badge && (\n <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n {badge}\n </Badge>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n\n <div className=\"pt-6 border-t border-neutral-300 dark:border-neutral-1000\">\n <div className=\"flex gap-6\">\n {bottomFooterLinks.map((link) => (\n <a\n key={link.label}\n href={link.link}\n className={textColorClassnames}\n aria-label={`Visit ${link.label}`}\n >\n {link.label}\n </a>\n ))}\n </div>\n </div>\n </div>\n </footer>\n );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,sOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,8BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,kCAAmC,CAC/C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,gBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,kCAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,mBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,+DACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,iEACX4B,OAEH,oBAACG,MAAG/B,UAAU,yBACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,6DACb,oBAACE,OAAIF,UAAU,cACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}
package/core/Icon.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed},"inline-block"),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
1
+ import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
2
2
  //# sourceMappingURL=Icon.js.map
package/core/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n name: IconName;\n size?: IconSize;\n color?: ColorClass | ColorThemeSet;\n secondaryColor?: ColorClass | ColorThemeSet;\n additionalCSS?: string;\n variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n name,\n size = \"0.75rem\",\n color,\n secondaryColor,\n additionalCSS = \"\",\n variant,\n ...additionalAttributes\n}: IconProps) => {\n const [lightSecondaryColor, darkSecondaryColor] = (\n secondaryColor ?? \"\"\n ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n const iconName =\n variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n const iconSvg = useCallback(\n (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n let secondaryColorValue;\n if (secondaryColor) {\n secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n } else if (defaultIconSecondaryColor(name)) {\n secondaryColorValue = convertTailwindClassToVar(\n defaultIconSecondaryColor(name),\n );\n }\n\n return (\n <svg\n className={cn(\n { [`${color}`]: color },\n { [`${additionalCSS}`]: additionalCSS },\n {\n \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n },\n {\n \"dark:hidden\": secondaryColor && isDark && isThemed,\n },\n \"inline-block\",\n )}\n style={\n {\n width: size,\n height: size,\n ...(secondaryColorValue && {\n \"--ui-icon-secondary-color\": secondaryColorValue,\n }),\n } as CSSProperties\n }\n {...additionalAttributes}\n >\n <use xlinkHref={`#sprite-${iconName}`} />\n </svg>\n );\n },\n [\n iconName,\n size,\n color,\n additionalCSS,\n additionalAttributes,\n lightSecondaryColor,\n darkSecondaryColor,\n ],\n );\n\n if (lightSecondaryColor && darkSecondaryColor) {\n return (\n <>\n {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n {iconSvg(darkSecondaryColor, true, true)}\n </>\n );\n } else if (lightSecondaryColor) {\n return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n } else {\n return iconSvg();\n }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,EACA,gBAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGT,oBAAoB,EAExB,oBAACe,OAAIC,UAAW,CAAC,QAAQ,EAAEZ,SAAS,CAAC,GAG3C,EACA,CACEA,SACAT,KACAC,MACAE,cACAE,qBACAC,oBACAC,mBACD,EAGH,GAAID,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGI,QAAQL,oBAAqB,MAAO,CAAC,CAACC,oBACtCI,QAAQJ,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOK,QAAQL,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOI,SACT,CACF,CAEA,gBAAeb,IAAK"}
1
+ {"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n name: IconName;\n size?: IconSize;\n color?: ColorClass | ColorThemeSet;\n secondaryColor?: ColorClass | ColorThemeSet;\n additionalCSS?: string;\n variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n name,\n size = \"0.75rem\",\n color,\n secondaryColor,\n additionalCSS = \"\",\n variant,\n ...additionalAttributes\n}: IconProps) => {\n const [lightSecondaryColor, darkSecondaryColor] = (\n secondaryColor ?? \"\"\n ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n const iconName =\n variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n const iconSvg = useCallback(\n (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n let secondaryColorValue;\n if (secondaryColor) {\n secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n } else if (defaultIconSecondaryColor(name)) {\n secondaryColorValue = convertTailwindClassToVar(\n defaultIconSecondaryColor(name),\n );\n }\n\n return (\n <svg\n className={cn(\n { [`${color}`]: color },\n { [`${additionalCSS}`]: additionalCSS },\n {\n \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n },\n {\n \"dark:hidden\": secondaryColor && isDark && isThemed,\n },\n )}\n style={\n {\n width: size,\n height: size,\n ...(secondaryColorValue && {\n \"--ui-icon-secondary-color\": secondaryColorValue,\n }),\n } as CSSProperties\n }\n {...additionalAttributes}\n >\n <use xlinkHref={`#sprite-${iconName}`} />\n </svg>\n );\n },\n [\n iconName,\n size,\n color,\n additionalCSS,\n additionalAttributes,\n lightSecondaryColor,\n darkSecondaryColor,\n ],\n );\n\n if (lightSecondaryColor && darkSecondaryColor) {\n return (\n <>\n {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n {iconSvg(darkSecondaryColor, true, true)}\n </>\n );\n } else if (lightSecondaryColor) {\n return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n } else {\n return iconSvg();\n }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,GAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGT,oBAAoB,EAExB,oBAACe,OAAIC,UAAW,CAAC,QAAQ,EAAEZ,SAAS,CAAC,GAG3C,EACA,CACEA,SACAT,KACAC,MACAE,cACAE,qBACAC,oBACAC,mBACD,EAGH,GAAID,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGI,QAAQL,oBAAqB,MAAO,CAAC,CAACC,oBACtCI,QAAQJ,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOK,QAAQL,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOI,SACT,CACF,CAEA,gBAAeb,IAAK"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "17.0.0-dev.c0c91c03",
3
+ "version": "17.0.1-dev.42035e80",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/tailwind.config.js CHANGED
@@ -41,120 +41,6 @@ module.exports = {
41
41
  code: ["var(--fs-code)", "var(--lh-none)"],
42
42
  code2: ["var(--fs-code2)", "var(--lh-none)"],
43
43
  },
44
- colors: {
45
- "neutral-000": "var(--color-neutral-000)",
46
- "neutral-100": "var(--color-neutral-100)",
47
- "neutral-200": "var(--color-neutral-200)",
48
- "neutral-300": "var(--color-neutral-300)",
49
- "neutral-400": "var(--color-neutral-400)",
50
- "neutral-500": "var(--color-neutral-500)",
51
- "neutral-600": "var(--color-neutral-600)",
52
- "neutral-700": "var(--color-neutral-700)",
53
- "neutral-800": "var(--color-neutral-800)",
54
- "neutral-900": "var(--color-neutral-900)",
55
- "neutral-1000": "var(--color-neutral-1000)",
56
- "neutral-1100": "var(--color-neutral-1100)",
57
- "neutral-1200": "var(--color-neutral-1200)",
58
- "neutral-1300": "var(--color-neutral-1300)",
59
- "orange-100": "var(--color-orange-100)",
60
- "orange-200": "var(--color-orange-200)",
61
- "orange-300": "var(--color-orange-300)",
62
- "orange-400": "var(--color-orange-400)",
63
- "orange-500": "var(--color-orange-500)",
64
- "orange-600": "var(--color-orange-600)",
65
- "orange-700": "var(--color-orange-700)",
66
- "orange-800": "var(--color-orange-800)",
67
- "orange-900": "var(--color-orange-900)",
68
- "orange-1000": "var(--color-orange-1000)",
69
- "orange-1100": "var(--color-orange-1100)",
70
- "yellow-100": "var(--color-yellow-100)",
71
- "yellow-200": "var(--color-yellow-200)",
72
- "yellow-300": "var(--color-yellow-300)",
73
- "yellow-400": "var(--color-yellow-400)",
74
- "yellow-500": "var(--color-yellow-500)",
75
- "yellow-600": "var(--color-yellow-600)",
76
- "yellow-700": "var(--color-yellow-700)",
77
- "yellow-800": "var(--color-yellow-800)",
78
- "yellow-900": "var(--color-yellow-900)",
79
- "green-100": "var(--color-green-100)",
80
- "green-200": "var(--color-green-200)",
81
- "green-300": "var(--color-green-300)",
82
- "green-400": "var(--color-green-400)",
83
- "green-500": "var(--color-green-500)",
84
- "green-600": "var(--color-green-600)",
85
- "green-700": "var(--color-green-700)",
86
- "green-800": "var(--color-green-800)",
87
- "green-900": "var(--color-green-900)",
88
- "blue-100": "var(--color-blue-100)",
89
- "blue-200": "var(--color-blue-200)",
90
- "blue-300": "var(--color-blue-300)",
91
- "blue-400": "var(--color-blue-400)",
92
- "blue-500": "var(--color-blue-500)",
93
- "blue-600": "var(--color-blue-600)",
94
- "blue-700": "var(--color-blue-700)",
95
- "blue-800": "var(--color-blue-800)",
96
- "blue-900": "var(--color-blue-900)",
97
- "violet-100": "var(--color-violet-100)",
98
- "violet-200": "var(--color-violet-200)",
99
- "violet-300": "var(--color-violet-300)",
100
- "violet-400": "var(--color-violet-400)",
101
- "violet-500": "var(--color-violet-500)",
102
- "violet-600": "var(--color-violet-600)",
103
- "violet-700": "var(--color-violet-700)",
104
- "violet-800": "var(--color-violet-800)",
105
- "violet-900": "var(--color-violet-900)",
106
- "pink-100": "var(--color-pink-100)",
107
- "pink-200": "var(--color-pink-200)",
108
- "pink-300": "var(--color-pink-300)",
109
- "pink-400": "var(--color-pink-400)",
110
- "pink-500": "var(--color-pink-500)",
111
- "pink-600": "var(--color-pink-600)",
112
- "pink-700": "var(--color-pink-700)",
113
- "pink-800": "var(--color-pink-800)",
114
- "pink-900": "var(--color-pink-900)",
115
- "gui-blue-default-light": "var(--color-gui-blue-default-light)",
116
- "gui-blue-hover-light": "var(--color-gui-blue-hover-light)",
117
- "gui-blue-active-light": "var(--color-gui-blue-active-light)",
118
- "gui-blue-default-dark": "var(--color-gui-blue-default-dark)",
119
- "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
120
- "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
121
- "gui-blue-focus": "var(--color-gui-blue-focus)",
122
- "gui-blue-visited": "var(--color-gui-blue-focus)",
123
- "gui-unavailable": "var(--color-gui-unavailable)",
124
- "gui-unavailable-dark": "var(--color-gui-unavailable-dark)",
125
- "gui-success-green": "var(--color-gui-success-green)",
126
- "gui-error-red": "var(--color-gui-error-red)",
127
- "gui-focus": "var(--color-gui-focus)",
128
- "gui-focus-outline": "var(--color-gui-focus-outline)",
129
- transparent: "transparent",
130
- "cool-black": "var(--color-neutral-1300)",
131
- "active-orange": "var(--color-orange-600)",
132
- "red-orange": "var(--color-orange-800)",
133
- white: "var(--color-neutral-000)",
134
- "electric-cyan": "var(--color-blue-400)",
135
- "zingy-green": "var(--color-green-400)",
136
- "bright-red": "var(--color-orange-700)",
137
- "jazzy-pink": "var(--color-pink-500)",
138
- "extra-light-grey": "var(--color-neutral-100)",
139
- "light-grey": "var(--color-neutral-200)",
140
- "mid-grey": "var(--color-neutral-500)",
141
- "dark-grey": "var(--color-neutral-800)",
142
- "charcoal-grey": "var(--color-neutral-1000)",
143
- "gui-default": "var(--color-gui-blue-default-light)",
144
- "gui-hover": "var(--color-gui-blue-hover-light)",
145
- "gui-active": "var(--color-gui-blue-active-light)",
146
- "gui-default-dark": "var(--color-gui-blue-default-dark)",
147
- "gui-hover-dark": "var(--color-gui-blue-hover-dark)",
148
- "gui-active-dark": "var(--color-gui-blue-active-dark)",
149
- "gui-alt": "var(--color-neutral-1300)",
150
- "gui-error": "var(--color-gui-error-red)",
151
- "gui-success": "var(--color-gui-success-green)",
152
- "icon-linkedin": "var(--icon-color-linkedin)",
153
- "icon-twitter": "var(--icon-color-twitter)",
154
- "icon-glassdoor": "var(--icon-color-glassdoor)",
155
- "icon-github": "var(--icon-color-github)",
156
- "icon-discord": "var(--icon-color-discord)",
157
- },
158
44
  fontFamily: {
159
45
  sans_next: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
160
46
  serif: [
@@ -195,27 +81,121 @@ module.exports = {
195
81
  "monospace",
196
82
  ],
197
83
  },
198
- padding: (theme) => ({
199
- btn: "var(--spacing-btn)",
200
- "btn-small": "var(--spacing-btn-small)",
201
- "btn-xsmall": "var(--spacing-btn-xsmall)",
202
- "btn-large": "var(--spacing-btn-large)",
203
- "menu-row": "var(--spacing-menu-row)",
204
- "menu-row-snug": "var(--spacing-menu-row-snug)",
205
- "menu-row-title": "var(--spacing-menu-row-title)",
206
- media: "var(--spacing-media)",
207
- input: "var(--spacing-input)",
208
- ...theme("spacing"),
209
- }),
210
- boxShadow: {
211
- subtle: "0px 1px 0px var(--color-neutral-500)",
212
- tooltip: "0px 5px 10px 0px #00000022",
213
- container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
214
- "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
215
- input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
216
- quote: "0rem 1.5rem 2rem 0rem #0000000d",
217
- },
218
84
  extend: {
85
+ colors: {
86
+ "neutral-000": "var(--color-neutral-000)",
87
+ "neutral-100": "var(--color-neutral-100)",
88
+ "neutral-200": "var(--color-neutral-200)",
89
+ "neutral-300": "var(--color-neutral-300)",
90
+ "neutral-400": "var(--color-neutral-400)",
91
+ "neutral-500": "var(--color-neutral-500)",
92
+ "neutral-600": "var(--color-neutral-600)",
93
+ "neutral-700": "var(--color-neutral-700)",
94
+ "neutral-800": "var(--color-neutral-800)",
95
+ "neutral-900": "var(--color-neutral-900)",
96
+ "neutral-1000": "var(--color-neutral-1000)",
97
+ "neutral-1100": "var(--color-neutral-1100)",
98
+ "neutral-1200": "var(--color-neutral-1200)",
99
+ "neutral-1300": "var(--color-neutral-1300)",
100
+ "orange-100": "var(--color-orange-100)",
101
+ "orange-200": "var(--color-orange-200)",
102
+ "orange-300": "var(--color-orange-300)",
103
+ "orange-400": "var(--color-orange-400)",
104
+ "orange-500": "var(--color-orange-500)",
105
+ "orange-600": "var(--color-orange-600)",
106
+ "orange-700": "var(--color-orange-700)",
107
+ "orange-800": "var(--color-orange-800)",
108
+ "orange-900": "var(--color-orange-900)",
109
+ "orange-1000": "var(--color-orange-1000)",
110
+ "orange-1100": "var(--color-orange-1100)",
111
+ "yellow-100": "var(--color-yellow-100)",
112
+ "yellow-200": "var(--color-yellow-200)",
113
+ "yellow-300": "var(--color-yellow-300)",
114
+ "yellow-400": "var(--color-yellow-400)",
115
+ "yellow-500": "var(--color-yellow-500)",
116
+ "yellow-600": "var(--color-yellow-600)",
117
+ "yellow-700": "var(--color-yellow-700)",
118
+ "yellow-800": "var(--color-yellow-800)",
119
+ "yellow-900": "var(--color-yellow-900)",
120
+ "green-100": "var(--color-green-100)",
121
+ "green-200": "var(--color-green-200)",
122
+ "green-300": "var(--color-green-300)",
123
+ "green-400": "var(--color-green-400)",
124
+ "green-500": "var(--color-green-500)",
125
+ "green-600": "var(--color-green-600)",
126
+ "green-700": "var(--color-green-700)",
127
+ "green-800": "var(--color-green-800)",
128
+ "green-900": "var(--color-green-900)",
129
+ "blue-100": "var(--color-blue-100)",
130
+ "blue-200": "var(--color-blue-200)",
131
+ "blue-300": "var(--color-blue-300)",
132
+ "blue-400": "var(--color-blue-400)",
133
+ "blue-500": "var(--color-blue-500)",
134
+ "blue-600": "var(--color-blue-600)",
135
+ "blue-700": "var(--color-blue-700)",
136
+ "blue-800": "var(--color-blue-800)",
137
+ "blue-900": "var(--color-blue-900)",
138
+ "violet-100": "var(--color-violet-100)",
139
+ "violet-200": "var(--color-violet-200)",
140
+ "violet-300": "var(--color-violet-300)",
141
+ "violet-400": "var(--color-violet-400)",
142
+ "violet-500": "var(--color-violet-500)",
143
+ "violet-600": "var(--color-violet-600)",
144
+ "violet-700": "var(--color-violet-700)",
145
+ "violet-800": "var(--color-violet-800)",
146
+ "violet-900": "var(--color-violet-900)",
147
+ "pink-100": "var(--color-pink-100)",
148
+ "pink-200": "var(--color-pink-200)",
149
+ "pink-300": "var(--color-pink-300)",
150
+ "pink-400": "var(--color-pink-400)",
151
+ "pink-500": "var(--color-pink-500)",
152
+ "pink-600": "var(--color-pink-600)",
153
+ "pink-700": "var(--color-pink-700)",
154
+ "pink-800": "var(--color-pink-800)",
155
+ "pink-900": "var(--color-pink-900)",
156
+ "gui-blue-default-light": "var(--color-gui-blue-default-light)",
157
+ "gui-blue-hover-light": "var(--color-gui-blue-hover-light)",
158
+ "gui-blue-active-light": "var(--color-gui-blue-active-light)",
159
+ "gui-blue-default-dark": "var(--color-gui-blue-default-dark)",
160
+ "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
161
+ "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
162
+ "gui-blue-focus": "var(--color-gui-blue-focus)",
163
+ "gui-blue-visited": "var(--color-gui-blue-focus)",
164
+ "gui-unavailable": "var(--color-gui-unavailable)",
165
+ "gui-unavailable-dark": "var(--color-gui-unavailable-dark)",
166
+ "gui-success-green": "var(--color-gui-success-green)",
167
+ "gui-error-red": "var(--color-gui-error-red)",
168
+ "gui-focus": "var(--color-gui-focus)",
169
+ "gui-focus-outline": "var(--color-gui-focus-outline)",
170
+ transparent: "transparent",
171
+ "cool-black": "var(--color-neutral-1300)",
172
+ "active-orange": "var(--color-orange-600)",
173
+ "red-orange": "var(--color-orange-800)",
174
+ white: "var(--color-neutral-000)",
175
+ "electric-cyan": "var(--color-blue-400)",
176
+ "zingy-green": "var(--color-green-400)",
177
+ "bright-red": "var(--color-orange-700)",
178
+ "jazzy-pink": "var(--color-pink-500)",
179
+ "extra-light-grey": "var(--color-neutral-100)",
180
+ "light-grey": "var(--color-neutral-200)",
181
+ "mid-grey": "var(--color-neutral-500)",
182
+ "dark-grey": "var(--color-neutral-800)",
183
+ "charcoal-grey": "var(--color-neutral-1000)",
184
+ "gui-default": "var(--color-gui-blue-default-light)",
185
+ "gui-hover": "var(--color-gui-blue-hover-light)",
186
+ "gui-active": "var(--color-gui-blue-active-light)",
187
+ "gui-default-dark": "var(--color-gui-blue-default-dark)",
188
+ "gui-hover-dark": "var(--color-gui-blue-hover-dark)",
189
+ "gui-active-dark": "var(--color-gui-blue-active-dark)",
190
+ "gui-alt": "var(--color-neutral-1300)",
191
+ "gui-error": "var(--color-gui-error-red)",
192
+ "gui-success": "var(--color-gui-success-green)",
193
+ "icon-linkedin": "var(--icon-color-linkedin)",
194
+ "icon-twitter": "var(--icon-color-twitter)",
195
+ "icon-glassdoor": "var(--icon-color-glassdoor)",
196
+ "icon-github": "var(--icon-color-github)",
197
+ "icon-discord": "var(--icon-color-discord)",
198
+ },
219
199
  backgroundImage: {
220
200
  "gradient-active-orange": "var(--gradient-active-orange)",
221
201
  "gradient-hot-pink": "var(--gradient-hot-pink)",
@@ -246,6 +226,25 @@ module.exports = {
246
226
  snug: "var(--lh-snug)",
247
227
  relaxed: "var(--lh-relaxed)",
248
228
  },
229
+ padding: {
230
+ btn: "var(--spacing-btn)",
231
+ "btn-small": "var(--spacing-btn-small)",
232
+ "btn-xsmall": "var(--spacing-btn-xsmall)",
233
+ "btn-large": "var(--spacing-btn-large)",
234
+ "menu-row": "var(--spacing-menu-row)",
235
+ "menu-row-snug": "var(--spacing-menu-row-snug)",
236
+ "menu-row-title": "var(--spacing-menu-row-title)",
237
+ media: "var(--spacing-media)",
238
+ input: "var(--spacing-input)",
239
+ },
240
+ boxShadow: {
241
+ subtle: "0px 1px 0px var(--color-neutral-500)",
242
+ tooltip: "0px 5px 10px 0px #00000022",
243
+ container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
244
+ "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
245
+ input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
246
+ quote: "0rem 1.5rem 2rem 0rem #0000000d",
247
+ },
249
248
  keyframes: {
250
249
  tooltipEntry: {
251
250
  "0%": { transform: "translateY(8px)", opacity: 0 },
@@ -315,5 +314,8 @@ module.exports = {
315
314
  circle: "circle",
316
315
  },
317
316
  },
317
+ corePlugins: {
318
+ preflight: false,
319
+ },
318
320
  plugins: [require("@tailwindcss/container-queries")],
319
321
  };