Skip to content

Commit

Permalink
applied type scale everywhere (prose), added all tokens to ds page, s…
Browse files Browse the repository at this point in the history 
…eparated TYPE tokens into TYPE and TYPESCALE (#5641)
  • Loading branch information
@dominikwilkowski
dominikwilkowski authored May 7, 2021
1 parent 79d092a commit c07ed09
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 89 deletions.
10 changes: 5 additions & 5 deletions docs/components/DocumentEditorDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,11 +310,11 @@ export const DocumentEditorDemo = () => {
marginBottom: '1em',
},
'h1,h2,h3,h4,h5,h6': { fontWeight: 'bold' },
h1: { fontSize: '2em' },
h2: { fontSize: '1.5em' },
h3: { fontSize: '1.17em' },
h5: { fontSize: '0.83em' },
h6: { fontSize: '0.67em' },
h1: { fontSize: 'var(--font-xxlarge)' },
h2: { fontSize: 'var(--font-large)' },
h3: { fontSize: 'var(--font-medium)' },
h5: { fontSize: 'var(--font-xsmall)' },
h6: { fontSize: 'var(--font-xxsmall)' },
'ul, ol': {
paddingLeft: 40,
},
Expand Down
3 changes: 2 additions & 1 deletion docs/components/Theme.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/** @jsx jsx */
import { jsx, Global } from '@keystone-ui/core';

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

export function Theme() {
return (
Expand All @@ -11,6 +11,7 @@ export function Theme() {
...COLORS,
...SPACE,
...TYPE,
...TYPESCALE,
'--wrapper-width': '67rem',
},
}}
Expand Down
2 changes: 2 additions & 0 deletions docs/lib/TOKENS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ export const TYPE = {
'--font-body':
'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
'--font-mono': '"Source Code Pro", monospace',
};

export const TYPESCALE = {
'--font-xxsmall': '0.75rem',
'--font-xsmall': '0.875rem',
'--font-small': '1rem',
Expand Down
154 changes: 73 additions & 81 deletions docs/lib/prose-lite.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
const round = (num: number) =>
num
.toFixed(7)
.replace(/(\.[0-9]+?)0+$/, '$1')
.replace(/\.0$/, '');
const rem = (px: number) => `${round(px / 16)}rem`;
const em = (px: number, base: number) => `${round(px / base)}em`;

export const proseStyles = {
color: 'var(--gray-800)',
maxWidth: '65ch',
Expand All @@ -15,10 +7,10 @@ export const proseStyles = {
},
'[class~="lead"]': {
color: 'var(--gray-600)',
fontSize: em(20, 16),
lineHeight: round(32 / 20),
marginTop: em(24, 20),
marginBottom: em(24, 20),
fontSize: 'var(--font-medium)',
lineHeight: 1.6,
marginTop: '1.2em',
marginBottom: '1.2em',
},
'blockquote p:first-of-type::before, blockquote p:last-of-type::after': {
content: '""',
Expand Down Expand Up @@ -49,7 +41,7 @@ export const proseStyles = {
},
'ol > li': {
position: 'relative' as const,
paddingLeft: em(28, 16),
paddingLeft: '1.75em',
},
'ol > li::before': {
content: 'counter(list-item, var(--list-counter-style, decimal)) "."',
Expand All @@ -63,16 +55,16 @@ export const proseStyles = {
position: 'absolute' as const,
backgroundColor: 'var(--gray-300)',
borderRadius: '50%',
width: em(6, 16),
height: em(6, 16),
top: `calc(${em(28 / 2, 16)} - ${em(3, 16)})`,
left: em(4, 16),
width: '0.375em',
height: '0.375em',
top: `calc(0.875em - 0.1875em)`,
left: '0.25em',
},
hr: {
borderColor: 'var(--gray-200)',
borderTopWidth: 1,
marginTop: em(48, 16),
marginBottom: em(48, 16),
marginTop: '3em',
marginBottom: '3em',
},
blockquote: {
fontWeight: 500,
Expand All @@ -81,46 +73,46 @@ export const proseStyles = {
borderLeftWidth: '0.25rem',
borderLeftColor: 'var(--gray-200)',
quotes: '"\\201C""\\201D""\\2018""\\2019"',
marginTop: em(32, 20),
marginBottom: em(32, 20),
paddingLeft: em(20, 20),
marginTop: '1.6em',
marginBottom: '1.6em',
paddingLeft: '1em',
},
h1: {
color: 'var(--gray-900)',
fontWeight: 800,
fontSize: em(36, 16),
fontSize: 'var(--font-xxlarge)',
marginTop: '0',
marginBottom: em(32, 36),
lineHeight: round(40 / 36),
marginBottom: '0.8888888889em',
lineHeight: 1.1111111,
},
h2: {
color: 'var(--gray-900)',
fontWeight: 700,
fontSize: em(24, 16),
marginTop: em(48, 24),
marginBottom: em(24, 24),
lineHeight: round(32 / 24),
fontSize: 'var(--font-large)',
marginTop: '2em',
marginBottom: '1em',
lineHeight: 1.3333333,
},
h3: {
color: 'var(--gray-900)',
fontWeight: 600,
fontSize: em(20, 16),
marginTop: em(32, 20),
marginBottom: em(12, 20),
lineHeight: round(32 / 20),
fontSize: 'var(--font-medium)',
marginTop: '1.6em',
marginBottom: '0.6em',
lineHeight: 1.6,
},
h4: {
color: 'var(--gray-900)',
fontWeight: 600,
marginTop: em(24, 16),
marginBottom: em(8, 16),
lineHeight: round(24 / 16),
marginTop: '1.5em',
marginBottom: '0.5em',
lineHeight: 1.5,
},
'figure figcaption': {
color: 'var(--gray-500)',
fontSize: em(14, 16),
lineHeight: round(20 / 14),
marginTop: em(12, 14),
fontSize: 'var(--font-xsmall)',
lineHeight: 1.4285714,
marginTop: '0.8571428571em',
},
code: {
color: 'var(--gray-900)',
Expand All @@ -134,15 +126,15 @@ export const proseStyles = {
color: 'var(--gray-800)',
backgroundColor: 'var(--gray-50)',
border: `1px solid ${'var(--gray-100)'}`,
fontSize: em(14, 16),
lineHeight: round(24 / 14),
marginTop: em(24, 14),
marginBottom: em(24, 14),
borderRadius: rem(6),
paddingTop: em(12, 14),
paddingRight: em(16, 14),
paddingBottom: em(12, 14),
paddingLeft: em(16, 14),
fontSize: 'var(--font-xsmall)',
lineHeight: 1.7142857,
marginTop: '1.7142857143em',
marginBottom: '1.7142857143em',
borderRadius: '0.375rem',
paddingTop: '0.8571428571em',
paddingRight: '1.1428571429em',
paddingBottom: '0.8571428571em',
paddingLeft: '1.1428571429em',
},
'pre code': {
backgroundColor: 'transparent',
Expand All @@ -162,10 +154,10 @@ export const proseStyles = {
width: '100%',
tableLayout: 'auto' as const,
textAlign: 'left' as const,
marginTop: em(32, 16),
marginBottom: em(32, 16),
fontSize: em(14, 16),
lineHeight: round(24 / 14),
marginTop: '2em',
marginBottom: '2em',
fontSize: 'var(--font-xsmall)',
lineHeight: 1.7142857,
},
thead: {
color: 'var(--gray-900)',
Expand All @@ -175,9 +167,9 @@ export const proseStyles = {
},
'thead th': {
verticalAlign: 'bottom',
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
paddingLeft: em(8, 14),
paddingRight: '0.5714285714em',
paddingBottom: '0.5714285714em',
paddingLeft: '0.5714285714em',
},
'tbody tr': {
borderBottomWidth: '1px',
Expand All @@ -188,65 +180,65 @@ export const proseStyles = {
},
'tbody td': {
verticalAlign: 'top',
paddingTop: em(8, 14),
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
paddingLeft: em(8, 14),
paddingTop: '0.5714285714em',
paddingRight: '0.5714285714em',
paddingBottom: '0.5714285714em',
paddingLeft: '0.5714285714em',
},
fontSize: rem(16),
lineHeight: round(28 / 16),
fontSize: 'var(--font-small)',
lineHeight: 1.75,
'> p': {
marginTop: em(20, 16),
marginBottom: em(20, 16),
marginTop: '1.25em',
marginBottom: '1.25em',
},
img: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
marginTop: '2em',
marginBottom: '2em',
},
video: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
marginTop: '2em',
marginBottom: '2em',
},
figure: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
marginTop: '2em',
marginBottom: '2em',
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
'h2 code': {
fontSize: em(21, 24),
fontSize: 'var(--font-xsmall)',
},
'h3 code': {
fontSize: em(18, 20),
fontSize: 'var(--font-xsmall)',
},
'ol, ul': {
listStyle: 'none',
margin: `${em(20, 16)} 0`,
margin: `1.25em 0`,
padding: 0,
},
li: {
marginTop: em(8, 16),
marginBottom: em(8, 16),
marginTop: '0.5em',
marginBottom: '0.5em',
},
'ul > li': {
paddingLeft: em(28, 16),
paddingLeft: '1.75em',
position: 'relative' as const,
},
'> ul > li p': {
marginTop: em(12, 16),
marginBottom: em(12, 16),
marginTop: '0.75em',
marginBottom: '0.75em',
},
'> ul > li > *:first-child, > ul > li > *:last-child': {
marginTop: em(20, 16),
marginTop: '1.25em',
},
'> ol > li > *:first-child, > ol > li > *:last-child': {
marginTop: em(20, 16),
marginTop: '1.25em',
},
'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(12, 16),
marginBottom: em(12, 16),
marginTop: '0.75em',
marginBottom: '0.75em',
},
'hr + *, h2 + *, h3 + *, h4 + *, > :first-child': {
marginTop: '0',
Expand Down
3 changes: 3 additions & 0 deletions docs/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ export default function App({ Component, pageProps }: AppProps) {
*, ::before, ::after {
box-sizing: border-box;
}
body {
font-size: var(--font-small);
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
margin: 0;
}
Expand Down
Loading

1 comment on commit c07ed09

@vercel
Copy link

@vercel vercel bot commented on c07ed09 May 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.