From 93bb79e8de9476a6350a634bcb496cd5879840dc Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Sat, 25 Apr 2020 17:59:23 +0100 Subject: [PATCH 1/3] Update with styles from TailwindUI --- src/index.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 67bc5ea..eee1e7e 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ module.exports = { typography: { h1: { fontSize: defaultTheme.fontSize['4xl'], - fontWeight: defaultTheme.fontWeight['bold'], + fontWeight: defaultTheme.fontWeight.bold, color: defaultTheme.colors.gray[900], lineHeight: defaultTheme.lineHeight.none }, @@ -15,7 +15,7 @@ module.exports = { }, h2: { fontSize: defaultTheme.fontSize['2xl'], - fontWeight: defaultTheme.fontWeight['bold'], + fontWeight: defaultTheme.fontWeight.medium, color: defaultTheme.colors.gray[900], lineHeight: defaultTheme.lineHeight.tight }, @@ -26,8 +26,8 @@ module.exports = { marginTop: defaultTheme.spacing[4], }, h3: { - fontSize: defaultTheme.fontSize['xl'], - fontWeight: defaultTheme.fontWeight['bold'], + fontSize: defaultTheme.fontSize.lg, + fontWeight: defaultTheme.fontWeight.medium, color: defaultTheme.colors.gray[900], lineHeight: defaultTheme.lineHeight.tight }, @@ -41,8 +41,8 @@ module.exports = { marginTop: defaultTheme.spacing[2], }, h4: { - fontSize: defaultTheme.fontSize['base'], - fontWeight: defaultTheme.fontWeight['bold'], + fontSize: defaultTheme.fontSize.base, + fontWeight: defaultTheme.fontWeight.semibold, color: defaultTheme.colors.gray[900], lineHeight: defaultTheme.lineHeight.normal }, @@ -56,7 +56,7 @@ module.exports = { marginTop: defaultTheme.spacing[2], }, p: { - fontSize: defaultTheme.fontSize.base, + fontSize: defaultTheme.fontSize['sm'], fontWeight: defaultTheme.fontWeight.normal, color: defaultTheme.colors.gray[800], lineHeight: defaultTheme.lineHeight.relaxed, @@ -65,18 +65,18 @@ module.exports = { marginTop: defaultTheme.spacing[4] }, strong: { - fontWeight: defaultTheme.fontWeight.bold, + fontWeight: defaultTheme.fontWeight.semibold, color: defaultTheme.colors.gray[900], }, a: { fontWeight: defaultTheme.fontWeight.medium, - color: defaultTheme.colors.blue[600], + color: defaultTheme.colors.blue[700], }, 'a:hover': { textDecoration: 'underline', }, code: { - backgroundColor: defaultTheme.colors.gray[200], + backgroundColor: "#edf2f7", fontSize: '.875em', // Use `em` so change is relative to current font size paddingLeft: defaultTheme.spacing[1], paddingRight: defaultTheme.spacing[1], @@ -112,7 +112,7 @@ module.exports = { marginTop: defaultTheme.spacing[2], }, li: { - fontSize: defaultTheme.fontSize.base, + fontSize: defaultTheme.fontSize.sm, fontWeight: defaultTheme.fontWeight.normal, color: defaultTheme.colors.gray[800], lineHeight: defaultTheme.lineHeight.relaxed, @@ -143,11 +143,13 @@ module.exports = { marginTop: defaultTheme.spacing[4], }, pre: { + borderRadius: defaultTheme.borderRadius.md, backgroundColor: defaultTheme.colors.gray[200], paddingTop: defaultTheme.spacing[3], paddingRight: defaultTheme.spacing[4], paddingBottom: defaultTheme.spacing[3], paddingLeft: defaultTheme.spacing[4], + overflowX: "auto", }, '* + pre': { marginTop: defaultTheme.spacing[4], @@ -156,8 +158,14 @@ module.exports = { marginTop: defaultTheme.spacing[4], }, 'pre code': { - fontSize: defaultTheme.fontSize.sm, + fontSize: defaultTheme.fontSize.xs, padding: 0, + }, + hr: { + borderTopWidth: defaultTheme.borderWidth.default, + borderColor: defaultTheme.colors.gray[200], + marginTop: defaultTheme.spacing[10], + marginBottom: defaultTheme.spacing[10], } } }, From 105184b8a5aab96491531e8c99130758c4f2e22d Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Sat, 25 Apr 2020 18:31:50 +0100 Subject: [PATCH 2/3] Tweaks for pre and code --- src/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index eee1e7e..80ccf16 100644 --- a/src/index.js +++ b/src/index.js @@ -76,7 +76,7 @@ module.exports = { textDecoration: 'underline', }, code: { - backgroundColor: "#edf2f7", + backgroundColor: defaultTheme.colors.gray[200], fontSize: '.875em', // Use `em` so change is relative to current font size paddingLeft: defaultTheme.spacing[1], paddingRight: defaultTheme.spacing[1], @@ -144,12 +144,16 @@ module.exports = { }, pre: { borderRadius: defaultTheme.borderRadius.md, - backgroundColor: defaultTheme.colors.gray[200], + backgroundColor: defaultTheme.colors.gray[800], + color: defaultTheme.colors.white, + fontSize: '.875em', // Use `em` so change is relative to current font size paddingTop: defaultTheme.spacing[3], paddingRight: defaultTheme.spacing[4], paddingBottom: defaultTheme.spacing[3], paddingLeft: defaultTheme.spacing[4], overflowX: "auto", + '-webkit-font-smoothing': 'subpixel-antialiased', + '-moz-osx-font-smoothing': 'auto', }, '* + pre': { marginTop: defaultTheme.spacing[4], @@ -158,12 +162,16 @@ module.exports = { marginTop: defaultTheme.spacing[4], }, 'pre code': { - fontSize: defaultTheme.fontSize.xs, + backgroundColor: defaultTheme.colors.transparent, + color: 'currentColor', + fontSize: '.875em', // Use `em` so change is relative to current font size padding: 0, + '-webkit-font-smoothing': 'subpixel-antialiased', + '-moz-osx-font-smoothing': 'auto', }, hr: { borderTopWidth: defaultTheme.borderWidth.default, - borderColor: defaultTheme.colors.gray[200], + borderColor: defaultTheme.colors.gray[500], marginTop: defaultTheme.spacing[10], marginBottom: defaultTheme.spacing[10], } From 7a8bc53f0385dcaa591cd4fc08654010e86c4a3a Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Sat, 25 Apr 2020 18:42:53 +0100 Subject: [PATCH 3/3] Rename as rich-text to prose --- docs/pages/index.js | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/index.js b/docs/pages/index.js index 01be832..70df768 100644 --- a/docs/pages/index.js +++ b/docs/pages/index.js @@ -3,7 +3,7 @@ import MarkdownSample from '../components/MarkdownSample.mdx' export default () => ( -
+
diff --git a/src/index.js b/src/index.js index 80ccf16..95d9627 100644 --- a/src/index.js +++ b/src/index.js @@ -180,7 +180,7 @@ module.exports = { }, handler: function ({ addComponents, theme }) { addComponents({ - '.rich-text': theme('typography') + '.prose': theme('typography') }) } }