You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1694 lines
46 KiB
1694 lines
46 KiB
const colors = require("tailwindcss/colors");
|
|
const round = (num) =>
|
|
num
|
|
.toFixed(7)
|
|
.replace(/(\.[0-9]+?)0+$/, "$1")
|
|
.replace(/\.0$/, "");
|
|
const rem = (px) => `${round(px / 16)}rem`;
|
|
const em = (px, base) => `${round(px / base)}em`;
|
|
|
|
let defaultModifiers = {
|
|
sm: {
|
|
css: [
|
|
{
|
|
fontSize: rem(14),
|
|
lineHeight: round(24 / 14),
|
|
p: {
|
|
marginTop: em(16, 14),
|
|
marginBottom: em(16, 14),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: em(18, 14),
|
|
lineHeight: round(28 / 18),
|
|
marginTop: em(16, 18),
|
|
marginBottom: em(16, 18),
|
|
},
|
|
blockquote: {
|
|
marginTop: em(24, 18),
|
|
marginBottom: em(24, 18),
|
|
paddingLeft: em(20, 18),
|
|
},
|
|
h1: {
|
|
fontSize: em(30, 14),
|
|
marginTop: "0",
|
|
marginBottom: em(24, 30),
|
|
lineHeight: round(36 / 30),
|
|
},
|
|
h2: {
|
|
fontSize: em(20, 14),
|
|
marginTop: em(32, 20),
|
|
marginBottom: em(16, 20),
|
|
lineHeight: round(28 / 20),
|
|
},
|
|
h3: {
|
|
fontSize: em(18, 14),
|
|
marginTop: em(28, 18),
|
|
marginBottom: em(8, 18),
|
|
lineHeight: round(28 / 18),
|
|
},
|
|
h4: {
|
|
marginTop: em(20, 14),
|
|
marginBottom: em(8, 14),
|
|
lineHeight: round(20 / 14),
|
|
},
|
|
img: {
|
|
marginTop: em(24, 14),
|
|
marginBottom: em(24, 14),
|
|
},
|
|
video: {
|
|
marginTop: em(24, 14),
|
|
marginBottom: em(24, 14),
|
|
},
|
|
figure: {
|
|
marginTop: em(24, 14),
|
|
marginBottom: em(24, 14),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
fontSize: em(12, 14),
|
|
lineHeight: round(16 / 12),
|
|
marginTop: em(8, 12),
|
|
},
|
|
code: {
|
|
fontSize: em(12, 14),
|
|
},
|
|
"h2 code": {
|
|
fontSize: em(18, 20),
|
|
},
|
|
"h3 code": {
|
|
fontSize: em(16, 18),
|
|
},
|
|
pre: {
|
|
fontSize: em(12, 14),
|
|
lineHeight: round(20 / 12),
|
|
marginTop: em(20, 12),
|
|
marginBottom: em(20, 12),
|
|
borderRadius: rem(4),
|
|
paddingTop: em(8, 12),
|
|
paddingRight: em(12, 12),
|
|
paddingBottom: em(8, 12),
|
|
paddingLeft: em(12, 12),
|
|
},
|
|
ol: {
|
|
marginTop: em(16, 14),
|
|
marginBottom: em(16, 14),
|
|
paddingLeft: em(22, 14),
|
|
},
|
|
ul: {
|
|
marginTop: em(16, 14),
|
|
marginBottom: em(16, 14),
|
|
paddingLeft: em(22, 14),
|
|
},
|
|
li: {
|
|
marginTop: em(4, 14),
|
|
marginBottom: em(4, 14),
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: em(6, 14),
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: em(6, 14),
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: em(8, 14),
|
|
marginBottom: em(8, 14),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: em(16, 14),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: em(16, 14),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: em(16, 14),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: em(16, 14),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: em(8, 14),
|
|
marginBottom: em(8, 14),
|
|
},
|
|
hr: {
|
|
marginTop: em(40, 14),
|
|
marginBottom: em(40, 14),
|
|
},
|
|
"hr + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h2 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h3 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h4 + *": {
|
|
marginTop: "0",
|
|
},
|
|
table: {
|
|
fontSize: em(12, 14),
|
|
lineHeight: round(18 / 12),
|
|
},
|
|
"thead th": {
|
|
paddingRight: em(12, 12),
|
|
paddingBottom: em(8, 12),
|
|
paddingLeft: em(12, 12),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody td, tfoot td": {
|
|
paddingTop: em(8, 12),
|
|
paddingRight: em(12, 12),
|
|
paddingBottom: em(8, 12),
|
|
paddingLeft: em(12, 12),
|
|
},
|
|
"tbody td:first-child, tfoot td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"tbody td:last-child, tfoot td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
},
|
|
{
|
|
"> :first-child": {
|
|
marginTop: "0",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
base: {
|
|
css: [
|
|
{
|
|
fontSize: rem(16),
|
|
lineHeight: round(28 / 16),
|
|
p: {
|
|
marginTop: em(20, 16),
|
|
marginBottom: em(20, 16),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: em(20, 16),
|
|
lineHeight: round(32 / 20),
|
|
marginTop: em(24, 20),
|
|
marginBottom: em(24, 20),
|
|
},
|
|
blockquote: {
|
|
marginTop: em(32, 20),
|
|
marginBottom: em(32, 20),
|
|
paddingLeft: em(20, 20),
|
|
},
|
|
h1: {
|
|
fontSize: em(36, 16),
|
|
marginTop: "0",
|
|
marginBottom: em(32, 36),
|
|
lineHeight: round(40 / 36),
|
|
},
|
|
h2: {
|
|
fontSize: em(24, 16),
|
|
marginTop: em(48, 24),
|
|
marginBottom: em(24, 24),
|
|
lineHeight: round(32 / 24),
|
|
},
|
|
h3: {
|
|
fontSize: em(20, 16),
|
|
marginTop: em(32, 20),
|
|
marginBottom: em(12, 20),
|
|
lineHeight: round(32 / 20),
|
|
},
|
|
h4: {
|
|
marginTop: em(24, 16),
|
|
marginBottom: em(8, 16),
|
|
lineHeight: round(24 / 16),
|
|
},
|
|
img: {
|
|
marginTop: em(32, 16),
|
|
marginBottom: em(32, 16),
|
|
},
|
|
video: {
|
|
marginTop: em(32, 16),
|
|
marginBottom: em(32, 16),
|
|
},
|
|
figure: {
|
|
marginTop: em(32, 16),
|
|
marginBottom: em(32, 16),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
fontSize: em(14, 16),
|
|
lineHeight: round(20 / 14),
|
|
marginTop: em(12, 14),
|
|
},
|
|
code: {
|
|
fontSize: em(14, 16),
|
|
},
|
|
"h2 code": {
|
|
fontSize: em(21, 24),
|
|
},
|
|
"h3 code": {
|
|
fontSize: em(18, 20),
|
|
},
|
|
pre: {
|
|
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),
|
|
},
|
|
ol: {
|
|
marginTop: em(20, 16),
|
|
marginBottom: em(20, 16),
|
|
paddingLeft: em(26, 16),
|
|
},
|
|
ul: {
|
|
marginTop: em(20, 16),
|
|
marginBottom: em(20, 16),
|
|
paddingLeft: em(26, 16),
|
|
},
|
|
li: {
|
|
marginTop: em(8, 16),
|
|
marginBottom: em(8, 16),
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: em(6, 16),
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: em(6, 16),
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: em(12, 16),
|
|
marginBottom: em(12, 16),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: em(20, 16),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: em(20, 16),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: em(20, 16),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: em(20, 16),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: em(12, 16),
|
|
marginBottom: em(12, 16),
|
|
},
|
|
hr: {
|
|
marginTop: em(48, 16),
|
|
marginBottom: em(48, 16),
|
|
},
|
|
"hr + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h2 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h3 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h4 + *": {
|
|
marginTop: "0",
|
|
},
|
|
table: {
|
|
fontSize: em(14, 16),
|
|
lineHeight: round(24 / 14),
|
|
},
|
|
"thead th": {
|
|
paddingRight: em(8, 14),
|
|
paddingBottom: em(8, 14),
|
|
paddingLeft: em(8, 14),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody td, tfoot td": {
|
|
paddingTop: em(8, 14),
|
|
paddingRight: em(8, 14),
|
|
paddingBottom: em(8, 14),
|
|
paddingLeft: em(8, 14),
|
|
},
|
|
"tbody td:first-child, tfoot td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"tbody td:last-child, tfoot td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
},
|
|
{
|
|
"> :first-child": {
|
|
marginTop: "0",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
lg: {
|
|
css: [
|
|
{
|
|
fontSize: rem(18),
|
|
lineHeight: round(32 / 18),
|
|
p: {
|
|
marginTop: em(24, 18),
|
|
marginBottom: em(24, 18),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: em(22, 18),
|
|
lineHeight: round(32 / 22),
|
|
marginTop: em(24, 22),
|
|
marginBottom: em(24, 22),
|
|
},
|
|
blockquote: {
|
|
marginTop: em(40, 24),
|
|
marginBottom: em(40, 24),
|
|
paddingLeft: em(24, 24),
|
|
},
|
|
h1: {
|
|
fontSize: em(48, 18),
|
|
marginTop: "0",
|
|
marginBottom: em(40, 48),
|
|
lineHeight: round(48 / 48),
|
|
},
|
|
h2: {
|
|
fontSize: em(30, 18),
|
|
marginTop: em(56, 30),
|
|
marginBottom: em(32, 30),
|
|
lineHeight: round(40 / 30),
|
|
},
|
|
h3: {
|
|
fontSize: em(24, 18),
|
|
marginTop: em(40, 24),
|
|
marginBottom: em(16, 24),
|
|
lineHeight: round(36 / 24),
|
|
},
|
|
h4: {
|
|
marginTop: em(32, 18),
|
|
marginBottom: em(8, 18),
|
|
lineHeight: round(28 / 18),
|
|
},
|
|
img: {
|
|
marginTop: em(32, 18),
|
|
marginBottom: em(32, 18),
|
|
},
|
|
video: {
|
|
marginTop: em(32, 18),
|
|
marginBottom: em(32, 18),
|
|
},
|
|
figure: {
|
|
marginTop: em(32, 18),
|
|
marginBottom: em(32, 18),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
fontSize: em(16, 18),
|
|
lineHeight: round(24 / 16),
|
|
marginTop: em(16, 16),
|
|
},
|
|
code: {
|
|
fontSize: em(16, 18),
|
|
},
|
|
"h2 code": {
|
|
fontSize: em(26, 30),
|
|
},
|
|
"h3 code": {
|
|
fontSize: em(21, 24),
|
|
},
|
|
pre: {
|
|
fontSize: em(16, 18),
|
|
lineHeight: round(28 / 16),
|
|
marginTop: em(32, 16),
|
|
marginBottom: em(32, 16),
|
|
borderRadius: rem(6),
|
|
paddingTop: em(16, 16),
|
|
paddingRight: em(24, 16),
|
|
paddingBottom: em(16, 16),
|
|
paddingLeft: em(24, 16),
|
|
},
|
|
ol: {
|
|
marginTop: em(24, 18),
|
|
marginBottom: em(24, 18),
|
|
paddingLeft: em(28, 18),
|
|
},
|
|
ul: {
|
|
marginTop: em(24, 18),
|
|
marginBottom: em(24, 18),
|
|
paddingLeft: em(28, 18),
|
|
},
|
|
li: {
|
|
marginTop: em(12, 18),
|
|
marginBottom: em(12, 18),
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: em(8, 18),
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: em(8, 18),
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: em(16, 18),
|
|
marginBottom: em(16, 18),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: em(24, 18),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: em(24, 18),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: em(24, 18),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: em(24, 18),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: em(16, 18),
|
|
marginBottom: em(16, 18),
|
|
},
|
|
hr: {
|
|
marginTop: em(56, 18),
|
|
marginBottom: em(56, 18),
|
|
},
|
|
"hr + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h2 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h3 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h4 + *": {
|
|
marginTop: "0",
|
|
},
|
|
table: {
|
|
fontSize: em(16, 18),
|
|
lineHeight: round(24 / 16),
|
|
},
|
|
"thead th": {
|
|
paddingRight: em(12, 16),
|
|
paddingBottom: em(12, 16),
|
|
paddingLeft: em(12, 16),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody td, tfoot td": {
|
|
paddingTop: em(12, 16),
|
|
paddingRight: em(12, 16),
|
|
paddingBottom: em(12, 16),
|
|
paddingLeft: em(12, 16),
|
|
},
|
|
"tbody td:first-child, tfoot td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"tbody td:last-child, tfoot td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
},
|
|
{
|
|
"> :first-child": {
|
|
marginTop: "0",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
xl: {
|
|
css: [
|
|
{
|
|
fontSize: rem(20),
|
|
lineHeight: round(36 / 20),
|
|
p: {
|
|
marginTop: em(24, 20),
|
|
marginBottom: em(24, 20),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: em(24, 20),
|
|
lineHeight: round(36 / 24),
|
|
marginTop: em(24, 24),
|
|
marginBottom: em(24, 24),
|
|
},
|
|
blockquote: {
|
|
marginTop: em(48, 30),
|
|
marginBottom: em(48, 30),
|
|
paddingLeft: em(32, 30),
|
|
},
|
|
h1: {
|
|
fontSize: em(56, 20),
|
|
marginTop: "0",
|
|
marginBottom: em(48, 56),
|
|
lineHeight: round(56 / 56),
|
|
},
|
|
h2: {
|
|
fontSize: em(36, 20),
|
|
marginTop: em(56, 36),
|
|
marginBottom: em(32, 36),
|
|
lineHeight: round(40 / 36),
|
|
},
|
|
h3: {
|
|
fontSize: em(30, 20),
|
|
marginTop: em(48, 30),
|
|
marginBottom: em(20, 30),
|
|
lineHeight: round(40 / 30),
|
|
},
|
|
h4: {
|
|
marginTop: em(36, 20),
|
|
marginBottom: em(12, 20),
|
|
lineHeight: round(32 / 20),
|
|
},
|
|
img: {
|
|
marginTop: em(40, 20),
|
|
marginBottom: em(40, 20),
|
|
},
|
|
video: {
|
|
marginTop: em(40, 20),
|
|
marginBottom: em(40, 20),
|
|
},
|
|
figure: {
|
|
marginTop: em(40, 20),
|
|
marginBottom: em(40, 20),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
fontSize: em(18, 20),
|
|
lineHeight: round(28 / 18),
|
|
marginTop: em(18, 18),
|
|
},
|
|
code: {
|
|
fontSize: em(18, 20),
|
|
},
|
|
"h2 code": {
|
|
fontSize: em(31, 36),
|
|
},
|
|
"h3 code": {
|
|
fontSize: em(27, 30),
|
|
},
|
|
pre: {
|
|
fontSize: em(18, 20),
|
|
lineHeight: round(32 / 18),
|
|
marginTop: em(36, 18),
|
|
marginBottom: em(36, 18),
|
|
borderRadius: rem(8),
|
|
paddingTop: em(20, 18),
|
|
paddingRight: em(24, 18),
|
|
paddingBottom: em(20, 18),
|
|
paddingLeft: em(24, 18),
|
|
},
|
|
ol: {
|
|
marginTop: em(24, 20),
|
|
marginBottom: em(24, 20),
|
|
paddingLeft: em(32, 20),
|
|
},
|
|
ul: {
|
|
marginTop: em(24, 20),
|
|
marginBottom: em(24, 20),
|
|
paddingLeft: em(32, 20),
|
|
},
|
|
li: {
|
|
marginTop: em(12, 20),
|
|
marginBottom: em(12, 20),
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: em(8, 20),
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: em(8, 20),
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: em(16, 20),
|
|
marginBottom: em(16, 20),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: em(24, 20),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: em(24, 20),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: em(24, 20),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: em(24, 20),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: em(16, 20),
|
|
marginBottom: em(16, 20),
|
|
},
|
|
hr: {
|
|
marginTop: em(56, 20),
|
|
marginBottom: em(56, 20),
|
|
},
|
|
"hr + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h2 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h3 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h4 + *": {
|
|
marginTop: "0",
|
|
},
|
|
table: {
|
|
fontSize: em(18, 20),
|
|
lineHeight: round(28 / 18),
|
|
},
|
|
"thead th": {
|
|
paddingRight: em(12, 18),
|
|
paddingBottom: em(16, 18),
|
|
paddingLeft: em(12, 18),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody td, tfoot td": {
|
|
paddingTop: em(16, 18),
|
|
paddingRight: em(12, 18),
|
|
paddingBottom: em(16, 18),
|
|
paddingLeft: em(12, 18),
|
|
},
|
|
"tbody td:first-child, tfoot td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"tbody td:last-child, tfoot td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
},
|
|
{
|
|
"> :first-child": {
|
|
marginTop: "0",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
"2xl": {
|
|
css: [
|
|
{
|
|
fontSize: rem(24),
|
|
lineHeight: round(40 / 24),
|
|
p: {
|
|
marginTop: em(32, 24),
|
|
marginBottom: em(32, 24),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: em(30, 24),
|
|
lineHeight: round(44 / 30),
|
|
marginTop: em(32, 30),
|
|
marginBottom: em(32, 30),
|
|
},
|
|
blockquote: {
|
|
marginTop: em(64, 36),
|
|
marginBottom: em(64, 36),
|
|
paddingLeft: em(40, 36),
|
|
},
|
|
h1: {
|
|
fontSize: em(64, 24),
|
|
marginTop: "0",
|
|
marginBottom: em(56, 64),
|
|
lineHeight: round(64 / 64),
|
|
},
|
|
h2: {
|
|
fontSize: em(48, 24),
|
|
marginTop: em(72, 48),
|
|
marginBottom: em(40, 48),
|
|
lineHeight: round(52 / 48),
|
|
},
|
|
h3: {
|
|
fontSize: em(36, 24),
|
|
marginTop: em(56, 36),
|
|
marginBottom: em(24, 36),
|
|
lineHeight: round(44 / 36),
|
|
},
|
|
h4: {
|
|
marginTop: em(40, 24),
|
|
marginBottom: em(16, 24),
|
|
lineHeight: round(36 / 24),
|
|
},
|
|
img: {
|
|
marginTop: em(48, 24),
|
|
marginBottom: em(48, 24),
|
|
},
|
|
video: {
|
|
marginTop: em(48, 24),
|
|
marginBottom: em(48, 24),
|
|
},
|
|
figure: {
|
|
marginTop: em(48, 24),
|
|
marginBottom: em(48, 24),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
fontSize: em(20, 24),
|
|
lineHeight: round(32 / 20),
|
|
marginTop: em(20, 20),
|
|
},
|
|
code: {
|
|
fontSize: em(20, 24),
|
|
},
|
|
"h2 code": {
|
|
fontSize: em(42, 48),
|
|
},
|
|
"h3 code": {
|
|
fontSize: em(32, 36),
|
|
},
|
|
pre: {
|
|
fontSize: em(20, 24),
|
|
lineHeight: round(36 / 20),
|
|
marginTop: em(40, 20),
|
|
marginBottom: em(40, 20),
|
|
borderRadius: rem(8),
|
|
paddingTop: em(24, 20),
|
|
paddingRight: em(32, 20),
|
|
paddingBottom: em(24, 20),
|
|
paddingLeft: em(32, 20),
|
|
},
|
|
ol: {
|
|
marginTop: em(32, 24),
|
|
marginBottom: em(32, 24),
|
|
paddingLeft: em(38, 24),
|
|
},
|
|
ul: {
|
|
marginTop: em(32, 24),
|
|
marginBottom: em(32, 24),
|
|
paddingLeft: em(38, 24),
|
|
},
|
|
li: {
|
|
marginTop: em(12, 24),
|
|
marginBottom: em(12, 24),
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: em(10, 24),
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: em(10, 24),
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: em(20, 24),
|
|
marginBottom: em(20, 24),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: em(32, 24),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: em(32, 24),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: em(32, 24),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: em(32, 24),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: em(16, 24),
|
|
marginBottom: em(16, 24),
|
|
},
|
|
hr: {
|
|
marginTop: em(72, 24),
|
|
marginBottom: em(72, 24),
|
|
},
|
|
"hr + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h2 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h3 + *": {
|
|
marginTop: "0",
|
|
},
|
|
"h4 + *": {
|
|
marginTop: "0",
|
|
},
|
|
table: {
|
|
fontSize: em(20, 24),
|
|
lineHeight: round(28 / 20),
|
|
},
|
|
"thead th": {
|
|
paddingRight: em(12, 20),
|
|
paddingBottom: em(16, 20),
|
|
paddingLeft: em(12, 20),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody td, tfoot td": {
|
|
paddingTop: em(16, 20),
|
|
paddingRight: em(12, 20),
|
|
paddingBottom: em(16, 20),
|
|
paddingLeft: em(12, 20),
|
|
},
|
|
"tbody td:first-child, tfoot td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"tbody td:last-child, tfoot td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
},
|
|
{
|
|
"> :first-child": {
|
|
marginTop: "0",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
// Invert (for dark mode)
|
|
invert: {
|
|
css: {
|
|
"--tw-prose-body": "var(--tw-prose-invert-body)",
|
|
"--tw-prose-headings": "var(--tw-prose-invert-headings)",
|
|
"--tw-prose-lead": "var(--tw-prose-invert-lead)",
|
|
"--tw-prose-links": "var(--tw-prose-invert-links)",
|
|
"--tw-prose-bold": "var(--tw-prose-invert-bold)",
|
|
"--tw-prose-counters": "var(--tw-prose-invert-counters)",
|
|
"--tw-prose-bullets": "var(--tw-prose-invert-bullets)",
|
|
"--tw-prose-hr": "var(--tw-prose-invert-hr)",
|
|
"--tw-prose-quotes": "var(--tw-prose-invert-quotes)",
|
|
"--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)",
|
|
"--tw-prose-captions": "var(--tw-prose-invert-captions)",
|
|
"--tw-prose-code": "var(--tw-prose-invert-code)",
|
|
"--tw-prose-pre-code": "var(--tw-prose-invert-pre-code)",
|
|
"--tw-prose-pre-bg": "var(--tw-prose-invert-pre-bg)",
|
|
"--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)",
|
|
"--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)",
|
|
},
|
|
},
|
|
|
|
// Gray color themes
|
|
|
|
slate: {
|
|
css: {
|
|
"--tw-prose-body": colors.slate[700],
|
|
"--tw-prose-headings": colors.slate[900],
|
|
"--tw-prose-lead": colors.slate[600],
|
|
"--tw-prose-links": colors.slate[900],
|
|
"--tw-prose-bold": colors.slate[900],
|
|
"--tw-prose-counters": colors.slate[500],
|
|
"--tw-prose-bullets": colors.slate[300],
|
|
"--tw-prose-hr": colors.slate[200],
|
|
"--tw-prose-quotes": colors.slate[900],
|
|
"--tw-prose-quote-borders": colors.slate[200],
|
|
"--tw-prose-captions": colors.slate[500],
|
|
"--tw-prose-code": colors.slate[900],
|
|
"--tw-prose-pre-code": colors.slate[200],
|
|
"--tw-prose-pre-bg": colors.slate[800],
|
|
"--tw-prose-th-borders": colors.slate[300],
|
|
"--tw-prose-td-borders": colors.slate[200],
|
|
"--tw-prose-invert-body": colors.slate[300],
|
|
"--tw-prose-invert-headings": colors.white,
|
|
"--tw-prose-invert-lead": colors.slate[400],
|
|
"--tw-prose-invert-links": colors.white,
|
|
"--tw-prose-invert-bold": colors.white,
|
|
"--tw-prose-invert-counters": colors.slate[400],
|
|
"--tw-prose-invert-bullets": colors.slate[600],
|
|
"--tw-prose-invert-hr": colors.slate[700],
|
|
"--tw-prose-invert-quotes": colors.slate[100],
|
|
"--tw-prose-invert-quote-borders": colors.slate[700],
|
|
"--tw-prose-invert-captions": colors.slate[400],
|
|
"--tw-prose-invert-code": colors.white,
|
|
"--tw-prose-invert-pre-code": colors.slate[300],
|
|
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
|
|
"--tw-prose-invert-th-borders": colors.slate[600],
|
|
"--tw-prose-invert-td-borders": colors.slate[700],
|
|
},
|
|
},
|
|
|
|
gray: {
|
|
css: {
|
|
"--tw-prose-body": colors.gray[700],
|
|
"--tw-prose-headings": colors.gray[900],
|
|
"--tw-prose-lead": colors.gray[600],
|
|
"--tw-prose-links": colors.gray[900],
|
|
"--tw-prose-bold": colors.gray[900],
|
|
"--tw-prose-counters": colors.gray[500],
|
|
"--tw-prose-bullets": colors.gray[300],
|
|
"--tw-prose-hr": colors.gray[200],
|
|
"--tw-prose-quotes": colors.gray[900],
|
|
"--tw-prose-quote-borders": colors.gray[200],
|
|
"--tw-prose-captions": colors.gray[500],
|
|
"--tw-prose-code": colors.gray[900],
|
|
"--tw-prose-pre-code": colors.gray[200],
|
|
"--tw-prose-pre-bg": colors.gray[800],
|
|
"--tw-prose-th-borders": colors.gray[300],
|
|
"--tw-prose-td-borders": colors.gray[200],
|
|
"--tw-prose-invert-body": colors.gray[300],
|
|
"--tw-prose-invert-headings": colors.white,
|
|
"--tw-prose-invert-lead": colors.gray[400],
|
|
"--tw-prose-invert-links": colors.white,
|
|
"--tw-prose-invert-bold": colors.white,
|
|
"--tw-prose-invert-counters": colors.gray[400],
|
|
"--tw-prose-invert-bullets": colors.gray[600],
|
|
"--tw-prose-invert-hr": colors.gray[700],
|
|
"--tw-prose-invert-quotes": colors.gray[100],
|
|
"--tw-prose-invert-quote-borders": colors.gray[700],
|
|
"--tw-prose-invert-captions": colors.gray[400],
|
|
"--tw-prose-invert-code": colors.white,
|
|
"--tw-prose-invert-pre-code": colors.gray[300],
|
|
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
|
|
"--tw-prose-invert-th-borders": colors.gray[600],
|
|
"--tw-prose-invert-td-borders": colors.gray[700],
|
|
},
|
|
},
|
|
|
|
zinc: {
|
|
css: {
|
|
"--tw-prose-body": colors.zinc[700],
|
|
"--tw-prose-headings": colors.zinc[900],
|
|
"--tw-prose-lead": colors.zinc[600],
|
|
"--tw-prose-links": colors.zinc[900],
|
|
"--tw-prose-bold": colors.zinc[900],
|
|
"--tw-prose-counters": colors.zinc[500],
|
|
"--tw-prose-bullets": colors.zinc[300],
|
|
"--tw-prose-hr": colors.zinc[200],
|
|
"--tw-prose-quotes": colors.zinc[900],
|
|
"--tw-prose-quote-borders": colors.zinc[200],
|
|
"--tw-prose-captions": colors.zinc[500],
|
|
"--tw-prose-code": colors.zinc[900],
|
|
"--tw-prose-pre-code": colors.zinc[200],
|
|
"--tw-prose-pre-bg": colors.zinc[800],
|
|
"--tw-prose-th-borders": colors.zinc[300],
|
|
"--tw-prose-td-borders": colors.zinc[200],
|
|
"--tw-prose-invert-body": colors.zinc[300],
|
|
"--tw-prose-invert-headings": colors.white,
|
|
"--tw-prose-invert-lead": colors.zinc[400],
|
|
"--tw-prose-invert-links": colors.white,
|
|
"--tw-prose-invert-bold": colors.white,
|
|
"--tw-prose-invert-counters": colors.zinc[400],
|
|
"--tw-prose-invert-bullets": colors.zinc[600],
|
|
"--tw-prose-invert-hr": colors.zinc[700],
|
|
"--tw-prose-invert-quotes": colors.zinc[100],
|
|
"--tw-prose-invert-quote-borders": colors.zinc[700],
|
|
"--tw-prose-invert-captions": colors.zinc[400],
|
|
"--tw-prose-invert-code": colors.white,
|
|
"--tw-prose-invert-pre-code": colors.zinc[300],
|
|
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
|
|
"--tw-prose-invert-th-borders": colors.zinc[600],
|
|
"--tw-prose-invert-td-borders": colors.zinc[700],
|
|
},
|
|
},
|
|
|
|
neutral: {
|
|
css: {
|
|
"--tw-prose-body": colors.neutral[700],
|
|
"--tw-prose-headings": colors.neutral[900],
|
|
"--tw-prose-lead": colors.neutral[600],
|
|
"--tw-prose-links": colors.neutral[900],
|
|
"--tw-prose-bold": colors.neutral[900],
|
|
"--tw-prose-counters": colors.neutral[500],
|
|
"--tw-prose-bullets": colors.neutral[300],
|
|
"--tw-prose-hr": colors.neutral[200],
|
|
"--tw-prose-quotes": colors.neutral[900],
|
|
"--tw-prose-quote-borders": colors.neutral[200],
|
|
"--tw-prose-captions": colors.neutral[500],
|
|
"--tw-prose-code": colors.neutral[900],
|
|
"--tw-prose-pre-code": colors.neutral[200],
|
|
"--tw-prose-pre-bg": colors.neutral[800],
|
|
"--tw-prose-th-borders": colors.neutral[300],
|
|
"--tw-prose-td-borders": colors.neutral[200],
|
|
"--tw-prose-invert-body": colors.neutral[300],
|
|
"--tw-prose-invert-headings": colors.white,
|
|
"--tw-prose-invert-lead": colors.neutral[400],
|
|
"--tw-prose-invert-links": colors.white,
|
|
"--tw-prose-invert-bold": colors.white,
|
|
"--tw-prose-invert-counters": colors.neutral[400],
|
|
"--tw-prose-invert-bullets": colors.neutral[600],
|
|
"--tw-prose-invert-hr": colors.neutral[700],
|
|
"--tw-prose-invert-quotes": colors.neutral[100],
|
|
"--tw-prose-invert-quote-borders": colors.neutral[700],
|
|
"--tw-prose-invert-captions": colors.neutral[400],
|
|
"--tw-prose-invert-code": colors.white,
|
|
"--tw-prose-invert-pre-code": colors.neutral[300],
|
|
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
|
|
"--tw-prose-invert-th-borders": colors.neutral[600],
|
|
"--tw-prose-invert-td-borders": colors.neutral[700],
|
|
},
|
|
},
|
|
|
|
stone: {
|
|
css: {
|
|
"--tw-prose-body": colors.stone[700],
|
|
"--tw-prose-headings": colors.stone[900],
|
|
"--tw-prose-lead": colors.stone[600],
|
|
"--tw-prose-links": colors.stone[900],
|
|
"--tw-prose-bold": colors.stone[900],
|
|
"--tw-prose-counters": colors.stone[500],
|
|
"--tw-prose-bullets": colors.stone[300],
|
|
"--tw-prose-hr": colors.stone[200],
|
|
"--tw-prose-quotes": colors.stone[900],
|
|
"--tw-prose-quote-borders": colors.stone[200],
|
|
"--tw-prose-captions": colors.stone[500],
|
|
"--tw-prose-code": colors.stone[900],
|
|
"--tw-prose-pre-code": colors.stone[200],
|
|
"--tw-prose-pre-bg": colors.stone[800],
|
|
"--tw-prose-th-borders": colors.stone[300],
|
|
"--tw-prose-td-borders": colors.stone[200],
|
|
"--tw-prose-invert-body": colors.stone[300],
|
|
"--tw-prose-invert-headings": colors.white,
|
|
"--tw-prose-invert-lead": colors.stone[400],
|
|
"--tw-prose-invert-links": colors.white,
|
|
"--tw-prose-invert-bold": colors.white,
|
|
"--tw-prose-invert-counters": colors.stone[400],
|
|
"--tw-prose-invert-bullets": colors.stone[600],
|
|
"--tw-prose-invert-hr": colors.stone[700],
|
|
"--tw-prose-invert-quotes": colors.stone[100],
|
|
"--tw-prose-invert-quote-borders": colors.stone[700],
|
|
"--tw-prose-invert-captions": colors.stone[400],
|
|
"--tw-prose-invert-code": colors.white,
|
|
"--tw-prose-invert-pre-code": colors.stone[300],
|
|
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
|
|
"--tw-prose-invert-th-borders": colors.stone[600],
|
|
"--tw-prose-invert-td-borders": colors.stone[700],
|
|
},
|
|
},
|
|
|
|
// Link-only themes (for backward compatibility)
|
|
|
|
red: {
|
|
css: {
|
|
"--tw-prose-links": colors.red[600],
|
|
"--tw-prose-invert-links": colors.red[500],
|
|
},
|
|
},
|
|
|
|
orange: {
|
|
css: {
|
|
"--tw-prose-links": colors.orange[600],
|
|
"--tw-prose-invert-links": colors.orange[500],
|
|
},
|
|
},
|
|
|
|
amber: {
|
|
css: {
|
|
"--tw-prose-links": colors.amber[600],
|
|
"--tw-prose-invert-links": colors.amber[500],
|
|
},
|
|
},
|
|
|
|
yellow: {
|
|
css: {
|
|
"--tw-prose-links": colors.yellow[600],
|
|
"--tw-prose-invert-links": colors.yellow[500],
|
|
},
|
|
},
|
|
|
|
lime: {
|
|
css: {
|
|
"--tw-prose-links": colors.lime[600],
|
|
"--tw-prose-invert-links": colors.lime[500],
|
|
},
|
|
},
|
|
|
|
green: {
|
|
css: {
|
|
"--tw-prose-links": colors.green[600],
|
|
"--tw-prose-invert-links": colors.green[500],
|
|
},
|
|
},
|
|
|
|
emerald: {
|
|
css: {
|
|
"--tw-prose-links": colors.emerald[600],
|
|
"--tw-prose-invert-links": colors.emerald[500],
|
|
},
|
|
},
|
|
|
|
teal: {
|
|
css: {
|
|
"--tw-prose-links": colors.teal[600],
|
|
"--tw-prose-invert-links": colors.teal[500],
|
|
},
|
|
},
|
|
|
|
cyan: {
|
|
css: {
|
|
"--tw-prose-links": colors.cyan[600],
|
|
"--tw-prose-invert-links": colors.cyan[500],
|
|
},
|
|
},
|
|
|
|
sky: {
|
|
css: {
|
|
"--tw-prose-links": colors.sky[600],
|
|
"--tw-prose-invert-links": colors.sky[500],
|
|
},
|
|
},
|
|
|
|
blue: {
|
|
css: {
|
|
"--tw-prose-links": colors.blue[600],
|
|
"--tw-prose-invert-links": colors.blue[500],
|
|
},
|
|
},
|
|
|
|
indigo: {
|
|
css: {
|
|
"--tw-prose-links": colors.indigo[600],
|
|
"--tw-prose-invert-links": colors.indigo[500],
|
|
},
|
|
},
|
|
|
|
violet: {
|
|
css: {
|
|
"--tw-prose-links": colors.violet[600],
|
|
"--tw-prose-invert-links": colors.violet[500],
|
|
},
|
|
},
|
|
|
|
purple: {
|
|
css: {
|
|
"--tw-prose-links": colors.purple[600],
|
|
"--tw-prose-invert-links": colors.purple[500],
|
|
},
|
|
},
|
|
|
|
fuchsia: {
|
|
css: {
|
|
"--tw-prose-links": colors.fuchsia[600],
|
|
"--tw-prose-invert-links": colors.fuchsia[500],
|
|
},
|
|
},
|
|
|
|
pink: {
|
|
css: {
|
|
"--tw-prose-links": colors.pink[600],
|
|
"--tw-prose-invert-links": colors.pink[500],
|
|
},
|
|
},
|
|
|
|
rose: {
|
|
css: {
|
|
"--tw-prose-links": colors.rose[600],
|
|
"--tw-prose-invert-links": colors.rose[500],
|
|
},
|
|
},
|
|
};
|
|
|
|
const plugin = require("tailwindcss/plugin");
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
|
|
primary: {
|
|
50: '#fcfdf7',
|
|
100: '#f8fcee',
|
|
200: '#eef6d5',
|
|
300: '#e3f1bc',
|
|
400: '#cfe78a',
|
|
500: '#badc58',
|
|
600: '#a7c64f',
|
|
700: '#8ca542',
|
|
800: '#708435',
|
|
900: '#5b6c2b',
|
|
DEFAULT: '#badc58'
|
|
},
|
|
grey: '#0d1117',
|
|
mineshaft: {
|
|
50: '#f5f5f5',
|
|
100: '#ebebeb',
|
|
200: '#ccccce',
|
|
300: '#adaeb0',
|
|
400: '#707174',
|
|
500: '#323439',
|
|
600: '#2d2f33',
|
|
700: '#26272b',
|
|
800: '#1e1f22',
|
|
900: '#19191c',
|
|
DEFAULT: '#323439'
|
|
},
|
|
chicago: {
|
|
50: '#f7f7f7',
|
|
100: '#efefef',
|
|
200: '#d6d6d7',
|
|
300: '#bdbebf',
|
|
400: '#8c8d8e',
|
|
500: '#5b5c5e',
|
|
600: '#525355',
|
|
700: '#444547',
|
|
800: '#373738',
|
|
900: '#2d2d2e',
|
|
DEFAULT: '#5b5c5e'
|
|
},
|
|
bunker: {
|
|
50: '#f3f4f4',
|
|
100: '#e8e8e9',
|
|
200: '#c5c6c8',
|
|
300: '#a2a4a6',
|
|
400: '#5d5f64',
|
|
500: '#171b21',
|
|
600: '#15181e',
|
|
700: '#111419',
|
|
800: '#0e1014',
|
|
900: '#0b0d10',
|
|
DEFAULT: '#171B21'
|
|
},
|
|
githubblack: '#020409',
|
|
blue2: '#130f40',
|
|
blue1: '#3498db',
|
|
yellow: {
|
|
50: '#fefcf3',
|
|
100: '#fef9e7',
|
|
200: '#fcf0c3',
|
|
300: '#f9e79f',
|
|
400: '#f5d657',
|
|
500: '#f1c40f',
|
|
600: '#d9b00e',
|
|
700: '#b5930b',
|
|
800: '#917609',
|
|
900: '#766007',
|
|
DEFAULT: '#f1c40f'
|
|
},
|
|
red: {
|
|
50: '#fef6f5',
|
|
100: '#fdedec',
|
|
200: '#f9d2ce',
|
|
300: '#f5b7b1',
|
|
400: '#ee8277',
|
|
500: '#e74c3c',
|
|
600: '#d04436',
|
|
700: '#ad392d',
|
|
800: '#8b2e24',
|
|
900: '#71251d',
|
|
DEFAULT: '#e74c3c'
|
|
},
|
|
orange: '#f39c12',
|
|
green: {
|
|
50: '#f5fcf8',
|
|
100: '#eafaf1',
|
|
200: '#cbf2dc',
|
|
300: '#abebc6',
|
|
400: '#6ddb9c',
|
|
500: '#2ecc71',
|
|
600: '#29b866',
|
|
700: '#239955',
|
|
800: '#1c7a44',
|
|
900: '#176437',
|
|
DEFAULT: '#2ecc71'
|
|
}
|
|
}
|
|
},
|
|
keyframes: {
|
|
type: {
|
|
'0%': { transform: 'translateX(0ch)' },
|
|
'5%, 10%': { transform: 'translateX(1ch)' },
|
|
'15%, 20%': { transform: 'translateX(2ch)' },
|
|
'25%, 30%': { transform: 'translateX(3ch)' },
|
|
'35%, 40%': { transform: 'translateX(4ch)' },
|
|
'45%, 50%': { transform: 'translateX(5ch)' },
|
|
'55%, 60%': { transform: 'translateX(6ch)' },
|
|
'65%, 70%': { transform: 'translateX(7ch)' },
|
|
'75%, 80%': { transform: 'translateX(8ch)' },
|
|
'85%, 90%': { transform: 'translateX(9ch)' },
|
|
'95%, 100%': { transform: 'translateX(11ch)' }
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: 0 },
|
|
'100%': { opacity: 1 }
|
|
},
|
|
popIn: {
|
|
from: {
|
|
opacity: 0,
|
|
transform: 'translate(-50%, -48%) scale(0.96)'
|
|
},
|
|
to: {
|
|
opacity: 1,
|
|
transform: 'translate(-50%, -50%) scale(1)'
|
|
}
|
|
},
|
|
spin: {
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
'40%': { transform: 'rotate(360deg)' },
|
|
'100%': { transform: 'rotate(360deg)' }
|
|
},
|
|
bounce: {
|
|
'0%': { transform: 'translateY(-90%)' },
|
|
'100%': { transform: 'translateY(-100%)' }
|
|
},
|
|
wiggle: {
|
|
'0%, 100%': { transform: 'rotate(-3deg)' },
|
|
'50%': { transform: 'rotate(3deg)' }
|
|
},
|
|
ping: {
|
|
'75%, 100%': {
|
|
transform: 'scale(2)',
|
|
opacity: 0
|
|
}
|
|
},
|
|
popup: {
|
|
'0%': {
|
|
transform: 'scale(0.2)',
|
|
opacity: 0
|
|
// transform: "translateY(120%)",
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
// transform: "translateY(100%)",
|
|
}
|
|
},
|
|
popright: {
|
|
'0%': {
|
|
transform: 'translateX(-100%)'
|
|
},
|
|
'100%': {
|
|
transform: 'translateX(0%)'
|
|
}
|
|
},
|
|
popleft: {
|
|
'0%': {
|
|
transform: 'translateX(100%)'
|
|
},
|
|
'100%': {
|
|
transform: 'translateX(0%)'
|
|
}
|
|
},
|
|
popdown: {
|
|
'0%': {
|
|
transform: 'scale(0.2)',
|
|
opacity: 0
|
|
// transform: "translateY(80%)",
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
// transform: "translateY(100%)",
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
|
|
bounce: 'bounce 1000ms ease-in-out infinite',
|
|
spin: 'spin 4000ms ease-in-out infinite',
|
|
cursor: 'cursor .6s linear infinite alternate',
|
|
type: 'type 2.7s ease-out .8s infinite alternate both',
|
|
'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
|
|
wiggle: 'wiggle 200ms ease-in-out',
|
|
ping: 'ping 1000ms ease-in-out infinite',
|
|
popup: 'popup 300ms ease-in-out',
|
|
popdown: 'popdown 300ms ease-in-out',
|
|
popright: 'popright 100ms ease-in-out',
|
|
popleft: 'popleft 100ms ease-in-out',
|
|
popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);'
|
|
},
|
|
fontSize: {
|
|
xxxs: '.23rem',
|
|
xxs: '.5rem',
|
|
xs: '.75rem',
|
|
sm: '.875rem',
|
|
base: '1rem',
|
|
lg: '1.125rem',
|
|
xl: '1.25rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '1.875rem',
|
|
'4xl': '2.25rem',
|
|
'5xl': '3rem',
|
|
'6xl': '4rem',
|
|
'7xl': '5rem',
|
|
'8xl': '6rem',
|
|
'9xl': '7rem'
|
|
},
|
|
typography: (theme) => ({
|
|
DEFAULT: {
|
|
css: [
|
|
{
|
|
color: 'var(--tw-prose-body)',
|
|
maxWidth: '65ch',
|
|
'[class~="lead"]': {
|
|
color: 'var(--tw-prose-lead)'
|
|
},
|
|
a: {
|
|
color: colors.gray[200],
|
|
textDecoration: 'underline',
|
|
fontWeight: '500'
|
|
},
|
|
strong: {
|
|
color: colors.gray[200],
|
|
fontWeight: '600'
|
|
},
|
|
'a strong': {
|
|
color: 'inherit'
|
|
},
|
|
'blockquote strong': {
|
|
color: 'inherit'
|
|
},
|
|
'thead th strong': {
|
|
color: 'inherit'
|
|
},
|
|
ol: {
|
|
listStyleType: 'decimal'
|
|
},
|
|
'ol[type="A"]': {
|
|
listStyleType: 'upper-alpha'
|
|
},
|
|
'ol[type="a"]': {
|
|
listStyleType: 'lower-alpha'
|
|
},
|
|
'ol[type="A" s]': {
|
|
listStyleType: 'upper-alpha'
|
|
},
|
|
'ol[type="a" s]': {
|
|
listStyleType: 'lower-alpha'
|
|
},
|
|
'ol[type="I"]': {
|
|
listStyleType: 'upper-roman'
|
|
},
|
|
'ol[type="i"]': {
|
|
listStyleType: 'lower-roman'
|
|
},
|
|
'ol[type="I" s]': {
|
|
listStyleType: 'upper-roman'
|
|
},
|
|
'ol[type="i" s]': {
|
|
listStyleType: 'lower-roman'
|
|
},
|
|
'ol[type="1"]': {
|
|
listStyleType: 'decimal'
|
|
},
|
|
ul: {
|
|
listStyleType: 'disc'
|
|
},
|
|
'ol > li::marker': {
|
|
fontWeight: '400',
|
|
color: 'var(--tw-prose-counters)'
|
|
},
|
|
'ul > li::marker': {
|
|
color: 'var(--tw-prose-bullets)'
|
|
},
|
|
hr: {
|
|
borderColor: 'var(--tw-prose-hr)',
|
|
borderTopWidth: 1
|
|
},
|
|
blockquote: {
|
|
fontWeight: '500',
|
|
fontStyle: 'italic',
|
|
color: 'var(--tw-prose-quotes)',
|
|
borderLeftWidth: '0.25rem',
|
|
borderLeftColor: 'var(--tw-prose-quote-borders)',
|
|
quotes: '"\\201C""\\201D""\\2018""\\2019"'
|
|
},
|
|
'blockquote p:first-of-type::before': {
|
|
content: 'open-quote'
|
|
},
|
|
'blockquote p:last-of-type::after': {
|
|
content: 'close-quote'
|
|
},
|
|
h1: {
|
|
color: colors.gray[200],
|
|
fontWeight: '800'
|
|
},
|
|
'h1 strong': {
|
|
fontWeight: '900',
|
|
color: 'inherit'
|
|
},
|
|
h2: {
|
|
color: colors.gray[200],
|
|
fontWeight: '700'
|
|
},
|
|
'h2 strong': {
|
|
fontWeight: '800',
|
|
color: 'inherit'
|
|
},
|
|
h3: {
|
|
color: colors.gray[300],
|
|
fontWeight: '600'
|
|
},
|
|
'h3 strong': {
|
|
fontWeight: '700',
|
|
color: 'inherit'
|
|
},
|
|
h4: {
|
|
color: colors.gray[400],
|
|
fontWeight: '600'
|
|
},
|
|
'h4 strong': {
|
|
fontWeight: '700',
|
|
color: 'inherit'
|
|
},
|
|
// TODO: Figure out how to not need these, it's a merging issue
|
|
img: {},
|
|
'figure > *': {},
|
|
figcaption: {
|
|
color: 'var(--tw-prose-captions)'
|
|
},
|
|
code: {
|
|
color: 'var(--tw-prose-code)',
|
|
fontWeight: '600'
|
|
},
|
|
'code::before': {
|
|
content: '"`"'
|
|
},
|
|
'code::after': {
|
|
content: '"`"'
|
|
},
|
|
'a code': {
|
|
color: 'inherit'
|
|
},
|
|
'h1 code': {
|
|
color: 'inherit'
|
|
},
|
|
'h2 code': {
|
|
color: 'inherit'
|
|
},
|
|
'h3 code': {
|
|
color: 'inherit'
|
|
},
|
|
'h4 code': {
|
|
color: 'inherit'
|
|
},
|
|
'blockquote code': {
|
|
color: 'inherit'
|
|
},
|
|
'thead th code': {
|
|
color: 'inherit'
|
|
},
|
|
pre: {
|
|
color: 'var(--tw-prose-pre-code)',
|
|
backgroundColor: colors.gray[800],
|
|
overflowX: 'auto',
|
|
fontWeight: '400'
|
|
},
|
|
'pre code': {
|
|
backgroundColor: 'transparent',
|
|
borderWidth: '0',
|
|
borderRadius: '0',
|
|
padding: '0',
|
|
fontWeight: 'inherit',
|
|
color: 'inherit',
|
|
fontSize: 'inherit',
|
|
fontFamily: 'inherit',
|
|
lineHeight: 'inherit'
|
|
},
|
|
'pre code::before': {
|
|
content: 'none'
|
|
},
|
|
'pre code::after': {
|
|
content: 'none'
|
|
},
|
|
table: {
|
|
width: '100%',
|
|
tableLayout: 'auto',
|
|
textAlign: 'left',
|
|
marginTop: em(32, 16),
|
|
marginBottom: em(32, 16)
|
|
},
|
|
thead: {
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'var(--tw-prose-th-borders)'
|
|
},
|
|
'thead th': {
|
|
color: 'var(--tw-prose-headings)',
|
|
fontWeight: '600',
|
|
verticalAlign: 'bottom'
|
|
},
|
|
'tbody tr': {
|
|
borderBottomWidth: '1px',
|
|
borderBottomColor: 'var(--tw-prose-td-borders)'
|
|
},
|
|
'tbody tr:last-child': {
|
|
borderBottomWidth: '0'
|
|
},
|
|
'tbody td': {
|
|
verticalAlign: 'baseline'
|
|
},
|
|
tfoot: {
|
|
borderTopWidth: '1px',
|
|
borderTopColor: 'var(--tw-prose-th-borders)'
|
|
},
|
|
'tfoot td': {
|
|
verticalAlign: 'top'
|
|
}
|
|
},
|
|
defaultModifiers.gray.css,
|
|
...defaultModifiers.base.css
|
|
]
|
|
},
|
|
...defaultModifiers
|
|
})
|
|
},
|
|
plugins: [
|
|
plugin(function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.no-scrollbar::-webkit-scrollbar': {
|
|
display: 'none'
|
|
},
|
|
'.no-scrollbar': {
|
|
'-ms-overflow-style': 'none',
|
|
'scrollbar-width': 'none'
|
|
}
|
|
});
|
|
}),
|
|
require('@tailwindcss/typography')
|
|
]
|
|
};
|