LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matthew Russell 2023-02-27 01:13:19 -08:00 committed by GitHub
parent 9166a85a55
commit da209d96b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 44 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/explorer/src/app/components/empty-list/empty-list.tsx
View File

@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {
<div className="mt-4"> <div className="mt-4">
{heading ? ( {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} {heading}
</h1> </h1>
) : null} ) : null}
{label ? ( {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} ) : null}
</div> </div>
</div> </div>

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

@ -249,7 +249,7 @@ export const MarketDetails = ({
<> <>
{panels.map((p) => ( {panels.map((p) => (
<div className="mb-3"> <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} {p.content}
</div> </div>
))} ))}

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

@ -83,7 +83,7 @@ const NestedDataListItem = ({
}); });
const titleClasses = classNames({ 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, 'text-base font-medium whitespace-nowrap': !hasChildren,
}); });

2
apps/explorer/src/app/components/page-header/page-header.tsx
View File

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

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

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

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

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

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

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

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

@ -9,7 +9,7 @@ export type Metric = components['schemas']['vegaDispatchMetric'];
export const wrapperClasses = 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] '; '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 = 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']; export type Transfer = components['schemas']['commandsv1Transfer'];

2
apps/explorer/src/app/routes/parties/id/index.tsx
View File

@ -68,7 +68,7 @@ const Party = () => {
return ( return (
<section> <section>
<h1 <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" data-testid="parties-header"
> >
{t('Public key')} {t('Public key')}

2
apps/liquidity-provision-dashboard/src/app/components/dashboard/dashboard.tsx
View File

@ -8,7 +8,7 @@ export function Dashboard() {
<> <>
<div className="px-16 pt-20 pb-12 bg-greys-light-100"> <div className="px-16 pt-20 pb-12 bg-greys-light-100">
<div className="max-w-screen-xl mx-auto"> <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')} {t('Top liquidity opportunities')}
</h1> </h1>

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

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

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

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

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

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

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

@ -44,7 +44,7 @@ export const Market = ({
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr <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" }} style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
> >
<th className="font-medium px-4">{t('Volume (24h)')}</th> <th className="font-medium px-4">{t('Volume (24h)')}</th>

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

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

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

@ -13,7 +13,7 @@ const Remainder = () => (
); );
const COPY_CLASS = 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 = ({ const Tooltip = ({
children, children,

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

@ -59,10 +59,10 @@ const ROWS = [
export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => { export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
return ( return (
<Dialog size="medium" open={isOpen} onChange={onChange}> <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')} {t('Health')}
</h1> </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( {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.' '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"> <table className="table-fixed">
<thead className="border-b border-greys-light-300"> <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')} {t('Market status')}
</th> </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')} {t('Liquidity status')}
</th> </th>
</thead> </thead>
@ -85,12 +85,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
<td <td
className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })} 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)} {t(r.title)}
</h2> </h2>
<p className="font-medium font-alpha text-lg liga-0-calt-0"> <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
{t(r.copy)}
</p>
</td> </td>
<td <td
className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })} className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}

2
apps/token/src/routes/rewards/no-rewards.tsx
View File

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

2
apps/trading/pages/_document.page.tsx
View File

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

2
libs/network-stats/src/components/stats-manager/stats-manager.tsx
View File

@ -63,7 +63,7 @@ export const StatsManager = ({ className }: StatsManagerProps) => {
<div className={classes}> <div className={classes}>
<h3 <h3
data-testid="stats-environment" 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}`) || {(error && `/ ${error}`) ||
(data ? `/ ${VEGA_ENV}` : '/ Connecting...')} (data ? `/ ${VEGA_ENV}` : '/ Connecting...')}

28
libs/tailwindcss-config/src/theme.js
View File

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

7
libs/tailwindcss-config/src/vega-custom-classes.js
View File

@ -7,12 +7,13 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
'.calt': { '.calt': {
fontFeatureSettings: "'calt'", fontFeatureSettings: "'calt'",
}, },
'.liga-0-calt-0': {
fontFeatureSettings: "'liga' 0, 'calt' 0",
},
'.liga': { '.liga': {
fontFeatureSettings: "'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': { '.syntax-highlighter-wrapper .hljs': {
fontSize: '1rem', fontSize: '1rem',
fontFamily: "'Roboto Mono', monospace", fontFamily: "'Roboto Mono', monospace",

2
libs/ui-toolkit/src/components/maintenance-page/maintenance-page.tsx
View File

@ -209,7 +209,7 @@ export const MaintenancePage = () => {
</div> </div>
</div> </div>
<div className="flex mb-2"> <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")} {t("We're doing some maintenance right now, check back later")}
</span> </span>
</div> </div>

4
libs/ui-toolkit/src/components/nav/nav.tsx
View File

@ -50,7 +50,7 @@ export const Nav = ({
title, title,
}: NavbarProps) => { }: NavbarProps) => {
const themeWrapperClasses = classNames( 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', dark: navbarTheme === 'dark',
} }
@ -73,7 +73,7 @@ export const Nav = ({
{icon} {icon}
<h1 <h1
className={classNames( 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 } { 'text-black': isYellow, 'text-white': !isYellow }
)} )}
> >

2
libs/ui-toolkit/src/components/toast/toast.tsx
View File

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

6
libs/ui-toolkit/src/primitives/typography.stories.tsx
View File

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

2
libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
View File

@ -7,7 +7,7 @@ export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
return ( return (
<h1 <h1
data-testid="wallet-dialog-title" 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} {children}
</h1> </h1>

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

@ -58,7 +58,7 @@ export function ViewConnectorForm({
<Icon name={'chevron-left'} ariaLabel="back" size={4} /> <Icon name={'chevron-left'} ariaLabel="back" size={4} />
</button> </button>
<form onSubmit={handleSubmit(onSubmit)} data-testid="view-connector-form"> <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')} {t('VIEW AS VEGA USER')}
</h1> </h1>
<p className="mb-4"> <p className="mb-4">