filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-19 18:28:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

system: design system tweaks

Browse Source
This commit is contained in:
@wwwjim 2020-09-09 02:40:23 -07:00
parent 79f8457c53
commit af9d11f3f6
3 changed files with 37 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
common/styles/global.js
View File

@ -230,7 +230,6 @@ export const injectCodeBlockStyles = () => css`
code,
pre {
color: #fff5b1;
text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
font-family: ${Constants.font.code};
font-size: 12px;
text-align: left;
@ -280,13 +279,12 @@ export const injectCodeBlockStyles = () => css`
.token.unit,
.token.hexcode,
.token.deleted {
color: cyan;
color: ${Constants.system.moonstone};
}
.token.property,
.token.selector {
color: #ffdf5d;
text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
}
.token.function-name {
@ -299,8 +297,7 @@ export const injectCodeBlockStyles = () => css`
.token.function,
.token.constant,
.token.symbol {
color: #c8e1ff;
text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
color: ${Constants.system.gray};
}
.token.important,
@ -308,8 +305,7 @@ export const injectCodeBlockStyles = () => css`
.token.keyword,
.token.selector .token.class,
.token.builtin {
color: #f9c513;
text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
color: #FFFFFF;
}
.token.string,
@ -323,7 +319,7 @@ export const injectCodeBlockStyles = () => css`
.token.operator,
.token.entity,
.token.url {
color: #f9c513;
color: ${Constants.system.moonstone};
}
.token.important,

60
components/system/SystemPage.js
View File

@ -2,6 +2,7 @@ import Head from "next/head";
import * as React from "react";
import * as SVG from "~/common/svg";
import * as SVGLogo from "~/common/logo";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
@ -178,6 +179,9 @@ export default class SystemPage extends React.Component {
</Head>
<div css={STYLES_BODY}>{children}</div>
<div css={STYLES_SIDEBAR}>
<a css={STYLES_LINK} href="/" style={{ marginTop: 0 }}>
<SVGLogo.Logo height="32px" style={{ marginBottom: 24 }} />
</a>
<span css={STYLES_LABEL}>Experiences</span>
<SidebarLink
url={url}
@ -299,62 +303,6 @@ export default class SystemPage extends React.Component {
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
View source
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open(
"https://github.com/filecoin-shipyard/js-lotus-client"
);
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
JS Lotus Client
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open("https://github.com/textileio/js-powergate-client");
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
JS Powergate Client
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open("https://docs.textile.io/");
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Textile Documentation
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open("https://docs.lotu.sh/");
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Lotus Documentation
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open("https://docs.filecoin.io/");
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Filecoin Documentation
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
window.open("https://filecoin.io/#community");
}}
>
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Community
</div>
</div>
</div>
);

41
pages/_/system/index.js
View File

@ -26,18 +26,23 @@ export default class SystemPageRoot extends React.Component {
<System.H1>SDS {Constants.values.sds}</System.H1>
<br />
<System.P>
The <strong>Slate Design System</strong> is an open source resource with examples of components, constants,
and experiences. Any code changes made to the components in the Design System will change the appearance and
function of{" "}
The <strong>Slate Design System</strong> is an open source resource
with examples of components, constants, and experiences. Any code
changes made to the components in the Design System will change the
appearance and function of{" "}
<a href="https://slate.host" target="_blank">
Slate
</a>{" "}
in production. <br />
<br />
We wanted to build product out in the open, so other Filecoin & IPFS developers could freely use the code to
make their own applications on top of the <a href="https://filecoin.io">Filecoin Network</a>. A lot of the
functionality of Slate is made possible by{" "}
<a href="https://github.com/textileio/js-powergate-client" target="_blank">
We wanted to build product out in the open, so other Filecoin & IPFS
developers could freely use the code to make their own applications on
top of the <a href="https://filecoin.io">Filecoin Network</a>. A lot
of the functionality of Slate is made possible by{" "}
<a
href="https://github.com/textileio/js-powergate-client"
target="_blank"
>
Textile's Powergate
</a>{" "}
and{" "}
@ -51,8 +56,12 @@ export default class SystemPageRoot extends React.Component {
<System.H2>slate-react-system</System.H2>
<br />
<System.P>
You can use these components, experiences, and constants in your own React projects. First, install the{" "}
<a href="https://github.com/filecoin-project/slate-react-system" target="_blank">
You can use these components, experiences, and constants in your own
React projects. First, install the{" "}
<a
href="https://github.com/filecoin-project/slate-react-system"
target="_blank"
>
npm module
</a>
:
@ -107,17 +116,25 @@ class Example extends React.Component {
Whats next?
</System.P>
<System.UL>
<System.LI>Try using some components or experiences in your React projects.</System.LI>
<System.LI>
Try using some components or experiences in your React projects.
</System.LI>
<System.LI>
Start a new project using an{" "}
<a href="https://github.com/filecoin-project/slate-react-system/tree/master/example" target="_blank">
<a
href="https://github.com/filecoin-project/slate-react-system/tree/master/example"
target="_blank"
>
example
</a>
.
</System.LI>
<System.LI>
Try using slate-react-system in a{" "}
<a href="https://github.com/jimmylee/next-express-emotion" target="_blank">
<a
href="https://github.com/jimmylee/next-express-emotion"
target="_blank"
>
starter React boilerplate
</a>
.