fix: correctly apply alpha to kbd shadows when not hex

Author: te6-in

src/styles.js

@@ -7,6 +7,7 @@ const round = (num) =>
     .replace(/\.0$/, '')
 const rem = (px) => `${round(px / 16)}rem`
 const em = (px, base) => `${round(px / base)}em`
+const isHex = (hex) => /^#[0-9A-F]{6}$/i.test(hex)
 const hexToRgb = (hex) => {
   hex = hex.replace('#', '')
   hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex
@@ -1059,7 +1060,9 @@ let defaultModifiers = {
       '--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-kbd-shadows': isHex(colors.slate[900])
+        ? `rgb(${hexToRgb(colors.slate[900])} / 10%)`
+        : colors.slate[900].replace(")", " / .1)"),
       '--tw-prose-code': colors.slate[900],
       '--tw-prose-pre-code': colors.slate[200],
       '--tw-prose-pre-bg': colors.slate[800],
@@ -1077,7 +1080,7 @@ let defaultModifiers = {
       '--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-kbd-shadows': `rgb(${hexToRgb(colors.white)} / 10%)`,
       '--tw-prose-invert-code': colors.white,
       '--tw-prose-invert-pre-code': colors.slate[300],
       '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1100,7 +1103,9 @@ let defaultModifiers = {
       '--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-kbd-shadows': isHex(colors.gray[900])
+        ? `rgb(${hexToRgb(colors.gray[900])} / 10%)`
+        : colors.gray[900].replace(")", " / .1)"),
       '--tw-prose-code': colors.gray[900],
       '--tw-prose-pre-code': colors.gray[200],
       '--tw-prose-pre-bg': colors.gray[800],
@@ -1118,7 +1123,7 @@ let defaultModifiers = {
       '--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-kbd-shadows': `rgb(${hexToRgb(colors.white)} / 10%)`,
       '--tw-prose-invert-code': colors.white,
       '--tw-prose-invert-pre-code': colors.gray[300],
       '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1141,7 +1146,9 @@ let defaultModifiers = {
       '--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-kbd-shadows': isHex(colors.zinc[900])
+        ? `rgb(${hexToRgb(colors.zinc[900])} / 10%)`
+        : colors.zinc[900].replace(")", " / .1)"),
       '--tw-prose-code': colors.zinc[900],
       '--tw-prose-pre-code': colors.zinc[200],
       '--tw-prose-pre-bg': colors.zinc[800],
@@ -1159,7 +1166,7 @@ let defaultModifiers = {
       '--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-kbd-shadows': `rgb(${hexToRgb(colors.white)} / 10%)`,
       '--tw-prose-invert-code': colors.white,
       '--tw-prose-invert-pre-code': colors.zinc[300],
       '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1182,7 +1189,9 @@ let defaultModifiers = {
       '--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-kbd-shadows': isHex(colors.neutral[900])
+        ? `rgb(${hexToRgb(colors.neutral[900])} / 10%)`
+        : colors.neutral[900].replace(")", " / .1)"),
       '--tw-prose-code': colors.neutral[900],
       '--tw-prose-pre-code': colors.neutral[200],
       '--tw-prose-pre-bg': colors.neutral[800],
@@ -1200,7 +1209,7 @@ let defaultModifiers = {
       '--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-kbd-shadows': `rgb(${hexToRgb(colors.white)} / 10%)`,
       '--tw-prose-invert-code': colors.white,
       '--tw-prose-invert-pre-code': colors.neutral[300],
       '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1223,7 +1232,9 @@ let defaultModifiers = {
       '--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-kbd-shadows': isHex(colors.stone[900])
+        ? `rgb(${hexToRgb(colors.stone[900])} / 10%)`
+        : colors.stone[900].replace(")", " / .1)"),
       '--tw-prose-code': colors.stone[900],
       '--tw-prose-pre-code': colors.stone[200],
       '--tw-prose-pre-bg': colors.stone[800],
@@ -1241,7 +1252,7 @@ let defaultModifiers = {
       '--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-kbd-shadows': `rgb(${hexToRgb(colors.white)} / 10%)`,
       '--tw-prose-invert-code': colors.white,
       '--tw-prose-invert-pre-code': colors.stone[300],
       '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
@@ -1527,8 +1538,7 @@ module.exports = {
           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%)',
+          boxShadow: '0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows)',
         },
         code: {
           color: 'var(--tw-prose-code)',