From 79f3f698d1fae6424fd95bb33124b03d27659a0b Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Fri, 1 Sep 2023 06:40:20 -0400 Subject: [PATCH] Add `` styles (#317) * Add support for the `` element * Make border variable name plural * Add size-modifier specific padding * Tweak property order * Update design * Tweak padding and font size * Update changelog --- CHANGELOG.md | 1 + demo/components/MarkdownSample.mdx | 2 +- src/styles.js | 77 ++++++++++++++++++++++++++++++ 3 files changed, 79 insertions(+), 1 deletion(-) 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 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..f203ec4 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: { @@ -68,6 +76,14 @@ let defaultModifiers = { marginTop: em(24, 14), marginBottom: em(24, 14), }, + kbd: { + fontSize: em(12, 14), + borderRadius: rem(5), + paddingTop: em(2, 14), + paddingRight: em(5, 14), + paddingBottom: em(2, 14), + paddingLeft: em(5, 14), + }, code: { fontSize: em(12, 14), }, @@ -254,6 +270,14 @@ let defaultModifiers = { marginTop: em(32, 16), marginBottom: em(32, 16), }, + kbd: { + fontSize: em(14, 16), + borderRadius: rem(5), + paddingTop: em(3, 16), + paddingRight: em(6, 16), + paddingBottom: em(3, 16), + paddingLeft: em(6, 16), + }, code: { fontSize: em(14, 16), }, @@ -440,6 +464,14 @@ let defaultModifiers = { marginTop: em(32, 18), marginBottom: em(32, 18), }, + kbd: { + fontSize: em(16, 18), + borderRadius: rem(5), + paddingTop: em(4, 18), + paddingRight: em(8, 18), + paddingBottom: em(4, 18), + paddingLeft: em(8, 18), + }, code: { fontSize: em(16, 18), }, @@ -626,6 +658,14 @@ let defaultModifiers = { marginTop: em(40, 20), marginBottom: em(40, 20), }, + kbd: { + fontSize: em(18, 20), + borderRadius: rem(5), + paddingTop: em(5, 20), + paddingRight: em(8, 20), + paddingBottom: em(5, 20), + paddingLeft: em(8, 20), + }, code: { fontSize: em(18, 20), }, @@ -812,6 +852,14 @@ let defaultModifiers = { marginTop: em(48, 24), marginBottom: em(48, 24), }, + kbd: { + fontSize: em(20, 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), }, @@ -955,6 +1003,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[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], @@ -971,6 +1021,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.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%)', @@ -992,6 +1044,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[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], @@ -1008,6 +1062,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.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%)', @@ -1029,6 +1085,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[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], @@ -1045,6 +1103,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.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%)', @@ -1066,6 +1126,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[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], @@ -1082,6 +1144,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.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%)', @@ -1103,6 +1167,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[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], @@ -1119,6 +1185,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.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%)', @@ -1262,6 +1330,8 @@ 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-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)', @@ -1393,6 +1463,13 @@ module.exports = { picture: { display: 'block', }, + kbd: { + fontWeight: '500', + fontFamily: 'inherit', + color: 'var(--tw-prose-kbd)', + 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)', fontWeight: '600',