slate/pages/system/colors.js
2020-07-03 22:41:36 -07:00

112 lines
2.7 KiB
JavaScript

import * as React from "react";
import * as Strings from "~/common/strings";
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";
const STYLES_COLOR_BAR = css`
width: 100%;
display: flex;
align-items: center;
padding: 72px 24px 0 0px;
`;
const STYLES_COLOR_TEXT = css`
display: block;
text-transform: uppercase;
letter-spacing: 0.2px;
font-size: 12px;
padding: 8px;
color: ${Constants.system.white};
background-color: rgba(0, 0, 0, 0.4);
margin-top: 8px;
`;
export default class SystemPageColors extends React.Component {
render() {
return (
<SystemPage
title="SDS: Colors"
description="..."
url="https://fps.onrender.com/system/colors"
>
<System.H1>
Colors <ViewSourceLink file="system/colors.js" />
</System.H1>
<br />
<br />
<System.P>All of the colors the Filecoin Client uses.</System.P>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P>Import Constants.</System.P>
<br />
<br />
<System.CodeBlock>{`import { Constants } from 'slate-react-system';`}</System.CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Declare Constants.</System.P>
<br />
<System.CodeBlock>
{`{Constants.system.white};
{Constants.system.foreground};
{Constants.system.gray};
{Constants.system.border};
{Constants.system.darkGray};
{Constants.system.black};
{Constants.system.pitchBlack};
{Constants.system.brand};
{Constants.system.green};
{Constants.system.yellow};
{Constants.system.red};`}
</System.CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
{Object.keys(Constants.system).map((each) => {
const hex = Constants.system[each];
const rgba = Strings.hexToRGBA(hex);
return (
<div
key={each}
css={STYLES_COLOR_BAR}
style={{
backgroundColor: hex,
color: Constants.system.black,
}}
>
<span css={STYLES_COLOR_TEXT}>{each.toUpperCase()}</span>
<br />
<span css={STYLES_COLOR_TEXT}>{hex}</span>
<br />
<span css={STYLES_COLOR_TEXT}>{rgba}</span>
</div>
);
})}
</SystemPage>
);
}
}