fix: use DaisyUI colors for social login buttons (#85)

Using the brand colors from social login providers doesn't work well
with the different DaisyUI themes.

allauth_ui/static/allauth_ui/input.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer components {
-  .social-github {
-    @apply bg-stone-900 hover:bg-black
-  }
-  .social-facebook {
-    @apply bg-blue-700 hover:bg-blue-800
-  }
-  .social-google {
-    @apply bg-red-700 hover:bg-red-800
-  }
-  .social-linkedin {
-    @apply bg-cyan-600 hover:bg-cyan-700
-  }
-  .social-strava {
-    @apply bg-orange-400 hover:bg-orange-500
-  }
-  .social-exist {
-    @apply bg-gray-500 hover:bg-gray-600
-  }
-  .social-wahoo {
-    @apply bg-cyan-500 hover:bg-cyan-700
-  }
-}

allauth_ui/templates/socialaccount/snippets/provider_list.html

@@ -9,11 +9,11 @@
                     {% provider_login_url provider openid=brand.openid_url process=process as href %}
                     {% element provider name=brand.name provider_id=provider.id href=href %}
                 {% endelement %}
-                <a class="btn w-full my-1" title="{{ brand.name }}" href="{{ href }}">{{ brand.name }}</a>
+                <a class="w-full my-1 btn" title="{{ brand.name }}" href="{{ href }}">{{ brand.name }}</a>
             {% endfor %}
         {% endif %}
         {% provider_login_url provider process=process scope=scope auth_params=auth_params as href %}
-        <a class="btn w-full my-1 text-white {{ provider | socialprovider_color }}"
+        <a class="btn w-full my-1 text-primary-content bg-primary hover:bg-accent "
            title="{{ provider.name }}"
            href="{{ href }}">{{ provider.name }}</a>
     {% endfor %}

allauth_ui/templatetags/allauth_ui.py

@@ -1,28 +1,8 @@
-import re
-from pathlib import Path
-
 from django import template
 from django.conf import settings
 
 register = template.Library()
 
-input_css_path = Path(__file__).parent / ".." / "static" / "allauth_ui" / "input.css"
-social_colors = []
-
-with open(input_css_path, encoding="utf8") as f:
-    for line in f.readlines():
-        m = re.search(r"\.social-(?P<provider>\w+)\s?", line)
-        if m:
-            social_colors.append(m.groupdict()["provider"])
-
-
-@register.filter()
-def socialprovider_color(socialprovider):
-    name = socialprovider.name.lower()
-    if name in social_colors:
-        return f"social-{name}"
-    return "bg-stone-900 hover:bg-stone-700"
-
 
 @register.simple_tag
 def allauth_ui_theme():

sample_deployment/sample_deployment/theme/static_src/src/styles.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer components {
-  .social-github {
-    @apply bg-stone-900 hover:bg-black
-  }
-  .social-facebook {
-    @apply bg-blue-700 hover:bg-blue-800
-  }
-  .social-google {
-    @apply bg-red-700 hover:bg-red-800
-  }
-  .social-linkedin {
-    @apply bg-cyan-600 hover:bg-cyan-700
-  }
-  .social-strava {
-    @apply bg-orange-400 hover:bg-orange-500
-  }
-  .social-exist {
-    @apply bg-gray-500 hover:bg-gray-600
-  }
-  .social-wahoo {
-    @apply bg-cyan-500 hover:bg-cyan-700
-  }
-}

tailwind.config.js

@@ -2,9 +2,6 @@ module.exports = {
   content: [
     './allauth_ui/templates/**/*.html',
   ],
-  safelist: [{
-    pattern: /social-|bg-/
-  }],
   theme: {
     extend: {},
   },