phx update

assets/tailwind.config.js

@@ -1,37 +1,42 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
-const theme_colors = {
+
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+const homepage_colors = {
   transparent: 'transparent',
   current: 'currentColor',
-  blueViolet: '#540D6E',
-  paradisePink: '#ee4266',
+  indigo: '#540D6E',
+  'red-crayola': '#ee4266',
   sunglow: '#ffd23f',
   honeydew: '#f3fcf0',
-  pineTree: '#1f271b'
+  'black-olive': '#1f271b',
+  brand: "#540D6E"
 }
 
 module.exports = {
   content: [
-    './js/**/*.js',
-    '../lib/*_web.ex',
-    '../lib/*_web/**/*.*ex'
+    "./js/**/*.js",
+    "../lib/*_web.ex",
+    "../lib/*_web/**/*.*ex"
   ],
   theme: {
-    colors: theme_colors,
     extend: {
+      colors: homepage_colors,
       fontFamily: {
-        mono: ["Input", "monospace"],
-        sans: ["Inter", "sans-serif"]
+        sans: ["Inter var", "sans-serif"]
       }
     },
   },
   daisyui: {
     themes: [{
       mytheme: {
-        "primary": theme_colors.blueViolet,
-        "secondary": theme_colors.paradisePink,
-        "accent": theme_colors.sunglow,
-        "neutral": theme_colors.pineTree,
+        "primary": homepage_colors.indigo,
+        "secondary": homepage_colors['red-crayola'],
+        "accent": homepage_colors.sunglow,
+        "neutral": homepage_colors['black-olive'],
         "base-100": "#fff",
         "info": "#79D3E7",
         "success": "#20BC5E",
@@ -41,8 +46,50 @@ module.exports = {
     }]
   },
   plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
+    require("@tailwindcss/forms"),
     require("daisyui"),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+
+    // Embeds Hero Icons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).map(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": theme("spacing.5"),
+            "height": theme("spacing.5")
+          }
+        }
+      }, {values})
+    })
   ]
 }