@@ -7,13 +7,21 @@ const round = (num) =>
7
7
. replace ( / \. 0 $ / , '' )
8
8
const rem = ( px ) => `${ round ( px / 16 ) } rem`
9
9
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 ( '#' , '' )
12
16
hex = hex . length === 3 ? hex . replace ( / ./ g, '$&$&' ) : hex
13
17
const r = parseInt ( hex . substring ( 0 , 2 ) , 16 )
14
18
const g = parseInt ( hex . substring ( 2 , 4 ) , 16 )
15
19
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 } )`
17
25
}
18
26
19
27
let defaultModifiers = {
@@ -1059,7 +1067,7 @@ let defaultModifiers = {
1059
1067
'--tw-prose-quote-borders' : colors . slate [ 200 ] ,
1060
1068
'--tw-prose-captions' : colors . slate [ 500 ] ,
1061
1069
'--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%' ) ,
1063
1071
'--tw-prose-code' : colors . slate [ 900 ] ,
1064
1072
'--tw-prose-pre-code' : colors . slate [ 200 ] ,
1065
1073
'--tw-prose-pre-bg' : colors . slate [ 800 ] ,
@@ -1077,7 +1085,7 @@ let defaultModifiers = {
1077
1085
'--tw-prose-invert-quote-borders' : colors . slate [ 700 ] ,
1078
1086
'--tw-prose-invert-captions' : colors . slate [ 400 ] ,
1079
1087
'--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%' ) ,
1081
1089
'--tw-prose-invert-code' : colors . white ,
1082
1090
'--tw-prose-invert-pre-code' : colors . slate [ 300 ] ,
1083
1091
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
@@ -1100,7 +1108,7 @@ let defaultModifiers = {
1100
1108
'--tw-prose-quote-borders' : colors . gray [ 200 ] ,
1101
1109
'--tw-prose-captions' : colors . gray [ 500 ] ,
1102
1110
'--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%' ) ,
1104
1112
'--tw-prose-code' : colors . gray [ 900 ] ,
1105
1113
'--tw-prose-pre-code' : colors . gray [ 200 ] ,
1106
1114
'--tw-prose-pre-bg' : colors . gray [ 800 ] ,
@@ -1118,7 +1126,7 @@ let defaultModifiers = {
1118
1126
'--tw-prose-invert-quote-borders' : colors . gray [ 700 ] ,
1119
1127
'--tw-prose-invert-captions' : colors . gray [ 400 ] ,
1120
1128
'--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%' ) ,
1122
1130
'--tw-prose-invert-code' : colors . white ,
1123
1131
'--tw-prose-invert-pre-code' : colors . gray [ 300 ] ,
1124
1132
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
@@ -1141,7 +1149,7 @@ let defaultModifiers = {
1141
1149
'--tw-prose-quote-borders' : colors . zinc [ 200 ] ,
1142
1150
'--tw-prose-captions' : colors . zinc [ 500 ] ,
1143
1151
'--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%' ) ,
1145
1153
'--tw-prose-code' : colors . zinc [ 900 ] ,
1146
1154
'--tw-prose-pre-code' : colors . zinc [ 200 ] ,
1147
1155
'--tw-prose-pre-bg' : colors . zinc [ 800 ] ,
@@ -1159,7 +1167,7 @@ let defaultModifiers = {
1159
1167
'--tw-prose-invert-quote-borders' : colors . zinc [ 700 ] ,
1160
1168
'--tw-prose-invert-captions' : colors . zinc [ 400 ] ,
1161
1169
'--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%' ) ,
1163
1171
'--tw-prose-invert-code' : colors . white ,
1164
1172
'--tw-prose-invert-pre-code' : colors . zinc [ 300 ] ,
1165
1173
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
@@ -1182,7 +1190,7 @@ let defaultModifiers = {
1182
1190
'--tw-prose-quote-borders' : colors . neutral [ 200 ] ,
1183
1191
'--tw-prose-captions' : colors . neutral [ 500 ] ,
1184
1192
'--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%' ) ,
1186
1194
'--tw-prose-code' : colors . neutral [ 900 ] ,
1187
1195
'--tw-prose-pre-code' : colors . neutral [ 200 ] ,
1188
1196
'--tw-prose-pre-bg' : colors . neutral [ 800 ] ,
@@ -1200,7 +1208,7 @@ let defaultModifiers = {
1200
1208
'--tw-prose-invert-quote-borders' : colors . neutral [ 700 ] ,
1201
1209
'--tw-prose-invert-captions' : colors . neutral [ 400 ] ,
1202
1210
'--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%' ) ,
1204
1212
'--tw-prose-invert-code' : colors . white ,
1205
1213
'--tw-prose-invert-pre-code' : colors . neutral [ 300 ] ,
1206
1214
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
@@ -1223,7 +1231,7 @@ let defaultModifiers = {
1223
1231
'--tw-prose-quote-borders' : colors . stone [ 200 ] ,
1224
1232
'--tw-prose-captions' : colors . stone [ 500 ] ,
1225
1233
'--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%' ) ,
1227
1235
'--tw-prose-code' : colors . stone [ 900 ] ,
1228
1236
'--tw-prose-pre-code' : colors . stone [ 200 ] ,
1229
1237
'--tw-prose-pre-bg' : colors . stone [ 800 ] ,
@@ -1241,7 +1249,7 @@ let defaultModifiers = {
1241
1249
'--tw-prose-invert-quote-borders' : colors . stone [ 700 ] ,
1242
1250
'--tw-prose-invert-captions' : colors . stone [ 400 ] ,
1243
1251
'--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%' ) ,
1245
1253
'--tw-prose-invert-code' : colors . white ,
1246
1254
'--tw-prose-invert-pre-code' : colors . stone [ 300 ] ,
1247
1255
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
@@ -1527,8 +1535,7 @@ module.exports = {
1527
1535
fontWeight : '500' ,
1528
1536
fontFamily : 'inherit' ,
1529
1537
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)' ,
1532
1539
} ,
1533
1540
code : {
1534
1541
color : 'var(--tw-prose-code)' ,
0 commit comments