mirror of https://github.com/sgoudham/carbon.git
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.
117 lines
1.9 KiB
JavaScript
117 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
|
|
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>
|
|
)
|