mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
211 lines
5.6 KiB
JavaScript
211 lines
5.6 KiB
JavaScript
import * as React from "react";
|
|
import * as System from "~/components/system";
|
|
import * as Constants from "~/common/constants";
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
import SystemPage from "~/components/system/SystemPage";
|
|
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
|
import CodeBlock from "~/components/system/CodeBlock";
|
|
|
|
const STYLES_CSS_LABEL = css`
|
|
display: block;
|
|
letter-spacing: 0.2px;
|
|
font-size: 12px;
|
|
color: ${Constants.system.darkGray};
|
|
margin-bottom: 8px;
|
|
`;
|
|
|
|
const STYLES_TYPE_JETBRAINS = css`
|
|
font-family: ${Constants.font.code};
|
|
`;
|
|
|
|
const STYLES_BOLD = css`
|
|
font-family: ${Constants.font.text};
|
|
font-weight: bold;
|
|
`;
|
|
|
|
const STYLES_ITALIC = css`
|
|
font-style: italic;
|
|
`;
|
|
|
|
const STYLES_UNDERLINE = css`
|
|
text-decoration: underline;
|
|
`;
|
|
|
|
export default class SystemPageTypography extends React.Component {
|
|
render() {
|
|
return (
|
|
<SystemPage
|
|
title="SDS: Typography"
|
|
description="..."
|
|
url="https://fps.onrender.com/system/typography"
|
|
>
|
|
<System.H1>
|
|
Typography <ViewSourceLink file="system/typography.js" />
|
|
</System.H1>
|
|
<br />
|
|
<br />
|
|
<System.P>
|
|
The Filecoin Client uses
|
|
<a href="https://rsms.me/inter/" target="_blank">
|
|
Inter
|
|
</a>{" "}
|
|
and{" "}
|
|
<a href="https://www.jetbrains.com/lp/mono/" target="_blank">
|
|
Jet Brains
|
|
</a>
|
|
.
|
|
</System.P>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<System.H2>Imports</System.H2>
|
|
<hr />
|
|
<br />
|
|
<System.P>
|
|
Import React and the typography components. If needed, import the
|
|
ViewSourceLink component.
|
|
</System.P>
|
|
<br />
|
|
<CodeBlock>
|
|
{`import { H1, H2, H3, H4, P, UL, OL, LI } from 'slate-react-system';
|
|
import ViewSourceLink from "~/components/system/ViewSourceLink";`}
|
|
</CodeBlock>
|
|
<br />
|
|
<br />
|
|
<System.H2>Typescale</System.H2>
|
|
<hr />
|
|
<br />
|
|
<span css={STYLES_CSS_LABEL}>1.953rem Semi Bold</span>
|
|
<System.H1>This is heading level 1</System.H1>
|
|
<br />
|
|
<span css={STYLES_CSS_LABEL}>1.563rem Medium</span>
|
|
<System.H2>This is heading level 2</System.H2>
|
|
<br />
|
|
<span css={STYLES_CSS_LABEL}>1.25rem Medium</span>
|
|
<System.H3>This is heading level 3</System.H3>
|
|
<br />
|
|
<span css={STYLES_CSS_LABEL}>1rem Medium</span>
|
|
<System.H4>This is heading level 4</System.H4>
|
|
<br />
|
|
<br />
|
|
<CodeBlock>
|
|
{`<System.H1>
|
|
This is heading level 1
|
|
</System.H1>
|
|
|
|
<System.H2>
|
|
This is heading level 2
|
|
</System.H2>
|
|
|
|
<System.H3>
|
|
This is heading level 3
|
|
</System.H3>
|
|
|
|
<System.H4>
|
|
This is heading level 4
|
|
</System.H4>`}
|
|
</CodeBlock>
|
|
<br />
|
|
<br />
|
|
<System.H2>Type Styles</System.H2>
|
|
<hr />
|
|
<br />
|
|
<System.P css={STYLES_BOLD}>This text is bold</System.P>
|
|
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
|
|
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>
|
|
<br />
|
|
<br />
|
|
<CodeBlock>
|
|
{`<System.P css={STYLES_BOLD}>This text is bold</System.P>
|
|
|
|
<System.P css={STYLES_ITALIC}>This text is italic</System.P>
|
|
|
|
<System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>`}
|
|
</CodeBlock>
|
|
<br />
|
|
<br />
|
|
<System.H2>Typefaces</System.H2>
|
|
<hr />
|
|
<br />
|
|
<System.H3>Inter</System.H3>
|
|
<System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
|
|
<System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
|
|
<System.P>0 1 2 3 4 5 6 7 8 9</System.P>
|
|
<br />
|
|
<br />
|
|
<System.H3>Jet Brains</System.H3>
|
|
<System.P css={STYLES_TYPE_JETBRAINS}>
|
|
a b c d e f g h i j k l m n o p q r s t u v w x y z
|
|
</System.P>
|
|
<System.P css={STYLES_TYPE_JETBRAINS}>
|
|
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
|
|
</System.P>
|
|
<System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>
|
|
<br />
|
|
<br />
|
|
<System.H2>Ordered and Unordered Lists</System.H2>
|
|
<hr />
|
|
<br />
|
|
<System.OL>
|
|
<System.LI>Rainbow</System.LI>
|
|
<System.LI>Cloud</System.LI>
|
|
<System.LI>Cake</System.LI>
|
|
</System.OL>
|
|
<br />
|
|
<System.UL>
|
|
<System.LI>Cloud</System.LI>
|
|
<System.LI>Cake</System.LI>
|
|
<System.LI>Rainbow</System.LI>
|
|
</System.UL>
|
|
<br />
|
|
<br />
|
|
<CodeBlock>
|
|
{`<System.OL>
|
|
<System.LI>Rainbow</System.LI>
|
|
<System.LI>Cloud</System.LI>
|
|
<System.LI>Cake</System.LI>
|
|
</System.OL>
|
|
|
|
<System.UL>
|
|
<System.LI>Cloud</System.LI>
|
|
<System.LI>Cake</System.LI>
|
|
<System.LI>Rainbow</System.LI>
|
|
</System.UL>`}
|
|
</CodeBlock>
|
|
<br />
|
|
<br />
|
|
<System.H2>Hyperlinks</System.H2>
|
|
<hr />
|
|
<br />
|
|
<System.P>
|
|
Internal References{" "}
|
|
<a href="https://slate.host" target="_blank">
|
|
Link to a page
|
|
</a>
|
|
</System.P>
|
|
<System.P>
|
|
External References <ViewSourceLink file="system/typography.js" />
|
|
</System.P>
|
|
<br />
|
|
<br />
|
|
<CodeBlock>
|
|
{`<System.P>
|
|
<a href="https://slate.host"
|
|
target="_blank">
|
|
Link to a page
|
|
</a>
|
|
</System.P>
|
|
|
|
<System.P>
|
|
<ViewSourceLink file="system/typography.js" />
|
|
</System.P>`}
|
|
</CodeBlock>
|
|
<br />
|
|
<br />
|
|
</SystemPage>
|
|
);
|
|
}
|
|
}
|