Add new style

2023-07-08 16:50:56 +02:00 · 2023-07-08 16:50:56 +02:00 · 27db76cdeb
parent 29fdac270b
commit 27db76cdeb
8 changed files with 243 additions and 19 deletions
--- a/COLORS.md
+++ b/COLORS.md
@ -0,0 +1,163 @@
+<style>
+    .color-description {
+        display: flex;
+        align-items: center;
+    }
+
+    .color-swatch {
+        height: 20px;
+        width: 20px;
+        margin-right: 1rem;
+        white-space: pre;
+        margin-right: 1rem;
+        margin-left: 1rem;
+    }
+
+    .selector {
+        width: 12rem;
+    }
+
+    .dark {
+        color: white;
+        background-color: rgb(43, 48, 53);
+    }
+</style>
+
+# Colors
+
+## Basics
+There is a set of colors for each the light and dark theme.
+
+## Light theme
+
+### Main colors
+<div class="color-description">
+    <code class="selector">--pfl-color</code>:
+    <div class="color-swatch" style="background-color: #4c6e4dff;"></div>
+    <code>#4c6e4dff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-dark-green</code>:
+    <div class="color-swatch" style="background-color: #374139ff;"></div>
+    <code>#374139ff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-grey</code>:
+    <div class="color-swatch" style="background-color: #93877a;"></div>
+    <code>#93877a</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-brown</code>:
+    <div class="color-swatch" style="background-color: #dbc8baff;"></div>
+    <code>#dbc8baff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-orange</code>:
+    <div class="color-swatch" style="background-color: #ed7e2cff;"></div>
+    <code>#ed7e2cff</code>
+</div>
+
+### Background colors
+<div class="color-description">
+    <code class="selector">--bg-pfl-color</code>:
+    <div class="color-swatch" style="background-color: #3f5b40ff;"></div>
+    <code>#3f5b40ff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-dark-green</code>:
+    <div class="color-swatch" style="background-color: #2f3831ff;"></div>
+    <code>#2f3831ff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-grey</code>:
+    <div class="color-swatch" style="background-color: #7b7166;"></div>
+    <code>#7b7166</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-brown</code>:
+    <div class="color-swatch" style="background-color: #c4a58fff;"></div>
+    <code>#c4a58fff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-orange</code>:
+    <div class="color-swatch" style="background-color: #d96513ff;"></div>
+    <code>#d96513ff</code>
+</div>
+
+-------------------------------------------------------------------------
+
+## Dark theme
+
+### Main colors
+<div class="dark">
+<div class="color-description">
+    <code class="selector">--pfl-color</code>:
+    <div class="color-swatch" style="background-color: #8eb57b;"></div>
+    <code>#8eb57b</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-dark-green</code>:
+    <div class="color-swatch" style="background-color: #4c6e4dff;"></div>
+    <code>#4c6e4dff</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-grey</code>:
+    <div class="color-swatch" style="background-color: #bbbbbb;"></div>
+    <code>#bbbbbb</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-brown</code>:
+    <div class="color-swatch" style="background-color: #8f7e6b;"></div>
+    <code>#8f7e6b</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--pfl-orange</code>:
+    <div class="color-swatch" style="background-color: #e1ad45;"></div>
+    <code>#e1ad45</code>
+</div>
+</div>
+
+### Background colors
+<div class="dark">
+<div class="color-description">
+    <code class="selector">--bg-pfl-color</code>:
+    <div class="color-swatch" style="background-color: #728f64;"></div>
+    <code>#728f64</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-dark-green</code>:
+    <div class="color-swatch" style="background-color: #3d583e;"></div>
+    <code>#3d583e</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-grey</code>:
+    <div class="color-swatch" style="background-color: #9b9b9b;"></div>
+    <code>#9b9b9b</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-brown</code>:
+    <div class="color-swatch" style="background-color: #7b7166;"></div>
+    <code>#7b7166</code>
+</div>
+
+<div class="color-description">
+    <code class="selector">--bg-pfl-orange</code>:
+    <div class="color-swatch" style="background-color: #c98f44ff;"></div>
+    <code>#c98f44ff</code>
+</div>
+</div>
--- a/pflaenzli/pflaenzli/static/base.css
+++ b/pflaenzli/pflaenzli/static/base.css
@ -1,6 +1,18 @@
 :root {
-    --pfl-color: #188d1c;
-    --bg-pfl-color: #59af5c;
+    /* Primary */
+    --pfl-color: #4c6e4dff;
+    --pfl-dark-green: #374139ff;
+    --pfl-grey: #93877a;
+    --pfl-brown: #dbc8baff;
+    --pfl-orange: #ed7e2cff;
+
+    /* Muted */
+    --bg-pfl-color: #3f5b40ff;
+    --bg-pfl-dark-green: #2f3831ff;
+    --bg-pfl-grey: #7b7166;
+    --bg-pfl-brown: #c4a58fff;
+    --bg-pfl-orange: #d96513ff;
+
    --pfl-primary-bg-subtle: #cbf7cd;
    --pfl-primary-text: var(--bg-pfl-color);
    --pfl-primary-border-subtle: #6db770;
@ -11,8 +23,21 @@
 }

 :root[data-bs-theme='dark'] {
-    --pfl-primary-bg-subtle: #183119;
-    --pfl-primary-text: #5aac5d;
+    /* Primary */
+    --pfl-color: #8eb57b;
+    --pfl-dark-green: #4c6e4dff;
+    --pfl-grey: #bbbbbb;
+    --pfl-brown: #8f7e6b;
+    --pfl-orange: #d3a569ff;
+
+    /* Muted */
+    --bg-pfl-color: #728f64;
+    --bg-pfl-dark-green: #3d583e;
+    --bg-pfl-grey: #9b9b9b;
+    --bg-pfl-brown: #7d6e5d;
+    --bg-pfl-orange: #c98f44ff;
+
+    --pfl-primary-text: var(--pfl-color);
    --pfl-primary-border-subtle: var(--pfl-color);
    --bs-heading-color: #fff;
    --pfl-logo: url('/static/dark.png');
@ -20,20 +45,22 @@
 }

 .btn-pfl {
-    --bs-btn-color: #fff;
+    --bs-btn-color: var(--bs-body-bg);
+    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-bg: var(--pfl-color);
    --bs-btn-border-color: var(--pfl-color);
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #117314;
-    --bs-btn-hover-border-color: var(--pfl-color);
+    --bs-btn-hover-bg: var(--bg-pfl-color);
+    --bs-btn-hover-border-color: var(--bg-pfl-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
-    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pfl-color);
-    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color: #fff;
-    --bs-btn-disabled-bg: var(--pfl-color);
-    --bs-btn-disabled-border-color: var(--pfl-color);
+}
+
+.btn-pfl-secondary {
+    --bs-btn-bg: var(--pfl-brown);
+    --bs-btn-hover-bg: var(--bg-pfl-brown);
+    --bs-btn-color: var(--bs-heading-color);
+    --bs-btn-hover-color: var(--bs-heading-color);
 }

 .bg-pfl {
@ -98,4 +125,38 @@ a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
+}
+
+.pfl-plnt {
+    background-color: var(--pfl-color);
+    color: var(--bs-body-bg);
+}
+
+.pfl-seed {
+    background-color: var(--pfl-dark-green);
+}
+
+.pfl-pot {
+    background-color: var(--pfl-brown);
+    color: var(--bs-heading-color);
+}
+
+.pfl-tool {
+    background-color: var(--pfl-grey);
+    color: var(--bs-body-bg);
+}
+
+.pfl-othr {
+    background-color: var(--bs-heading-color);
+    color: var(--bs-body-bg);
+}
+
+.btn-danger {
+    --bs-btn-color: var(--bs-body-bg);
+    --bs-btn-bg: var(--pfl-orange);
+    --bs-btn-hover-color: var(--bs-body-bg);
+    --bs-btn-border-color: var(--pfl-orange);
+    --bs-btn-hover-bg: var(--bg-pfl-orange);
+    --bs-btn-hover-border-color: var(--bg-pfl-orange);
+    --bs-btn-active-bg: var(--pfl-orange);
 }
