From 53d9d7c1827adb498521cf21f83e94ce63b64f9f Mon Sep 17 00:00:00 2001
From: Aidan Gerber <aidan@lightmatter.com>
Date: Thu, 26 May 2022 10:51:37 -0700
Subject: [PATCH] button

---
 sampleapp/templates/components.jinja          | 23 ++++++++++-------
 sampleapp/templates/components/button.jinja   | 25 +++++++++----------
 .../templates/django/forms/default.jinja      |  3 ++-
 tailwind.config.js                            |  2 +-
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/sampleapp/templates/components.jinja b/sampleapp/templates/components.jinja
index 819e902..9388c70 100644
--- a/sampleapp/templates/components.jinja
+++ b/sampleapp/templates/components.jinja
@@ -5,16 +5,16 @@
 {% endblock title %}
 {% block content %}
     <div class="container p-2">
-        <h1 class="text-bold text-3xl">Components</h1>
+        <h1>Components</h1>
         <div>
-            <h2 class="text-semibold text-xl">Buttons</h2>
+            <h2 >Buttons</h2>
             <div x-data="{ clicked: 'none' }"
                  @button-click.window="clicked = $event.detail">
-                <h1>
+                <h4>
                     Clicked Button: <span x-text="clicked"></span>
-                </h1>
+                </h4>
                 <div>
-                    <h3 class="text-semibold text-lg">Colors</h3>
+                    <h3>Colors</h3>
                     {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }}
                     {{ button('secondary normal rounded', color='secondary', variant='normal', shape='rounded') }}
                     {{ button('accent normal rounded', color='accent', variant='normal', shape='rounded') }}
@@ -24,18 +24,23 @@
                     {{ button('error normal rounded', color='error', variant='normal', shape='rounded') }}
                 </div>
                 <div>
-                    <h3 class="text-semibold text-lg">Shapes</h3>
+                    <h3>Shapes</h3>
                     {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }}
                     {{ button('primary normal square', color='primary', variant='normal', shape='square') }}
                     {{ button('primary normal circle', color='primary', variant='normal', shape='circle') }}
                 </div>
                 <div>
-                    <h3 class="text-semibold text-lg">Outlines</h3>
-                    {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }}
+                    <h3>Outlines</h3>
                     {{ button('primary outline rounded', color='primary', variant='outline', shape='rounded') }}
+                    {{ button('secondary outline rounded', color='secondary', variant='outline', shape='rounded') }}
+                    {{ button('accent outline rounded', color='accent', variant='outline', shape='rounded') }}
+                    {{ button('success outline rounded', color='success', variant='outline', shape='rounded') }}
+                    {{ button('info outline rounded', color='info', variant='outline', shape='rounded') }}
+                    {{ button('warning outline rounded', color='warning', variant='outline', shape='rounded') }}
+                    {{ button('error outline rounded', color='error', variant='outline', shape='rounded') }}
                 </div>
                 <div>
-                    <h3 class="text-semibold text-lg">Sizes</h3>
+                    <h3>Sizes</h3>
                     {{ button('primary normal rounded xs', color='primary', size="xs") }}
                     {{ button('primary normal rounded sm', color='primary', size="sm") }}
                     {{ button('primary normal rounded md', color='primary', size="md") }}
diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja
index 197fcbb..d733ee7 100644
--- a/sampleapp/templates/components/button.jinja
+++ b/sampleapp/templates/components/button.jinja
@@ -4,11 +4,6 @@
     {# Shape support: rounded, square, circle #}
     {# Size support: xs, sm, md, lg, xl #}
     {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"-600" %}
-    {% if variant == 'normal' %}
-        {% set class = class + " border border-transparent" %}
-    {% elif variant == 'outline' %}
-        {% set class = "{} border border-{}-focus".format(class, color) %}
-    {% endif %}
     {% if size == 'xs' %}
         {% set class = class + " px-2.5 py-1.5 text-xs" %}
     {% elif size == 'sm' %}
@@ -25,7 +20,11 @@
     {% elif shape == 'circle' %}
         {% set class = class + ' rounded-full' %}
     {% endif %}
-    {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %}
+    {% if variant == 'outline' %}
+        {% set class = "{} text-{} bg-{}-content hover:text-{}-focus border border-{}".format(class, color, color, color, color) %}
+    {% else %}
+        {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %}
+    {% endif %}
     <button type="{{ type }}"
             x-on:click="$dispatch('{{ dispatch_name }}', '{{ button_content }}')"
             class="{{ class }}">
@@ -33,11 +32,11 @@
     </button>
 {% endmacro %}
 {#
-text-primary-content bg-primary hover:bg-primary-focus border-primary-focus
-text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary-focus
-text-accent-content bg-accent hover:bg-accent-focus border-accent-focus
-text-success-content bg-success hover:bg-success-focus border-success-focus
-text-info-content bg-info hover:bg-info-focus border-info-focus
-text-warning-content bg-warning hover:bg-warning-focus border-warning-focus
-text-error-content bg-error hover:bg-error-focus border-error-focus
+text-primary-content bg-primary hover:bg-primary-focus border-primary bg-primary-content hover:text-primary-focus text-primary
+text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary bg-secondary-content hover:text-secondary-focus text-secondary
+text-accent-content bg-accent hover:bg-accent-focus border-accent bg-accent-content hover:text-accent-focus text-accent
+text-success-content bg-success hover:bg-success-focus border-success bg-success-content hover:text-success-focus text-success
+text-info-content bg-info hover:bg-info-focus border-info bg-info-content hover:text-info-focus text-info
+text-warning-content bg-warning hover:bg-warning-focus border-warning bg-warning-content hover:text-warning-focus text-warning
+text-error-content bg-error hover:bg-error-focus border-error bg-error-content hover:text-error-focus text-error
 #}
diff --git a/sampleapp/templates/django/forms/default.jinja b/sampleapp/templates/django/forms/default.jinja
index 2f7064a..d1587b3 100644
--- a/sampleapp/templates/django/forms/default.jinja
+++ b/sampleapp/templates/django/forms/default.jinja
@@ -1,8 +1,9 @@
 {% from 'django/forms/inputgroup.jinja' import inputgroup %}
-{% macro default(field, errors) %}
+{% macro default(fields, errors, hidden_fields) %}
     <div class="form-wrapper">
         <span class="text-red">{{ errors }}</span>
         {% for field, errors in fields %}{{ inputgroup(field, errors )}}{% endfor %}
         {% for field in hidden_fields %}{{ field }}{% endfor %}
     </div>
 {% endmacro %}
+{{ default(fields, errors, hidden_fields) }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 90533e9..3ad6fb8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
       colors: {
         primary: {
           DEFAULT: '#2D36A8',
-          focus: '#040d8c',
+          focus: '#00075e',
           content: '#ffffff'
         },
         secondary: {