Tailwind shadows plugin inherits colors from config

d0rich · Aug 24, 2024 · 167fbab · 167fbab
1 parent 40d887f
commit 167fbab
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/long-peaches-collect.md b/.changeset/long-peaches-collect.md
@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+Tailwind shadows plugin inherits colors from config
diff --git a/packages/esprit-design/plugins/shadows.js b/packages/esprit-design/plugins/shadows.js
@@ -46,9 +46,13 @@ function generateDirections() {
   return result
 }
 
-function generateColors() {
+function generateColors(themeColors) {
   const result = {}
-  for (const colorKey in colors) {
+  const localColors = {
+    ...colors,
+    ...themeColors
+  }
+  for (const colorKey in localColors) {
     if (
       [
         'inherit',
@@ -63,25 +67,25 @@ function generateColors() {
     ) {
       continue
     }
-    if (typeof colors[colorKey] === 'string') {
+    if (typeof localColors[colorKey] === 'string') {
       result[`.ss-${colorKey}`] = {
-        [COLOR_VAR]: colors[colorKey]
+        [COLOR_VAR]: localColors[colorKey]
       }
-    } else if (typeof colors[colorKey] === 'object') {
-      for (const colorVariantKey in colors[colorKey]) {
+    } else if (typeof localColors[colorKey] === 'object') {
+      for (const colorVariantKey in localColors[colorKey]) {
         result[`.ss-${colorKey}-${colorVariantKey}`] = {
-          [COLOR_VAR]: colors[colorKey][colorVariantKey]
+          [COLOR_VAR]: localColors[colorKey][colorVariantKey]
         }
       }
     }
   }
   return result
 }
 
-module.exports = plugin(function ({ addUtilities }) {
+module.exports = plugin(function ({ addUtilities, config }) {
   addUtilities({
     '.sharp-shadow': defaultStyle,
     ...generateDirections(),
-    ...generateColors()
+    ...generateColors(config().theme.colors)
   })
 })