Skip to content

Commit 9ccbd37

Browse files
Fix kbd shadow colors not being calculated on oklch colors (#387)
* fix: correctly apply alpha to kbd shadows when not hex * Use `color-mix(…)` for non hex values * Add changelog --------- Co-authored-by: Philipp Spiess <[email protected]>
1 parent 0049c73 commit 9ccbd37

File tree

2 files changed

+23
-15
lines changed

2 files changed

+23
-15
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379)
13+
- Ensure `<kbd>` styles work with Tailwind CSS v4 ([#387](https://github.com/tailwindlabs/tailwindcss-typography/pull/387))
1314

1415
### Changed
1516

src/styles.js

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,21 @@ 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('#', '')
10+
const opacity = (color, opacity) => {
11+
// In v3, the colors are hex encoded and a previous typography plugin version
12+
// only handled these values. We keep the old behavior for backward
13+
// compatibility with v3 codebases but use color-mix for any other color
14+
// values.
15+
hex = color.replace('#', '')
1216
hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex
1317
const r = parseInt(hex.substring(0, 2), 16)
1418
const g = parseInt(hex.substring(2, 4), 16)
1519
const b = parseInt(hex.substring(4, 6), 16)
16-
return `${r} ${g} ${b}`
20+
21+
if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
22+
return `color-mix(in oklab, ${color} ${opacity}, transparent)`
23+
}
24+
return `rgb(${r}, ${g}, ${b} / ${opacity})`
1725
}
1826

1927
let defaultModifiers = {
@@ -1059,7 +1067,7 @@ let defaultModifiers = {
10591067
'--tw-prose-quote-borders': colors.slate[200],
10601068
'--tw-prose-captions': colors.slate[500],
10611069
'--tw-prose-kbd': colors.slate[900],
1062-
'--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]),
1070+
'--tw-prose-kbd-shadows': opacity(colors.slate[900], '10%'),
10631071
'--tw-prose-code': colors.slate[900],
10641072
'--tw-prose-pre-code': colors.slate[200],
10651073
'--tw-prose-pre-bg': colors.slate[800],
@@ -1077,7 +1085,7 @@ let defaultModifiers = {
10771085
'--tw-prose-invert-quote-borders': colors.slate[700],
10781086
'--tw-prose-invert-captions': colors.slate[400],
10791087
'--tw-prose-invert-kbd': colors.white,
1080-
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
1088+
'--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'),
10811089
'--tw-prose-invert-code': colors.white,
10821090
'--tw-prose-invert-pre-code': colors.slate[300],
10831091
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1100,7 +1108,7 @@ let defaultModifiers = {
11001108
'--tw-prose-quote-borders': colors.gray[200],
11011109
'--tw-prose-captions': colors.gray[500],
11021110
'--tw-prose-kbd': colors.gray[900],
1103-
'--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]),
1111+
'--tw-prose-kbd-shadows': opacity(colors.gray[900], '10%'),
11041112
'--tw-prose-code': colors.gray[900],
11051113
'--tw-prose-pre-code': colors.gray[200],
11061114
'--tw-prose-pre-bg': colors.gray[800],
@@ -1118,7 +1126,7 @@ let defaultModifiers = {
11181126
'--tw-prose-invert-quote-borders': colors.gray[700],
11191127
'--tw-prose-invert-captions': colors.gray[400],
11201128
'--tw-prose-invert-kbd': colors.white,
1121-
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
1129+
'--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'),
11221130
'--tw-prose-invert-code': colors.white,
11231131
'--tw-prose-invert-pre-code': colors.gray[300],
11241132
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1141,7 +1149,7 @@ let defaultModifiers = {
11411149
'--tw-prose-quote-borders': colors.zinc[200],
11421150
'--tw-prose-captions': colors.zinc[500],
11431151
'--tw-prose-kbd': colors.zinc[900],
1144-
'--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]),
1152+
'--tw-prose-kbd-shadows': opacity(colors.zinc[900], '10%'),
11451153
'--tw-prose-code': colors.zinc[900],
11461154
'--tw-prose-pre-code': colors.zinc[200],
11471155
'--tw-prose-pre-bg': colors.zinc[800],
@@ -1159,7 +1167,7 @@ let defaultModifiers = {
11591167
'--tw-prose-invert-quote-borders': colors.zinc[700],
11601168
'--tw-prose-invert-captions': colors.zinc[400],
11611169
'--tw-prose-invert-kbd': colors.white,
1162-
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
1170+
'--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'),
11631171
'--tw-prose-invert-code': colors.white,
11641172
'--tw-prose-invert-pre-code': colors.zinc[300],
11651173
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1182,7 +1190,7 @@ let defaultModifiers = {
11821190
'--tw-prose-quote-borders': colors.neutral[200],
11831191
'--tw-prose-captions': colors.neutral[500],
11841192
'--tw-prose-kbd': colors.neutral[900],
1185-
'--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]),
1193+
'--tw-prose-kbd-shadows': opacity(colors.neutral[900], '10%'),
11861194
'--tw-prose-code': colors.neutral[900],
11871195
'--tw-prose-pre-code': colors.neutral[200],
11881196
'--tw-prose-pre-bg': colors.neutral[800],
@@ -1200,7 +1208,7 @@ let defaultModifiers = {
12001208
'--tw-prose-invert-quote-borders': colors.neutral[700],
12011209
'--tw-prose-invert-captions': colors.neutral[400],
12021210
'--tw-prose-invert-kbd': colors.white,
1203-
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
1211+
'--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'),
12041212
'--tw-prose-invert-code': colors.white,
12051213
'--tw-prose-invert-pre-code': colors.neutral[300],
12061214
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1223,7 +1231,7 @@ let defaultModifiers = {
12231231
'--tw-prose-quote-borders': colors.stone[200],
12241232
'--tw-prose-captions': colors.stone[500],
12251233
'--tw-prose-kbd': colors.stone[900],
1226-
'--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]),
1234+
'--tw-prose-kbd-shadows': opacity(colors.stone[900], '10%'),
12271235
'--tw-prose-code': colors.stone[900],
12281236
'--tw-prose-pre-code': colors.stone[200],
12291237
'--tw-prose-pre-bg': colors.stone[800],
@@ -1241,7 +1249,7 @@ let defaultModifiers = {
12411249
'--tw-prose-invert-quote-borders': colors.stone[700],
12421250
'--tw-prose-invert-captions': colors.stone[400],
12431251
'--tw-prose-invert-kbd': colors.white,
1244-
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
1252+
'--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'),
12451253
'--tw-prose-invert-code': colors.white,
12461254
'--tw-prose-invert-pre-code': colors.stone[300],
12471255
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1527,8 +1535,7 @@ module.exports = {
15271535
fontWeight: '500',
15281536
fontFamily: 'inherit',
15291537
color: 'var(--tw-prose-kbd)',
1530-
boxShadow:
1531-
'0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)',
1538+
boxShadow: '0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows)',
15321539
},
15331540
code: {
15341541
color: 'var(--tw-prose-code)',

0 commit comments

Comments
 (0)