[ui] move borderColor section to extend block and remove closure

This is because using the closure to access the theme function currently causes the base style for border to be invalid. See here: tailwindlabs/tailwindcss#7186
sapcc · Jan 24, 2022 · 6a9092d · 6a9092d
1 parent 6b2a742
commit 6a9092d
Showing 1 changed file with 29 additions and 30 deletions.
diff --git a/libs/juno-ui-components/tailwind.config.js b/libs/juno-ui-components/tailwind.config.js
@@ -157,36 +157,6 @@ module.exports = {
         accent: withOpacity("--color-accent-raw")
       }
     },
-    borderColor: theme => ({
-      ...theme('colors'),
-      theme: {
-        default: withOpacity("--color-default-border"),
-        "button-primary": withOpacity("--color-button-primary-border"),
-        "button-primary-hover": withOpacity("--color-button-primary-hover-border"),
-        "button-primary-disabled": "var(--color-button-primary-disabled-border)",
-        "button-primary-danger": "var(--color-button-primary-danger-border)",
-        "button-primary-danger-hover": "var(--color-button-primary-danger-hover-border)",
-        "button-primary-danger-active": "var(--color-button-primary-danger-active-border)",
-        "button-primary-danger-disabled": "var(--color-button-primary-danger-disabled-border)",
-        "button-default": withOpacity("--color-button-default-border"),
-        "button-default-hover": withOpacity("--color-button-default-hover-border"),
-        "button-default-active": withOpacity("--color-button-default-active-border"),
-        "button-default-disabled": "var(--color-button-default-disabled-border)",
-        "button-subdued": withOpacity("--color-button-subdued-border"),
-        "button-subdued-hover": withOpacity("--color-button-subdued-hover-border"),
-        "button-subdued-active": withOpacity("--color-button-subdued-active-border"),
-        "button-subdued-disabled": "var(--color-button-subdued-disabled-border)",
-        "message-default": withOpacity("--color-message-default-border"),
-        "message-danger": withOpacity("--color-message-danger-border"),
-        "message-error": withOpacity("--color-message-error-border"),
-        "message-warning": withOpacity("--color-message-warning-border"),
-        "message-success": withOpacity("--color-message-success-border"),
-        "switch-default": withOpacity("--color-switch-default-border"),
-        "switch-hover": withOpacity("--color-switch-hover-border"),
-        "datalist-row": withOpacity("--color-datalist-row-border"),
-        "introbox": withOpacity("--color-introbox-border"),
-      },
-    }),
     extend: {
       backgroundColor: {
         theme: {
@@ -265,6 +235,35 @@ module.exports = {
           "checkbox-checked": withOpacity("--color-checkbox-checked-color"),
         },
       },
+      borderColor: {
+        theme: {
+          default: withOpacity("--color-default-border"),
+          "button-primary": withOpacity("--color-button-primary-border"),
+          "button-primary-hover": withOpacity("--color-button-primary-hover-border"),
+          "button-primary-disabled": "var(--color-button-primary-disabled-border)",
+          "button-primary-danger": "var(--color-button-primary-danger-border)",
+          "button-primary-danger-hover": "var(--color-button-primary-danger-hover-border)",
+          "button-primary-danger-active": "var(--color-button-primary-danger-active-border)",
+          "button-primary-danger-disabled": "var(--color-button-primary-danger-disabled-border)",
+          "button-default": withOpacity("--color-button-default-border"),
+          "button-default-hover": withOpacity("--color-button-default-hover-border"),
+          "button-default-active": withOpacity("--color-button-default-active-border"),
+          "button-default-disabled": "var(--color-button-default-disabled-border)",
+          "button-subdued": withOpacity("--color-button-subdued-border"),
+          "button-subdued-hover": withOpacity("--color-button-subdued-hover-border"),
+          "button-subdued-active": withOpacity("--color-button-subdued-active-border"),
+          "button-subdued-disabled": "var(--color-button-subdued-disabled-border)",
+          "message-default": withOpacity("--color-message-default-border"),
+          "message-danger": withOpacity("--color-message-danger-border"),
+          "message-error": withOpacity("--color-message-error-border"),
+          "message-warning": withOpacity("--color-message-warning-border"),
+          "message-success": withOpacity("--color-message-success-border"),
+          "switch-default": withOpacity("--color-switch-default-border"),
+          "switch-hover": withOpacity("--color-switch-hover-border"),
+          "datalist-row": withOpacity("--color-datalist-row-border"),
+          "introbox": withOpacity("--color-introbox-border"),
+        },
+      },
       // backgroundImage: theme => ({
       //   'icon-arrow-down': "url('./img/icon_arrow_down.svg')",
       // }),