fix(tailwindcss-config): fix calt for firefox, make calt opt in when using font-alpha (#3007)

apps/explorer/src/app/components/empty-list/empty-list.tsx

@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {
 
       <div className="mt-4">
         {heading ? (
-          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
             {heading}
           </h1>
         ) : null}
         {label ? (
-          <p className="font-alpha text-gray-500 text-center">{label}</p>
+          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
         ) : null}
       </div>
     </div>

apps/explorer/src/app/components/markets/market-details.tsx

@@ -249,7 +249,7 @@ export const MarketDetails = ({
     <>
       {panels.map((p) => (
         <div className="mb-3">
-          <h2 className="font-alpha text-xl">{p.title}</h2>
+          <h2 className="font-alpha calt text-xl">{p.title}</h2>
           {p.content}
         </div>
       ))}

apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx

@@ -83,7 +83,7 @@ const NestedDataListItem = ({
   });
 
   const titleClasses = classNames({
-    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
+    'text-xl pl-4 border-l-4 font-alpha calt': hasChildren,
     'text-base font-medium whitespace-nowrap': !hasChildren,
   });
 

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({
   copy = false,
   className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
   return (
     <header className={className}>
       <span className={`${titleClasses} block`}>{prefix}</span>

apps/explorer/src/app/components/route-title/index.tsx

@@ -13,7 +13,7 @@ export const RouteTitle = ({
   ...props
 }: RouteTitleProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-4xl',
     'uppercase',
     'mb-8',

apps/explorer/src/app/components/status-message/index.tsx

@@ -11,7 +11,7 @@ export const StatusMessage = ({
   className,
   ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha text-2xl mb-28', className);
+  const classes = classnames('font-alpha calt text-2xl mb-28', className);
   return (
     <h3 className={classes} {...props}>
       {children}

apps/explorer/src/app/components/sub-heading/index.tsx

@@ -12,7 +12,7 @@ export const SubHeading = ({
   ...props
 }: SubHeadingProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-2xl',
     'uppercase',
     'mt-8 mb-2',

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -9,7 +9,7 @@ export type Metric = components['schemas']['vegaDispatchMetric'];
 export const wrapperClasses =
   'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
 export const headerClasses =
-  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha';
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
 
 export type Transfer = components['schemas']['commandsv1Transfer'];
 

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -68,7 +68,7 @@ const Party = () => {
   return (
     <section>
       <h1
-        className="font-alpha uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
+        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
       >
         {t('Public key')}

apps/liquidity-provision-dashboard/src/app/components/dashboard/dashboard.tsx

@@ -8,7 +8,7 @@ export function Dashboard() {
     <>
       <div className="px-16 pt-20 pb-12 bg-greys-light-100">
         <div className="max-w-screen-xl mx-auto">
-          <h1 className="font-alpha uppercase text-5xl mb-8">
+          <h1 className="font-alpha calt uppercase text-5xl mb-8">
             {t('Top liquidity opportunities')}
           </h1>
 

apps/liquidity-provision-dashboard/src/app/components/dashboard/intro/intro.tsx

@@ -30,7 +30,7 @@ type Network = 'testnet' | 'mainnet';
 export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
   return (
     <div>
-      <p className="font-alpha text-2xl font-medium mb-2">
+      <p className="font-alpha calt text-2xl font-medium mb-2">
         {t(
           'Become a liquidity provider and earn a cut of the fees paid during trading.'
         )}

apps/liquidity-provision-dashboard/src/app/components/detail/detail.tsx

@@ -92,7 +92,7 @@ export const Detail = () => {
             )}
           </div>
           <div>
-            <h2 className="font-alpha text-2xl mb-4">
+            <h2 className="font-alpha calt text-2xl mb-4">
               {t('Current Liquidity Provision')}
             </h2>
             <LPProvidersGrid

apps/liquidity-provision-dashboard/src/app/components/detail/header/header.tsx

@@ -14,13 +14,13 @@ export const Header = ({
       <div className="mb-6">
         <Link to="/">
           <Icon name="chevron-left" className="mr-2" />
-          <span className="underline font-alpha text-lg font-medium">
+          <span className="underline font-alpha calt text-lg font-medium">
             {t('Liquidity opportunities')}
           </span>
         </Link>
       </div>
-      <h1 className="font-alpha text-5xl mb-6">{name}</h1>
-      <p className="font-alpha text-4xl">{symbol}</p>
+      <h1 className="font-alpha calt text-5xl mb-6">{name}</h1>
+      <p className="font-alpha calt text-4xl">{symbol}</p>
     </div>
   );
 };

apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx

@@ -44,7 +44,7 @@ export const Market = ({
         <table className="w-full">
           <thead>
             <tr
-              className="text-sm text-greys-light-400 text-left font-alpha"
+              className="text-sm text-greys-light-400 text-left font-alpha calt"
               style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
             >
               <th className="font-medium px-4">{t('Volume (24h)')}</th>

apps/liquidity-provision-dashboard/src/app/components/grid/grid.tsx

@@ -36,7 +36,7 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {
 
   return (
     <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha', {
+      className={classNames('ag-theme-alpine h-full font-alpha calt', {
         'row-hover': isRowClickable,
       })}
       rowHeight={92}

apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx

@@ -13,7 +13,7 @@ const Remainder = () => (
 );
 
 const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha';
+  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';
 
 const Tooltip = ({
   children,

apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx

@@ -59,10 +59,10 @@ const ROWS = [
 export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
   return (
     <Dialog size="medium" open={isOpen} onChange={onChange}>
-      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase liga-0-calt-0">
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
         {t('Health')}
       </h1>
-      <p className="text-lg font-medium font-alpha mb-8 liga-0-calt-0">
+      <p className="text-lg font-medium font-alpha mb-8">
         {t(
           'Market health is a representation of market and liquidity status and how close that market is to moving from one fee level to another.'
         )}
@@ -70,10 +70,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
 
       <table className="table-fixed">
         <thead className="border-b border-greys-light-300">
-          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase">
             {t('Market status')}
           </th>
-          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
             {t('Liquidity status')}
           </th>
         </thead>
@@ -85,12 +85,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
                 <td
                   className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })}
                 >
-                  <h2 className="font-medium font-alpha uppercase text-base liga-0-calt-0">
+                  <h2 className="font-medium font-alpha uppercase text-base">
                     {t(r.title)}
                   </h2>
-                  <p className="font-medium font-alpha text-lg liga-0-calt-0">
-                    {t(r.copy)}
-                  </p>
+                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
                 </td>
                 <td
                   className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}

apps/token/src/routes/rewards/no-rewards.tsx

@@ -13,7 +13,7 @@ export const NoRewards = () => {
   return (
     <div className={classes}>
       <SubHeading title={t('noRewardsHaveBeenDistributedYet')} />
-      <p className="font-alpha text-xl">{t('checkBackSoon')}</p>
+      <p className="font-alpha calt text-xl">{t('checkBackSoon')}</p>
     </div>
   );
 };

apps/trading/pages/_document.page.tsx

@@ -24,7 +24,7 @@ export default function Document() {
           <script src="/assets/env-config.js" type="text/javascript" />
         ) : null}
       </Head>
-      <body className="font-alpha liga-0-calt-0">
+      <body className="font-alpha">
         <Main />
         <NextScript />
       </body>

libs/network-stats/src/components/stats-manager/stats-manager.tsx

@@ -63,7 +63,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
     <div className={classes}>
       <h3
         data-testid="stats-environment"
-        className="font-alpha uppercase text-2xl pb-8 col-span-full"
+        className="font-alpha calt uppercase text-2xl pb-8 col-span-full"
       >
         {(error && `/ ${error}`) ||
           (data ? `/ ${VEGA_ENV}` : '/ Connecting...')}

libs/tailwindcss-config/src/theme.js

@@ -122,33 +122,11 @@ module.exports = {
   fontFamily: {
     mono: ['Roboto Mono', 'monospace'],
     sans: [
-      '"Helvetica Neue"',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      'Arial',
-      '"Noto Sans"',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
+      '"Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
     ],
     alpha: [
-      'AlphaLyrae',
-      '"Helvetica Neue"',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      'Arial',
-      '"Noto Sans"',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
+      'AlphaLyrae, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      { fontFeatureSettings: '"calt" 0, "liga" 0' },
     ],
   },
   keyframes: {

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -7,12 +7,13 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.calt': {
       fontFeatureSettings: "'calt'",
     },
-    '.liga-0-calt-0': {
-      fontFeatureSettings: "'liga' 0, 'calt' 0",
-    },
     '.liga': {
       fontFeatureSettings: "'liga'",
     },
+    // Fix for Firefox to make it inherit font-feature-settings from the default theme
+    'button, input, optgroup, select, textarea': {
+      fontFeatureSettings: 'inherit',
+    },
     '.syntax-highlighter-wrapper .hljs': {
       fontSize: '1rem',
       fontFamily: "'Roboto Mono', monospace",

libs/ui-toolkit/src/components/maintenance-page/maintenance-page.tsx

@@ -209,7 +209,7 @@ export const MaintenancePage = () => {
         </div>
       </div>
       <div className="flex mb-2">
-        <span className="font-alpha uppercase text-xl text-center">
+        <span className="font-alpha calt uppercase text-xl text-center">
           {t("We're doing some maintenance right now, check back later")}
         </span>
       </div>

libs/ui-toolkit/src/components/nav/nav.tsx

@@ -50,7 +50,7 @@ export const Nav = ({
   title,
 }: NavbarProps) => {
   const themeWrapperClasses = classNames(
-    'w-full overflow-y-hidden overflow-x-auto md:overflow-x-hidden font-alpha lg:text-lg',
+    'w-full overflow-y-hidden overflow-x-auto md:overflow-x-hidden font-alpha calt lg:text-lg',
     {
       dark: navbarTheme === 'dark',
     }
@@ -73,7 +73,7 @@ export const Nav = ({
           {icon}
           <h1
             className={classNames(
-              'h-full flex flex-col my-0 justify-center font-alpha uppercase',
+              'h-full flex flex-col my-0 justify-center font-alpha calt uppercase',
               { 'text-black': isYellow, 'text-white': !isYellow }
             )}
           >

libs/ui-toolkit/src/components/toast/toast.tsx

@@ -155,7 +155,7 @@ export const Toast = ({
         'w-[320px] rounded-md overflow-hidden',
         'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]',
         'text-black dark:text-white',
-        'font-alpha liga-0-calt-0 text-[14px] leading-[19px]',
+        'font-alpha calt text-[14px] leading-[19px]',
         // background
         {
           'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,

libs/ui-toolkit/src/primitives/typography.stories.tsx

@@ -20,7 +20,7 @@ const TextSample = ({ alternatives, isAlpha, type }: Args) => {
       <div
         className={classNames(
           'flex-grow flex flex-col justify-end text-left items-start',
-          { 'font-alpha': isAlpha },
+          { 'font-alpha calt': isAlpha },
           [alternatives, type]
         )}
       >
@@ -52,7 +52,7 @@ export default {
     },
     alternatives: {
       name: 'Font features',
-      options: ['none', 'calt', 'liga', 'liga-0-calt-0'],
+      options: ['none', 'calt', 'liga'],
       control: { type: 'select' },
     },
   },
@@ -61,5 +61,5 @@ export default {
 export const Default = Template;
 Default.args = {
   isAlpha: true,
-  alternatives: 'liga-0-calt-0',
+  alternatives: 'none',
 };

libs/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -7,7 +7,7 @@ export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="wallet-dialog-title"
-      className="text-2xl uppercase mb-6 text-center font-alpha"
+      className="text-2xl uppercase mb-6 text-center font-alpha calt"
     >
       {children}
     </h1>

libs/wallet/src/connect-dialog/view-connector-form.tsx

@@ -58,7 +58,7 @@ export function ViewConnectorForm({
         <Icon name={'chevron-left'} ariaLabel="back" size={4} />
       </button>
       <form onSubmit={handleSubmit(onSubmit)} data-testid="view-connector-form">
-        <h1 className="text-2xl uppercase mb-6 text-center font-alpha">
+        <h1 className="text-2xl uppercase mb-6 text-center font-alpha calt">
           {t('VIEW AS VEGA USER')}
         </h1>
         <p className="mb-4">