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

chore(trading): add alpha font to trading (#2833)

Browse Source
This commit is contained in:
macqbat 2023-02-02 19:25:14 +01:00 committed by GitHub
parent b69fb3b0e5
commit 3f7692ce75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -10,6 +10,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
'.liga-0-calt-0': {
fontFeatureSettings: "'liga' 0, 'calt' 0",
},
'.liga': {
fontFeatureSettings: "'liga'",
},
'.syntax-highlighter-wrapper .hljs': {
fontSize: '1rem',
fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",

2
libs/ui-toolkit/src/index.ts
View File

@ -3,3 +3,5 @@ export * from './components';
// Utils
export * from './utils/intent';
export * from './primitives/typography.stories';

73
libs/ui-toolkit/src/primitives/typography.stories.mdx
View File

@ -1,73 +0,0 @@
import {
Meta,
ColorPalette,
ColorItem,
Typeset,
Canvas,
} from '@storybook/addon-docs/blocks';
import { theme } from '@vegaprotocol/tailwindcss-config';
<Meta title="Primitives/Typography" />
# Typography
## Headers
### text-3xl
<Canvas>
<div class="text-3xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
### text-2xl
<Canvas>
<div class="text-2xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
### text-xl
<Canvas>
<div class="text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
### text-lg
<Canvas>
<div class="text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
## Body
### text-base
<Canvas>
<div class="text-base">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
### text-sm
<Canvas>
<div class="text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>
### text-xs
<Canvas>
<div class="text-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</Canvas>

65
libs/ui-toolkit/src/primitives/typography.stories.tsx Normal file
View File

@ -0,0 +1,65 @@
import classNames from 'classnames';
import type { ComponentStory } from '@storybook/react';
type Args = { type: string; alternatives: string; isAlpha: boolean };
const sizeArr = [
'text-3xl',
'text-2xl',
'text-xl',
'text-lg',
'text-lg',
'text-base',
'text-sm',
'text-xs',
];
const TextSample = ({ alternatives, isAlpha, type }: Args) => {
return (
<div className="m-4 flex h-16">
<div className="text-small flex flex-col mr-16 justify-end w-32">
{type}:
</div>
<div
className={classNames(
'flex-grow flex flex-col justify-end text-left items-start',
{ 'font-alpha': isAlpha },
[alternatives, type]
)}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
);
};
const Template: ComponentStory<typeof TextSample> = (
args: Omit<Args, 'type'>
) => (
<div className="m-4">
<h1 className="sbdocs sbdocs-h1">Typography</h1>
{sizeArr.map((size) => (
<TextSample {...args} type={size} />
))}
</div>
);
export default {
title: 'Primitives/Typography',
component: Template,
argTypes: {
isAlpha: {
name: 'Alpha Lyrae font',
options: [true, false],
control: { type: 'radio' },
},
alternatives: {
name: 'Font features',
options: ['none', 'calt', 'liga', 'liga-0-calt-0'],
control: { type: 'select' },
},
},
};
export const Default = Template;
Default.args = {
isAlpha: true,
alternatives: 'liga-0-calt-0',
};