--- a/pflaenzli/pflaenzli/templates/403.html
+++ b/pflaenzli/pflaenzli/templates/403.html
@ -13,6 +13,6 @@
        </p>
        <h2>{% trans "What now?" %}</h2>
        <a href="{% url 'index' %}" class="btn btn-pfl">{% trans "Go home" %}</a>
-        <a href="mailto:contact@pflaenz.li" class="btn btn-secondary">{% trans "Report error" %}</a>
+        <a href="mailto:contact@pflaenz.li" class="btn btn-pfl-secondary">{% trans "Report error" %}</a>
    </div>
 {% endblock content %}
--- a/pflaenzli/pflaenzli/templates/403_csrf.html
+++ b/pflaenzli/pflaenzli/templates/403_csrf.html
@ -13,6 +13,6 @@
        </p>
        <h2>{% trans "What now?" %}</h2>
        <a href="{% url 'index' %}" class="btn btn-pfl">{% trans "Go home" %}</a>
-        <a href="mailto:contact@pflaenz.li" class="btn btn-secondary">{% trans "Report error" %}</a>
+        <a href="mailto:contact@pflaenz.li" class="btn btn-pfl-secondary">{% trans "Report error" %}</a>
    </div>
 {% endblock content %}
--- a/pflaenzli/pflaenzli/templates/404.html
+++ b/pflaenzli/pflaenzli/templates/404.html
@ -13,6 +13,6 @@
        </p>
        <h2>{% trans "What now?" %}</h2>
        <a href="{% url 'index' %}" class="btn btn-pfl">{% trans "Go home" %}</a>
