Skip to content

Commit 79f3f69

Browse files
reininkreinink
authored
Add <kbd> styles (#317)
* Add support for the `<kbd>` element * Make border variable name plural * Add size-modifier specific padding * Tweak property order * Update design * Tweak padding and font size * Update changelog
1 parent cf15333 commit 79f3f69

File tree

3 files changed

+79
-1
lines changed

3 files changed

+79
-1
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1313
- Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301))
1414
- Add `<picture>` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
1515
- Fix `prose-invert` when used with colors in light mode ([#315](https://github.com/tailwindlabs/tailwindcss-typography/pull/315))
16+
- Add `<kbd>` styles ([#317](https://github.com/tailwindlabs/tailwindcss-typography/pull/317))
1617

1718
## [0.5.9] - 2023-01-10
1819

‎demo/components/MarkdownSample.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ When a heading comes after a paragraph, we need a bit more space, like I already
9898

9999
- **It's not a bad idea to add a third item either.**
100100

101-
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.
101+
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.
102102

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

‎src/styles.js

+77
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ const round = (num) =>
77
.replace(/\.0$/, '')
88
const rem = (px) => `${round(px / 16)}rem`
99
const em = (px, base) => `${round(px / base)}em`
10+
const hexToRgb = (hex) => {
11+
hex = hex.replace('#', '')
12+
hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex
13+
const r = parseInt(hex.substring(0, 2), 16)
14+
const g = parseInt(hex.substring(2, 4), 16)
15+
const b = parseInt(hex.substring(4, 6), 16)
16+
return `${r} ${g} ${b}`
17+
}
1018

1119
let defaultModifiers = {
1220
sm: {
@@ -68,6 +76,14 @@ let defaultModifiers = {
6876
marginTop: em(24, 14),
6977
marginBottom: em(24, 14),
7078
},
79+
kbd: {
80+
fontSize: em(12, 14),
81+
borderRadius: rem(5),
82+
paddingTop: em(2, 14),
83+
paddingRight: em(5, 14),
84+
paddingBottom: em(2, 14),
85+
paddingLeft: em(5, 14),
86+
},
7187
code: {
7288
fontSize: em(12, 14),
7389
},
@@ -254,6 +270,14 @@ let defaultModifiers = {
254270
marginTop: em(32, 16),
255271
marginBottom: em(32, 16),
256272
},
273+
kbd: {
274+
fontSize: em(14, 16),
275+
borderRadius: rem(5),
276+
paddingTop: em(3, 16),
277+
paddingRight: em(6, 16),
278+
paddingBottom: em(3, 16),
279+
paddingLeft: em(6, 16),
280+
},
257281
code: {
258282
fontSize: em(14, 16),
259283
},
@@ -440,6 +464,14 @@ let defaultModifiers = {
440464
marginTop: em(32, 18),
441465
marginBottom: em(32, 18),
442466
},
467+
kbd: {
468+
fontSize: em(16, 18),
469+
borderRadius: rem(5),
470+
paddingTop: em(4, 18),
471+
paddingRight: em(8, 18),
472+
paddingBottom: em(4, 18),
473+
paddingLeft: em(8, 18),
474+
},
443475
code: {
444476
fontSize: em(16, 18),
445477
},
@@ -626,6 +658,14 @@ let defaultModifiers = {
626658
marginTop: em(40, 20),
627659
marginBottom: em(40, 20),
628660
},
661+
kbd: {
662+
fontSize: em(18, 20),
663+
borderRadius: rem(5),
664+
paddingTop: em(5, 20),
665+
paddingRight: em(8, 20),
666+
paddingBottom: em(5, 20),
667+
paddingLeft: em(8, 20),
668+
},
629669
code: {
630670
fontSize: em(18, 20),
631671
},
@@ -812,6 +852,14 @@ let defaultModifiers = {
812852
marginTop: em(48, 24),
813853
marginBottom: em(48, 24),
814854
},
855+
kbd: {
856+
fontSize: em(20, 24),
857+
borderRadius: rem(6),
858+
paddingTop: em(6, 24),
859+
paddingRight: em(8, 24),
860+
paddingBottom: em(6, 24),
861+
paddingLeft: em(8, 24),
862+
},
815863
code: {
816864
fontSize: em(20, 24),
817865
},
@@ -955,6 +1003,8 @@ let defaultModifiers = {
9551003
'--tw-prose-quotes': colors.slate[900],
9561004
'--tw-prose-quote-borders': colors.slate[200],
9571005
'--tw-prose-captions': colors.slate[500],
1006+
'--tw-prose-kbd': colors.slate[900],
1007+
'--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]),
9581008
'--tw-prose-code': colors.slate[900],
9591009
'--tw-prose-pre-code': colors.slate[200],
9601010
'--tw-prose-pre-bg': colors.slate[800],
@@ -971,6 +1021,8 @@ let defaultModifiers = {
9711021
'--tw-prose-invert-quotes': colors.slate[100],
9721022
'--tw-prose-invert-quote-borders': colors.slate[700],
9731023
'--tw-prose-invert-captions': colors.slate[400],
1024+
'--tw-prose-invert-kbd': colors.white,
1025+
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
9741026
'--tw-prose-invert-code': colors.white,
9751027
'--tw-prose-invert-pre-code': colors.slate[300],
9761028
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -992,6 +1044,8 @@ let defaultModifiers = {
9921044
'--tw-prose-quotes': colors.gray[900],
9931045
'--tw-prose-quote-borders': colors.gray[200],
9941046
'--tw-prose-captions': colors.gray[500],
1047+
'--tw-prose-kbd': colors.gray[900],
1048+
'--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]),
9951049
'--tw-prose-code': colors.gray[900],
9961050
'--tw-prose-pre-code': colors.gray[200],
9971051
'--tw-prose-pre-bg': colors.gray[800],
@@ -1008,6 +1062,8 @@ let defaultModifiers = {
10081062
'--tw-prose-invert-quotes': colors.gray[100],
10091063
'--tw-prose-invert-quote-borders': colors.gray[700],
10101064
'--tw-prose-invert-captions': colors.gray[400],
1065+
'--tw-prose-invert-kbd': colors.white,
1066+
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
10111067
'--tw-prose-invert-code': colors.white,
10121068
'--tw-prose-invert-pre-code': colors.gray[300],
10131069
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1029,6 +1085,8 @@ let defaultModifiers = {
10291085
'--tw-prose-quotes': colors.zinc[900],
10301086
'--tw-prose-quote-borders': colors.zinc[200],
10311087
'--tw-prose-captions': colors.zinc[500],
1088+
'--tw-prose-kbd': colors.zinc[900],
1089+
'--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]),
10321090
'--tw-prose-code': colors.zinc[900],
10331091
'--tw-prose-pre-code': colors.zinc[200],
10341092
'--tw-prose-pre-bg': colors.zinc[800],
@@ -1045,6 +1103,8 @@ let defaultModifiers = {
10451103
'--tw-prose-invert-quotes': colors.zinc[100],
10461104
'--tw-prose-invert-quote-borders': colors.zinc[700],
10471105
'--tw-prose-invert-captions': colors.zinc[400],
1106+
'--tw-prose-invert-kbd': colors.white,
1107+
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
10481108
'--tw-prose-invert-code': colors.white,
10491109
'--tw-prose-invert-pre-code': colors.zinc[300],
10501110
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1066,6 +1126,8 @@ let defaultModifiers = {
10661126
'--tw-prose-quotes': colors.neutral[900],
10671127
'--tw-prose-quote-borders': colors.neutral[200],
10681128
'--tw-prose-captions': colors.neutral[500],
1129+
'--tw-prose-kbd': colors.neutral[900],
1130+
'--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]),
10691131
'--tw-prose-code': colors.neutral[900],
10701132
'--tw-prose-pre-code': colors.neutral[200],
10711133
'--tw-prose-pre-bg': colors.neutral[800],
@@ -1082,6 +1144,8 @@ let defaultModifiers = {
10821144
'--tw-prose-invert-quotes': colors.neutral[100],
10831145
'--tw-prose-invert-quote-borders': colors.neutral[700],
10841146
'--tw-prose-invert-captions': colors.neutral[400],
1147+
'--tw-prose-invert-kbd': colors.white,
1148+
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
10851149
'--tw-prose-invert-code': colors.white,
10861150
'--tw-prose-invert-pre-code': colors.neutral[300],
10871151
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1103,6 +1167,8 @@ let defaultModifiers = {
11031167
'--tw-prose-quotes': colors.stone[900],
11041168
'--tw-prose-quote-borders': colors.stone[200],
11051169
'--tw-prose-captions': colors.stone[500],
1170+
'--tw-prose-kbd': colors.stone[900],
1171+
'--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]),
11061172
'--tw-prose-code': colors.stone[900],
11071173
'--tw-prose-pre-code': colors.stone[200],
11081174
'--tw-prose-pre-bg': colors.stone[800],
@@ -1119,6 +1185,8 @@ let defaultModifiers = {
11191185
'--tw-prose-invert-quotes': colors.stone[100],
11201186
'--tw-prose-invert-quote-borders': colors.stone[700],
11211187
'--tw-prose-invert-captions': colors.stone[400],
1188+
'--tw-prose-invert-kbd': colors.white,
1189+
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
11221190
'--tw-prose-invert-code': colors.white,
11231191
'--tw-prose-invert-pre-code': colors.stone[300],
11241192
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1262,6 +1330,8 @@ let defaultModifiers = {
12621330
'--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
12631331
'--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
12641332
'--tw-prose-captions': 'var(--tw-prose-invert-captions)',
1333+
'--tw-prose-kbd': 'var(--tw-prose-invert-kbd)',
1334+
'--tw-prose-kbd-shadows': 'var(--tw-prose-invert-kbd-shadows)',
12651335
'--tw-prose-code': 'var(--tw-prose-invert-code)',
12661336
'--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
12671337
'--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
@@ -1393,6 +1463,13 @@ module.exports = {
13931463
picture: {
13941464
display: 'block',
13951465
},
1466+
kbd: {
1467+
fontWeight: '500',
1468+
fontFamily: 'inherit',
1469+
color: 'var(--tw-prose-kbd)',
1470+
boxShadow:
1471+
'0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)',
1472+
},
13961473
code: {
13971474
color: 'var(--tw-prose-code)',
13981475
fontWeight: '600',

0 commit comments

Comments
 (0)