Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add <kbd> styles #317

Merged
merged 7 commits into from
Sep 1, 2023
Merged

Add <kbd> styles #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8ac5edd
Add support for the `<kbd>` element
reinink Aug 30, 2023
7d29483
Make border variable name plural
reinink Aug 31, 2023
753cabd
Add size-modifier specific padding
reinink Aug 31, 2023
a48d639
Tweak property order
reinink Aug 31, 2023
cf1c18f
Update design
reinink Aug 31, 2023
db9c5b4
Tweak padding and font size
reinink Aug 31, 2023
ab7b1b0
Update changelog
reinink Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:/tailwindlabs/tailwindcss-typography/pull/301))
- Add `<picture>` styles ([#314](https:/tailwindlabs/tailwindcss-typography/pull/314))
- Fix `prose-invert` when used with colors in light mode ([#315](https:/tailwindlabs/tailwindcss-typography/pull/315))
- Add `<kbd>` styles ([#317](https:/tailwindlabs/tailwindcss-typography/pull/317))

## [0.5.9] - 2023-01-10

Expand Down
2 changes: 1 addition & 1 deletion demo/components/MarkdownSample.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <kbd>Enter</kbd> now.

After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping right to a heading.

Expand Down
77 changes: 77 additions & 0 deletions src/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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),
},
Expand Down Expand Up @@ -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),
},
Expand Down Expand Up @@ -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),
},
Expand Down Expand Up @@ -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),
},
Expand Down Expand Up @@ -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),
},
Expand Down Expand Up @@ -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],
Expand All @@ -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%)',
Expand All @@ -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],
Expand All @@ -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%)',
Expand All @@ -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],
Expand All @@ -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%)',
Expand All @@ -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],
Expand All @@ -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%)',
Expand All @@ -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],
Expand All @@ -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%)',
Expand Down Expand Up @@ -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)',
Expand Down Expand Up @@ -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',
Expand Down
Loading