-        <a href="mailto:contact@pflaenz.li" class="btn btn-secondary">{% trans "Report error" %}</a>
+        <a href="mailto:contact@pflaenz.li" class="btn btn-pfl-secondary">{% trans "Report error" %}</a>
    </div>
 {% endblock content %}
--- a/pflaenzli/pflaenzli/templates/500.html
+++ b/pflaenzli/pflaenzli/templates/500.html
@ -13,6 +13,6 @@
        </p>
        <h2>{% trans "What now?" %}</h2>
        <a href="{% url 'index' %}" class="btn btn-pfl">{% trans "Go home" %}</a>
-        <a href="mailto:contact@pflaenz.li" class="btn btn-secondary">{% trans "Report error" %}</a>
+        <a href="mailto:contact@pflaenz.li" class="btn btn-pfl-secondary">{% trans "Report error" %}</a>
    </div>
 {% endblock content %}
--- a/pflaenzli/pflaenzli/templates/app/index.html
+++ b/pflaenzli/pflaenzli/templates/app/index.html
@ -23,7 +23,7 @@
           class="btn btn-pfl btn-lg mb-3"
           type="button">{% trans "Show offers" %}</a>
        <a href="{% url 'register_user' %}"
-           class="btn btn-secondary btn-lg mb-3"
+           class="btn btn-pfl-secondary btn-lg mb-3"
           type="button">{% trans "Register" %}</a>
      </div>
    </div>
--- a/pflaenzli/pflaenzli/templates/offer/detail.html
+++ b/pflaenzli/pflaenzli/templates/offer/detail.html
@ -68,7 +68,7 @@
                    </div>
                    <div class="modal-body">{% trans "Do you really want to delete this offer? This can't be undone." %}</div>
                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+                        <button type="button" class="btn btn-pfl-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                        <a href="{% url 'offer_delete' offer.id %}"
                           type="button"
                           class="btn btn-danger">{% trans "Delete" %}</a>