From 8ac5eddd3071415c23d8af2d4a40c0b53dea2b83 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 30 Aug 2023 07:24:49 -0400 Subject: [PATCH 1/7] Add support for the `` element --- demo/components/MarkdownSample.mdx | 2 +- src/styles.js | 63 ++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/demo/components/MarkdownSample.mdx b/demo/components/MarkdownSample.mdx index 87e4b6e..13c2d56 100644 --- a/demo/components/MarkdownSample.mdx +++ b/demo/components/MarkdownSample.mdx @@ -98,7 +98,7 @@ When a heading comes after a paragraph, we need a bit more space, like I already - **It's not a bad idea to add a third item either.** - I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it. + I think it probably would've been fine to just use two items but three is definitely not worse, and since I seem to be having no trouble making up arbitrary things to type, I might as well include it. I'm going to press Enter now. After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading. diff --git a/src/styles.js b/src/styles.js index 7d6da36..b7eb8fd 100644 --- a/src/styles.js +++ b/src/styles.js @@ -68,6 +68,10 @@ let defaultModifiers = { marginTop: em(24, 14), marginBottom: em(24, 14), }, + kbd: { + fontSize: em(12, 14), + borderRadius: rem(3), + }, code: { fontSize: em(12, 14), }, @@ -254,6 +258,10 @@ let defaultModifiers = { marginTop: em(32, 16), marginBottom: em(32, 16), }, + kbd: { + fontSize: em(14, 16), + borderRadius: rem(4), + }, code: { fontSize: em(14, 16), }, @@ -440,6 +448,10 @@ let defaultModifiers = { marginTop: em(32, 18), marginBottom: em(32, 18), }, + kbd: { + fontSize: em(16, 18), + borderRadius: rem(4), + }, code: { fontSize: em(16, 18), }, @@ -626,6 +638,10 @@ let defaultModifiers = { marginTop: em(40, 20), marginBottom: em(40, 20), }, + kbd: { + fontSize: em(18, 20), + borderRadius: rem(5), + }, code: { fontSize: em(18, 20), }, @@ -812,6 +828,10 @@ let defaultModifiers = { marginTop: em(48, 24), marginBottom: em(48, 24), }, + kbd: { + fontSize: em(20, 24), + borderRadius: rem(5), + }, code: { fontSize: em(20, 24), }, @@ -955,6 +975,9 @@ let defaultModifiers = { '--tw-prose-quotes': colors.slate[900], '--tw-prose-quote-borders': colors.slate[200], '--tw-prose-captions': colors.slate[500], + '--tw-prose-kbd': colors.slate[700], + '--tw-prose-kbd-bg': colors.slate[100], + '--tw-prose-kbd-border': colors.slate[300], '--tw-prose-code': colors.slate[900], '--tw-prose-pre-code': colors.slate[200], '--tw-prose-pre-bg': colors.slate[800], @@ -971,6 +994,9 @@ let defaultModifiers = { '--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-kbd': colors.slate[300], + '--tw-prose-invert-kbd-bg': colors.slate[800], + '--tw-prose-invert-kbd-border': colors.slate[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.slate[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -992,6 +1018,9 @@ let defaultModifiers = { '--tw-prose-quotes': colors.gray[900], '--tw-prose-quote-borders': colors.gray[200], '--tw-prose-captions': colors.gray[500], + '--tw-prose-kbd': colors.gray[700], + '--tw-prose-kbd-bg': colors.gray[100], + '--tw-prose-kbd-border': colors.gray[300], '--tw-prose-code': colors.gray[900], '--tw-prose-pre-code': colors.gray[200], '--tw-prose-pre-bg': colors.gray[800], @@ -1008,6 +1037,9 @@ let defaultModifiers = { '--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-kbd': colors.gray[300], + '--tw-prose-invert-kbd-bg': colors.gray[800], + '--tw-prose-invert-kbd-border': colors.gray[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.gray[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1029,6 +1061,9 @@ let defaultModifiers = { '--tw-prose-quotes': colors.zinc[900], '--tw-prose-quote-borders': colors.zinc[200], '--tw-prose-captions': colors.zinc[500], + '--tw-prose-kbd': colors.zinc[700], + '--tw-prose-kbd-bg': colors.zinc[100], + '--tw-prose-kbd-border': colors.zinc[300], '--tw-prose-code': colors.zinc[900], '--tw-prose-pre-code': colors.zinc[200], '--tw-prose-pre-bg': colors.zinc[800], @@ -1045,6 +1080,9 @@ let defaultModifiers = { '--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-kbd': colors.zinc[300], + '--tw-prose-invert-kbd-bg': colors.zinc[800], + '--tw-prose-invert-kbd-border': colors.zinc[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.zinc[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1066,6 +1104,9 @@ let defaultModifiers = { '--tw-prose-quotes': colors.neutral[900], '--tw-prose-quote-borders': colors.neutral[200], '--tw-prose-captions': colors.neutral[500], + '--tw-prose-kbd': colors.neutral[700], + '--tw-prose-kbd-bg': colors.neutral[100], + '--tw-prose-kbd-border': colors.neutral[300], '--tw-prose-code': colors.neutral[900], '--tw-prose-pre-code': colors.neutral[200], '--tw-prose-pre-bg': colors.neutral[800], @@ -1082,6 +1123,9 @@ let defaultModifiers = { '--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-kbd': colors.neutral[300], + '--tw-prose-invert-kbd-bg': colors.neutral[800], + '--tw-prose-invert-kbd-border': colors.neutral[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.neutral[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1103,6 +1147,9 @@ let defaultModifiers = { '--tw-prose-quotes': colors.stone[900], '--tw-prose-quote-borders': colors.stone[200], '--tw-prose-captions': colors.stone[500], + '--tw-prose-kbd': colors.stone[700], + '--tw-prose-kbd-bg': colors.stone[100], + '--tw-prose-kbd-border': colors.stone[300], '--tw-prose-code': colors.stone[900], '--tw-prose-pre-code': colors.stone[200], '--tw-prose-pre-bg': colors.stone[800], @@ -1119,6 +1166,9 @@ let defaultModifiers = { '--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-kbd': colors.stone[300], + '--tw-prose-invert-kbd-bg': colors.stone[800], + '--tw-prose-invert-kbd-border': colors.stone[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.stone[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1262,6 +1312,9 @@ let defaultModifiers = { '--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-kbd': 'var(--tw-prose-invert-kbd)', + '--tw-prose-kbd-bg': 'var(--tw-prose-invert-kbd-bg)', + '--tw-prose-kbd-border': 'var(--tw-prose-invert-kbd-border)', '--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)', @@ -1393,6 +1446,16 @@ module.exports = { picture: { display: 'block', }, + kbd: { + paddingLeft: rem(4), + paddingRight: rem(4), + color: 'var(--tw-prose-kbd)', + backgroundColor: 'var(--tw-prose-kbd-bg)', + borderColor: 'var(--tw-prose-kbd-border)', + borderWidth: '1px', + fontFamily: 'monospace', + fontWeight: '500', + }, code: { color: 'var(--tw-prose-code)', fontWeight: '600', From 7d29483236f232d4cb839995d760b3b6d632a36d Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 31 Aug 2023 08:41:27 -0400 Subject: [PATCH 2/7] Make border variable name plural --- src/styles.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/styles.js b/src/styles.js index b7eb8fd..55cad2f 100644 --- a/src/styles.js +++ b/src/styles.js @@ -977,7 +977,7 @@ let defaultModifiers = { '--tw-prose-captions': colors.slate[500], '--tw-prose-kbd': colors.slate[700], '--tw-prose-kbd-bg': colors.slate[100], - '--tw-prose-kbd-border': colors.slate[300], + '--tw-prose-kbd-borders': colors.slate[300], '--tw-prose-code': colors.slate[900], '--tw-prose-pre-code': colors.slate[200], '--tw-prose-pre-bg': colors.slate[800], @@ -996,7 +996,7 @@ let defaultModifiers = { '--tw-prose-invert-captions': colors.slate[400], '--tw-prose-invert-kbd': colors.slate[300], '--tw-prose-invert-kbd-bg': colors.slate[800], - '--tw-prose-invert-kbd-border': colors.slate[700], + '--tw-prose-invert-kbd-borders': colors.slate[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.slate[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1020,7 +1020,7 @@ let defaultModifiers = { '--tw-prose-captions': colors.gray[500], '--tw-prose-kbd': colors.gray[700], '--tw-prose-kbd-bg': colors.gray[100], - '--tw-prose-kbd-border': colors.gray[300], + '--tw-prose-kbd-borders': colors.gray[300], '--tw-prose-code': colors.gray[900], '--tw-prose-pre-code': colors.gray[200], '--tw-prose-pre-bg': colors.gray[800], @@ -1039,7 +1039,7 @@ let defaultModifiers = { '--tw-prose-invert-captions': colors.gray[400], '--tw-prose-invert-kbd': colors.gray[300], '--tw-prose-invert-kbd-bg': colors.gray[800], - '--tw-prose-invert-kbd-border': colors.gray[700], + '--tw-prose-invert-kbd-borders': colors.gray[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.gray[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1063,7 +1063,7 @@ let defaultModifiers = { '--tw-prose-captions': colors.zinc[500], '--tw-prose-kbd': colors.zinc[700], '--tw-prose-kbd-bg': colors.zinc[100], - '--tw-prose-kbd-border': colors.zinc[300], + '--tw-prose-kbd-borders': colors.zinc[300], '--tw-prose-code': colors.zinc[900], '--tw-prose-pre-code': colors.zinc[200], '--tw-prose-pre-bg': colors.zinc[800], @@ -1082,7 +1082,7 @@ let defaultModifiers = { '--tw-prose-invert-captions': colors.zinc[400], '--tw-prose-invert-kbd': colors.zinc[300], '--tw-prose-invert-kbd-bg': colors.zinc[800], - '--tw-prose-invert-kbd-border': colors.zinc[700], + '--tw-prose-invert-kbd-borders': colors.zinc[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.zinc[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1106,7 +1106,7 @@ let defaultModifiers = { '--tw-prose-captions': colors.neutral[500], '--tw-prose-kbd': colors.neutral[700], '--tw-prose-kbd-bg': colors.neutral[100], - '--tw-prose-kbd-border': colors.neutral[300], + '--tw-prose-kbd-borders': colors.neutral[300], '--tw-prose-code': colors.neutral[900], '--tw-prose-pre-code': colors.neutral[200], '--tw-prose-pre-bg': colors.neutral[800], @@ -1125,7 +1125,7 @@ let defaultModifiers = { '--tw-prose-invert-captions': colors.neutral[400], '--tw-prose-invert-kbd': colors.neutral[300], '--tw-prose-invert-kbd-bg': colors.neutral[800], - '--tw-prose-invert-kbd-border': colors.neutral[700], + '--tw-prose-invert-kbd-borders': colors.neutral[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.neutral[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1149,7 +1149,7 @@ let defaultModifiers = { '--tw-prose-captions': colors.stone[500], '--tw-prose-kbd': colors.stone[700], '--tw-prose-kbd-bg': colors.stone[100], - '--tw-prose-kbd-border': colors.stone[300], + '--tw-prose-kbd-borders': colors.stone[300], '--tw-prose-code': colors.stone[900], '--tw-prose-pre-code': colors.stone[200], '--tw-prose-pre-bg': colors.stone[800], @@ -1168,7 +1168,7 @@ let defaultModifiers = { '--tw-prose-invert-captions': colors.stone[400], '--tw-prose-invert-kbd': colors.stone[300], '--tw-prose-invert-kbd-bg': colors.stone[800], - '--tw-prose-invert-kbd-border': colors.stone[700], + '--tw-prose-invert-kbd-borders': colors.stone[700], '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.stone[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1314,7 +1314,7 @@ let defaultModifiers = { '--tw-prose-captions': 'var(--tw-prose-invert-captions)', '--tw-prose-kbd': 'var(--tw-prose-invert-kbd)', '--tw-prose-kbd-bg': 'var(--tw-prose-invert-kbd-bg)', - '--tw-prose-kbd-border': 'var(--tw-prose-invert-kbd-border)', + '--tw-prose-kbd-borders': 'var(--tw-prose-invert-kbd-borders)', '--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)', @@ -1451,7 +1451,7 @@ module.exports = { paddingRight: rem(4), color: 'var(--tw-prose-kbd)', backgroundColor: 'var(--tw-prose-kbd-bg)', - borderColor: 'var(--tw-prose-kbd-border)', + borderColor: 'var(--tw-prose-kbd-borders)', borderWidth: '1px', fontFamily: 'monospace', fontWeight: '500', From 753cabd543d402a0819debbe12a70e0710856b0e Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 31 Aug 2023 08:58:31 -0400 Subject: [PATCH 3/7] Add size-modifier specific padding --- src/styles.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/styles.js b/src/styles.js index 55cad2f..52c894b 100644 --- a/src/styles.js +++ b/src/styles.js @@ -71,6 +71,8 @@ let defaultModifiers = { kbd: { fontSize: em(12, 14), borderRadius: rem(3), + paddingRight: em(2, 16), + paddingLeft: em(2, 16), }, code: { fontSize: em(12, 14), @@ -261,6 +263,8 @@ let defaultModifiers = { kbd: { fontSize: em(14, 16), borderRadius: rem(4), + paddingRight: em(2, 16), + paddingLeft: em(2, 16), }, code: { fontSize: em(14, 16), @@ -451,6 +455,8 @@ let defaultModifiers = { kbd: { fontSize: em(16, 18), borderRadius: rem(4), + paddingRight: em(3, 18), + paddingLeft: em(3, 18), }, code: { fontSize: em(16, 18), @@ -641,6 +647,8 @@ let defaultModifiers = { kbd: { fontSize: em(18, 20), borderRadius: rem(5), + paddingRight: em(3, 20), + paddingLeft: em(3, 20), }, code: { fontSize: em(18, 20), @@ -831,6 +839,8 @@ let defaultModifiers = { kbd: { fontSize: em(20, 24), borderRadius: rem(5), + paddingRight: em(4, 24), + paddingLeft: em(4, 24), }, code: { fontSize: em(20, 24), @@ -1447,8 +1457,6 @@ module.exports = { display: 'block', }, kbd: { - paddingLeft: rem(4), - paddingRight: rem(4), color: 'var(--tw-prose-kbd)', backgroundColor: 'var(--tw-prose-kbd-bg)', borderColor: 'var(--tw-prose-kbd-borders)', From a48d639d4c28e3d4d9b54df58c47622015381ab9 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 31 Aug 2023 08:58:41 -0400 Subject: [PATCH 4/7] Tweak property order --- src/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles.js b/src/styles.js index 52c894b..3195ab6 100644 --- a/src/styles.js +++ b/src/styles.js @@ -1457,12 +1457,12 @@ module.exports = { display: 'block', }, kbd: { + fontWeight: '500', + fontFamily: 'monospace', color: 'var(--tw-prose-kbd)', backgroundColor: 'var(--tw-prose-kbd-bg)', borderColor: 'var(--tw-prose-kbd-borders)', borderWidth: '1px', - fontFamily: 'monospace', - fontWeight: '500', }, code: { color: 'var(--tw-prose-code)', From cf1c18f48e7fee99dbf2cab495600f854f50cdc6 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 31 Aug 2023 16:21:17 -0400 Subject: [PATCH 5/7] Update design --- src/styles.js | 111 +++++++++++++++++++++++++------------------------- 1 file changed, 56 insertions(+), 55 deletions(-) diff --git a/src/styles.js b/src/styles.js index 3195ab6..4ac5b7d 100644 --- a/src/styles.js +++ b/src/styles.js @@ -7,6 +7,14 @@ const round = (num) => .replace(/\.0$/, '') const rem = (px) => `${round(px / 16)}rem` const em = (px, base) => `${round(px / base)}em` +const hexToRgb = (hex) => { + hex = hex.replace('#', '') + hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex + const r = parseInt(hex.substring(0, 2), 16) + const g = parseInt(hex.substring(2, 4), 16) + const b = parseInt(hex.substring(4, 6), 16) + return `${r} ${g} ${b}` +} let defaultModifiers = { sm: { @@ -69,10 +77,11 @@ let defaultModifiers = { marginBottom: em(24, 14), }, kbd: { - fontSize: em(12, 14), - borderRadius: rem(3), - paddingRight: em(2, 16), - paddingLeft: em(2, 16), + borderRadius: rem(5), + paddingTop: em(3.75, 14), + paddingRight: em(5, 14), + paddingBottom: em(3.75, 14), + paddingLeft: em(5, 14), }, code: { fontSize: em(12, 14), @@ -261,10 +270,11 @@ let defaultModifiers = { marginBottom: em(32, 16), }, kbd: { - fontSize: em(14, 16), - borderRadius: rem(4), - paddingRight: em(2, 16), - paddingLeft: em(2, 16), + borderRadius: rem(5), + paddingTop: em(5.25, 16), + paddingRight: em(6, 16), + paddingBottom: em(5.25, 16), + paddingLeft: em(6, 16), }, code: { fontSize: em(14, 16), @@ -453,10 +463,11 @@ let defaultModifiers = { marginBottom: em(32, 18), }, kbd: { - fontSize: em(16, 18), - borderRadius: rem(4), - paddingRight: em(3, 18), - paddingLeft: em(3, 18), + borderRadius: rem(5), + paddingTop: em(5.25, 18), + paddingRight: em(8, 18), + paddingBottom: em(5.25, 18), + paddingLeft: em(8, 18), }, code: { fontSize: em(16, 18), @@ -645,10 +656,11 @@ let defaultModifiers = { marginBottom: em(40, 20), }, kbd: { - fontSize: em(18, 20), borderRadius: rem(5), - paddingRight: em(3, 20), - paddingLeft: em(3, 20), + paddingTop: em(6.25, 20), + paddingRight: em(8, 20), + paddingBottom: em(6.25, 20), + paddingLeft: em(8, 20), }, code: { fontSize: em(18, 20), @@ -837,10 +849,11 @@ let defaultModifiers = { marginBottom: em(48, 24), }, kbd: { - fontSize: em(20, 24), - borderRadius: rem(5), - paddingRight: em(4, 24), - paddingLeft: em(4, 24), + borderRadius: rem(6), + paddingTop: em(6, 24), + paddingRight: em(8, 24), + paddingBottom: em(6, 24), + paddingLeft: em(8, 24), }, code: { fontSize: em(20, 24), @@ -985,9 +998,8 @@ let defaultModifiers = { '--tw-prose-quotes': colors.slate[900], '--tw-prose-quote-borders': colors.slate[200], '--tw-prose-captions': colors.slate[500], - '--tw-prose-kbd': colors.slate[700], - '--tw-prose-kbd-bg': colors.slate[100], - '--tw-prose-kbd-borders': colors.slate[300], + '--tw-prose-kbd': colors.slate[900], + '--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]), '--tw-prose-code': colors.slate[900], '--tw-prose-pre-code': colors.slate[200], '--tw-prose-pre-bg': colors.slate[800], @@ -1004,9 +1016,8 @@ let defaultModifiers = { '--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-kbd': colors.slate[300], - '--tw-prose-invert-kbd-bg': colors.slate[800], - '--tw-prose-invert-kbd-borders': colors.slate[700], + '--tw-prose-invert-kbd': colors.white, + '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.slate[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1028,9 +1039,8 @@ let defaultModifiers = { '--tw-prose-quotes': colors.gray[900], '--tw-prose-quote-borders': colors.gray[200], '--tw-prose-captions': colors.gray[500], - '--tw-prose-kbd': colors.gray[700], - '--tw-prose-kbd-bg': colors.gray[100], - '--tw-prose-kbd-borders': colors.gray[300], + '--tw-prose-kbd': colors.gray[900], + '--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]), '--tw-prose-code': colors.gray[900], '--tw-prose-pre-code': colors.gray[200], '--tw-prose-pre-bg': colors.gray[800], @@ -1047,9 +1057,8 @@ let defaultModifiers = { '--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-kbd': colors.gray[300], - '--tw-prose-invert-kbd-bg': colors.gray[800], - '--tw-prose-invert-kbd-borders': colors.gray[700], + '--tw-prose-invert-kbd': colors.white, + '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.gray[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1071,9 +1080,8 @@ let defaultModifiers = { '--tw-prose-quotes': colors.zinc[900], '--tw-prose-quote-borders': colors.zinc[200], '--tw-prose-captions': colors.zinc[500], - '--tw-prose-kbd': colors.zinc[700], - '--tw-prose-kbd-bg': colors.zinc[100], - '--tw-prose-kbd-borders': colors.zinc[300], + '--tw-prose-kbd': colors.zinc[900], + '--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]), '--tw-prose-code': colors.zinc[900], '--tw-prose-pre-code': colors.zinc[200], '--tw-prose-pre-bg': colors.zinc[800], @@ -1090,9 +1098,8 @@ let defaultModifiers = { '--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-kbd': colors.zinc[300], - '--tw-prose-invert-kbd-bg': colors.zinc[800], - '--tw-prose-invert-kbd-borders': colors.zinc[700], + '--tw-prose-invert-kbd': colors.white, + '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.zinc[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1114,9 +1121,8 @@ let defaultModifiers = { '--tw-prose-quotes': colors.neutral[900], '--tw-prose-quote-borders': colors.neutral[200], '--tw-prose-captions': colors.neutral[500], - '--tw-prose-kbd': colors.neutral[700], - '--tw-prose-kbd-bg': colors.neutral[100], - '--tw-prose-kbd-borders': colors.neutral[300], + '--tw-prose-kbd': colors.neutral[900], + '--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]), '--tw-prose-code': colors.neutral[900], '--tw-prose-pre-code': colors.neutral[200], '--tw-prose-pre-bg': colors.neutral[800], @@ -1133,9 +1139,8 @@ let defaultModifiers = { '--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-kbd': colors.neutral[300], - '--tw-prose-invert-kbd-bg': colors.neutral[800], - '--tw-prose-invert-kbd-borders': colors.neutral[700], + '--tw-prose-invert-kbd': colors.white, + '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.neutral[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1157,9 +1162,8 @@ let defaultModifiers = { '--tw-prose-quotes': colors.stone[900], '--tw-prose-quote-borders': colors.stone[200], '--tw-prose-captions': colors.stone[500], - '--tw-prose-kbd': colors.stone[700], - '--tw-prose-kbd-bg': colors.stone[100], - '--tw-prose-kbd-borders': colors.stone[300], + '--tw-prose-kbd': colors.stone[900], + '--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]), '--tw-prose-code': colors.stone[900], '--tw-prose-pre-code': colors.stone[200], '--tw-prose-pre-bg': colors.stone[800], @@ -1176,9 +1180,8 @@ let defaultModifiers = { '--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-kbd': colors.stone[300], - '--tw-prose-invert-kbd-bg': colors.stone[800], - '--tw-prose-invert-kbd-borders': colors.stone[700], + '--tw-prose-invert-kbd': colors.white, + '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.stone[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1323,8 +1326,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', '--tw-prose-captions': 'var(--tw-prose-invert-captions)', '--tw-prose-kbd': 'var(--tw-prose-invert-kbd)', - '--tw-prose-kbd-bg': 'var(--tw-prose-invert-kbd-bg)', - '--tw-prose-kbd-borders': 'var(--tw-prose-invert-kbd-borders)', + '--tw-prose-kbd-shadows': 'var(--tw-prose-invert-kbd-shadows)', '--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)', @@ -1458,11 +1460,10 @@ module.exports = { }, kbd: { fontWeight: '500', - fontFamily: 'monospace', + fontFamily: 'inherit', color: 'var(--tw-prose-kbd)', - backgroundColor: 'var(--tw-prose-kbd-bg)', - borderColor: 'var(--tw-prose-kbd-borders)', - borderWidth: '1px', + boxShadow: + '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)', }, code: { color: 'var(--tw-prose-code)', From db9c5b444151714ed10090d0d5d613418fc9bd3f Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Thu, 31 Aug 2023 17:02:26 -0400 Subject: [PATCH 6/7] Tweak padding and font size --- src/styles.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/styles.js b/src/styles.js index 4ac5b7d..f203ec4 100644 --- a/src/styles.js +++ b/src/styles.js @@ -77,10 +77,11 @@ let defaultModifiers = { marginBottom: em(24, 14), }, kbd: { + fontSize: em(12, 14), borderRadius: rem(5), - paddingTop: em(3.75, 14), + paddingTop: em(2, 14), paddingRight: em(5, 14), - paddingBottom: em(3.75, 14), + paddingBottom: em(2, 14), paddingLeft: em(5, 14), }, code: { @@ -270,10 +271,11 @@ let defaultModifiers = { marginBottom: em(32, 16), }, kbd: { + fontSize: em(14, 16), borderRadius: rem(5), - paddingTop: em(5.25, 16), + paddingTop: em(3, 16), paddingRight: em(6, 16), - paddingBottom: em(5.25, 16), + paddingBottom: em(3, 16), paddingLeft: em(6, 16), }, code: { @@ -463,10 +465,11 @@ let defaultModifiers = { marginBottom: em(32, 18), }, kbd: { + fontSize: em(16, 18), borderRadius: rem(5), - paddingTop: em(5.25, 18), + paddingTop: em(4, 18), paddingRight: em(8, 18), - paddingBottom: em(5.25, 18), + paddingBottom: em(4, 18), paddingLeft: em(8, 18), }, code: { @@ -656,10 +659,11 @@ let defaultModifiers = { marginBottom: em(40, 20), }, kbd: { + fontSize: em(18, 20), borderRadius: rem(5), - paddingTop: em(6.25, 20), + paddingTop: em(5, 20), paddingRight: em(8, 20), - paddingBottom: em(6.25, 20), + paddingBottom: em(5, 20), paddingLeft: em(8, 20), }, code: { @@ -849,6 +853,7 @@ let defaultModifiers = { marginBottom: em(48, 24), }, kbd: { + fontSize: em(20, 24), borderRadius: rem(6), paddingTop: em(6, 24), paddingRight: em(8, 24), From ab7b1b0a661a3ba855fa0d1334ef4ba8983bd617 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Fri, 1 Sep 2023 06:39:52 -0400 Subject: [PATCH 7/7] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d6fda4..e6fcbca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301)) - Add `` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314)) - Fix `prose-invert` when used with colors in light mode ([#315](https://github.com/tailwindlabs/tailwindcss-typography/pull/315)) +- Add `` styles ([#317](https://github.com/tailwindlabs/tailwindcss-typography/pull/317)) ## [0.5.9] - 2023-01-10