keystone/docs/pages/ds.tsx at main · hmmhmmhm/keystone

Repository navigation

100

101

102

103

/** @jsxRuntime classic */

/** @jsx jsx */

import { Fragment, useState } from 'react';

import { jsx } from '@emotion/react';

import { CodeWindow, WindowWrapper, WindowL, WindowR } from '../components/content/CodeWindow';

import { GitHubButton } from '../components/primitives/GitHubButton';

import { COLORS, TYPESCALE, TYPE, SPACE } from '../lib/TOKENS';

import { Highlight } from '../components/primitives/Highlight';

import { styleMap, Type } from '../components/primitives/Type';

import { InlineCode } from '../components/primitives/Code';

import { Status } from '../components/primitives/Status';

import { Button } from '../components/primitives/Button';

import { Alert } from '../components/primitives/Alert';

import { Badge } from '../components/primitives/Badge';

import { Emoji } from '../components/primitives/Emoji';

import { Stack } from '../components/primitives/Stack';

import { Field } from '../components/primitives/Field';

import { Well } from '../components/primitives/Well';

import * as allIcons from '../components/icons';

import { Page } from '../components/Page';

const EXCEPT_ICONS = ['FrontEndLogos', 'ClientLogos'];

function Divider() {

return (

<hr

css={{

margin: '3rem',

border: 'none',

height: '0.4rem',

backgroundImage:

'linear-gradient(135deg, white 25%, transparent 25%),' +

'linear-gradient(225deg, white 25%, transparent 25%),' +

'linear-gradient(45deg, white 25%, transparent 25%),' +

'linear-gradient(315deg, white 25%, transparent 25%)',

backgroundPosition: '0.5rem 0, 0.5rem 0, 0 0, 0 0',

backgroundSize: '1rem 0.4rem',

backgroundRepeat: 'repeat',

backgroundColor: 'var(--border)',

}}

);

}

function Box() {

return (

<div

css={{

background: 'var(--text)',

height: '2rem',

width: '2rem',

borderRadius: '3px',

}}

);

}

type SwatchProps = {

name?: string;

color?: string;

gradient?: { grad1: string; grad2: string };

};

function Swatch({ name, color, gradient }: SwatchProps) {

return (

<div

css={{

display: 'inline-block',

width: '4rem',

height: '4rem',

margin: '0 auto',

border: '3px solid #fff',

borderRadius: '100%',

boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',

background: gradient

? `linear-gradient(135deg, ${gradient.grad1} 4.86%, ${gradient.grad2} 97.92%)`

: color,

}}

<span

css={{

display: 'block',

padding: '0 0 1rem 0',

}}

</span>

</div>

);

}

export default function DS() {

const [icon, setIcon] = useState<allIcons.IconGradient | null>(null);

let firstGrad: string;

return (

<Page

title={'Design System Components and Tokens'}

description={'Design System Components & Tokens for the KeystoneJS website'}

Design System

</Type>

Contents

</Type>

<ul>

<li>

Colors

</Type>

</li>

<li>

Font sizes

</Type>

</li>

<li>

Font stacks

</Type>

</li>

<li>

Spaces

</Type>

</li>

<li>

Type

</Type>

</li>

<li>

Components

</Type>

</li>

</ul>

Colors light

</Type>

<div

css={{

display: 'grid',

gridTemplateColumns: 'repeat(auto-fit, minmax(8.75rem, 1fr))',

gap: '0.5rem',

background: COLORS.light['--app-bg'],

padding: '2rem 0',

}}

{Object.entries(COLORS.light)

.filter(([name]) => name !== '--theme')

.filter(([name]) => !name.startsWith('--grad'))

.map(([name, color]) => (

))}

{Object.entries(COLORS.light)

8000

.filter(([name]) => name.startsWith('--grad'))

.map(([name, color]) => {

if (name.endsWith('-2')) {

return (

<Swatch

key={`light-grad-${name}`}

name={name.split('-')[2]}

gradient={{ grad1: firstGrad, grad2: color }}

);

} else {

firstGrad = color;

}

})}

</div>

Colors dark

</Type>

<div

css={{

display: 'grid',

gridTemplateColumns: 'repeat(auto-fit, minmax(8.75rem, 1fr))',

gap: '0.5rem',

background: COLORS.dark['--app-bg'],

padding: '2rem 0',

}}

{Object.entries(COLORS.dark)

.filter(([name]) => name !== '--theme')

.filter(([name]) => !name.startsWith('--grad'))

.map(([name, color]) => (

))}

{Object.entries(COLORS.dark)

.filter(([name]) => name.startsWith('--grad'))

.map(([name, color]) => {

if (name.endsWith('-2')) {

return (

<Swatch

key={`light-grad-${name}`}

name={name.split('-')[2]}

gradient={{ grad1: firstGrad, grad2: color }}

);

} else {

firstGrad = color;

}

})}

</div>

Font sizes

</Type>

{Object.entries(TYPESCALE).map(([name]) => (

<span

key={name}

css={{

display: 'block',

margin: 'var(--space-large) 0',

fontSize: `var(${name})`,

}}

{name}

</span>

))}

Font stacks

</Type>

{Object.entries(TYPE).map(([name, stack]) => (

<span

key={name}

css={{

display: 'block',

margin: 'var(--space-large) 0',

fontSize: 'var(--font-large)',

fontFamily: `var(${name})`,

}}

{name} aAgGzZij

<br />

{stack}

</span>

))}

Space

</Type>

{Object.entries(SPACE).map(([name, size]) => (

{name} - {size}

<div

css={{

margin: 'var(--space-large) 0',

width: `var(${name})`,

height: `var(${name})`,

background: 'var(--brand-bg)',

}}

</Fragment>

))}

Type

</Type>

{(Object.keys(styleMap) as Array<keyof typeof styleMap>).map(style => (

Type {style}

</Type>

))}

Components

</Type>

InlineCode

</Type>

Status

</Type>

<div

css={{

display: 'inline-grid',

gap: '0.5rem',

justifyItems: 'baseline',

}}

</div>

Emoji

</Type>

Stack

</Type>

<Stack>

<Box />

</Stack>

<br />

<Box />

</Stack>

Alert

</Type>

<Alert>Neutral alert</Alert>

<Alert look="tip">Warning alert</Alert>

<Alert look="warn">Warning alert</Alert>

<Alert look="error">Error alert</Alert>

</Stack>

Well

</Type>

Learn how to use our CLI to get Keystone’s Admin UI and GraphQL API running in a new local

project folder.

</Well>

Learn how to run Keystone in the same folder as your frontend code and commit everything

to Git. You end up with a queryable GraphQL endpoint running live on Vercel for free.

</Well>

</Stack>

Learn how to use our CLI to get Keystone’s Admin UI and GraphQL API running in a new local

project folder.

</Well>

Learn how to run Keystone in the same folder as your frontend code and commit everything

to Git. You end up with a queryable GraphQL endpoint running live on Vercel for free.

</Well>

</Stack>

Learn how to use our CLI to get Keystone’s Admin UI and GraphQL API running in a new local

project folder.

</Well>

Learn how to run Keystone in the same folder as your frontend code and commit everything

to Git. You end up with a queryable GraphQL endpoint running live on Vercel for free.

</Well>

</Stack>

Learn how to use our CLI to get Keystone’s Admin UI and GraphQL API running in a new local

project folder.

</Well>

Learn how to run Keystone in the same folder as your frontend code and commit everything

to Git. You end up with a queryable GraphQL endpoint running live on Vercel for free.

</Well>

</Stack>

Button

</Type>

<Button>Button</Button>

<Button disabled>Button</Button>

<Button loading>Button</Button>

</Stack>

</div>

<Button look="danger">Delete</Button>

Delete

</Button>

Delete

</Button>

</Stack>

</div>

<Button look="soft">Delete</Button>

Delete

</Button>

Delete

</Button>

</Stack>

</div>

<Button look="text">Logout</Button>

Logout

</Button>

Logout

</Button>

</Stack>

</div>

Get Started

</Button>

Get Started <allIcons.ArrowR />

</Button>

Get Started

</Button>

</Stack>

</div>

Field

</Type>

</Stack>

GitHubButton

</Type>

Icons

</Type>

Set icons to:

<ul>

<li>

<label>

No gradient{' '}

<input

type="radio"

name="icon"

checked={icon === null}

=> setIcon(null)}

</label>

</li>

<li>

<label>

Gradient 1{' '}

<input

type="radio"

name="icon"

checked={icon === 'grad1'}

=> setIcon('grad1')}

