You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/style/Typography.js

117 lines
1.9 KiB
JavaScript

import React from 'react'
7 years ago
export default () => (
<style jsx global>
{`
/* https://github.com/jxnblk/type-system
Brent Jackson
License: MIT
*/
:root {
--h0: 4.5rem;
--h1: 3rem;
--h2: 2.25rem;
--h3: 1.5rem;
--h4: 1.125rem;
--h5: 0.75rem;
--lh: calc(4 / 3);
--m1: calc(2 / 3 * 1em);
--m2: calc(4 / 3 * 1em);
--m3: calc(8 / 3 * 1em);
--m4: calc(16 / 3 * 1em);
--x1: 0.5rem;
--x2: 1rem;
--x3: 2rem;
--x4: 4rem;
--x5: 8rem;
--x6: 16rem;
}
body {
font-size: var(--h4);
line-height: var(--lh);
margin: 6rem 0;
}
h1,
h2,
h3 {
margin-top: var(--m1);
margin-bottom: 0;
}
h4,
h5,
h6,
p,
dl,
ol,
ul,
blockquote {
margin-top: var(--m2);
margin-bottom: var(--m2);
}
h1 {
font-size: var(--h2);
}
h2,
h3 {
font-size: var(--h3);
}
h4 {
font-size: var(--h4);
}
h5,
h6 {
font-size: var(--h5);
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.mt1 {
margin-top: var(--x1);
}
.mb1 {
margin-bottom: var(--x1);
}
.mt2 {
margin-top: var(--x2);
}
.mb2 {
margin-bottom: var(--x2);
}
.mt3 {
margin-top: var(--x3);
}
.mb3 {
margin-bottom: var(--x3);
}
.mt4 {
margin-top: var(--x4);
}
.mb4 {
margin-bottom: var(--x4);
}
.mt5 {
margin-top: var(--x5);
}
.mb5 {
margin-bottom: var(--x5);
}
.mt6 {
margin-top: var(--x6);
}
.mb6 {
margin-bottom: var(--x6);
}
`}
</style>
)