</label>

</li>

<li>

<label>

Gradient 2{' '}

<input

type="radio"

name="icon"

checked={icon === 'grad2'}

=> setIcon('grad2')}

</label>

</li>

<li>

<label>

Gradient 3{' '}

<input

type="radio"

name="icon"

checked={icon === 'grad3'}

=> setIcon('grad3')}

</label>

</li>

<li>

<label>

Gradient 4{' '}

<input

type="radio"

name="icon"

checked={icon === 'grad4'}

=> setIcon('grad4')}

</label>

</li>

<li>

<label>

Gradient 5{' '}

<input

type="radio"

name="icon"

checked={icon === 'grad5'}

=> setIcon('grad5')}

</label>

</li>

</ul>

<div

css={{

display: 'grid',

gridTemplateColumns: 'repeat(auto-fit, minmax(7.5rem, 1fr))',

gap: '0.5rem',

}}

{Object.entries(allIcons)

.filter(([i]) => !EXCEPT_ICONS.includes(i))

.map(([key, Icon]) => (

<div

key={key}

css={{

textAlign: 'center',

}}

<Icon

css={{

display: 'block',

height: '2rem',

margin: '0 auto',

}}

grad={icon}

</div>

))}

</div>

Badge

</Type>

<div

css={{

display: 'grid',

gap: '0.5rem',

justifyItems: 'baseline',

}}

</div>

CodeWindow

</Type>

<Stack>

{`Some code...

Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code... Some code...

Some code... Some code... Some code... Some code... Some code... Some code...`}

</WindowL>

</CodeWindow>

{`Some code...

Some code...

Some code...`}

</WindowL>

</CodeWindow>

{`{

posts(take: 2, where: { title: { contains: "content" } }) {

title

author {

name

}

}`}

</WindowL>

{`{

"data": {

"posts": [

{

"title": "How structured content gives you superpowers",

"author": {

"name": "Tim"

}

{

"title": "Content Management for the Design System generation",

"author": {

"name": "Lauren"

}

]

}

}`}

</WindowR>

</WindowWrapper>

</CodeWindow>

</Stack>

Highlight

</Type>

Highlighting a <Highlight>part of some text</Highlight>

</Type>

<Type

as="p"

look="heading84"

css={{

maxWidth: '10em',

textAlign: 'right',

margin: '0 0 0 auto',

}}

Highlighting a <Highlight look="grad2">part of some text</Highlight>

</Type>

Highlighting <Highlight look="grad3">a part</Highlight>

</Type>

Highlighting a <Highlight look="grad4">part of</Highlight> some text

</Type>

Highlighting a <Highlight look="grad5">part of</Highlight> some text

</Type>

</Page>

);

}

FilesExpand file tree

ds.tsx

Latest commit

History

ds.tsx

File metadata and controls