From ca603f41dbb15eddc766a1e838cea32bdba611f8 Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Sun, 1 Apr 2018 19:16:12 +0200
Subject: [PATCH] New color scheme and UI design

---
 .../pretixcontrol/event/color_scheme.html     | 221 ++++++++++++++++++
 .../pretixcontrol/event/payment_provider.html |   3 +-
 .../pretixcontrol/event/tax_edit.html         |   6 +-
 src/pretix/control/urls.py                    |   1 +
 src/pretix/control/views/event.py             |   4 +
 .../pretixplugins/statistics/statistics.js    |   5 +-
 src/pretix/static/pretixbase/scss/_theme.scss | 135 +++++++++++
 .../static/pretixbase/scss/_variables.scss    |  58 +++++
 .../static/pretixbase/scss/cachedfiles.scss   |   3 +-
 src/pretix/static/pretixbase/scss/error.scss  |   3 +-
 .../static/pretixcontrol/scss/_variables.scss |  17 --
 .../static/pretixcontrol/scss/auth.scss       |   5 +-
 .../static/pretixcontrol/scss/main.scss       |   3 +-
 .../static/pretixpresale/scss/_checkout.scss  |  18 +-
 .../static/pretixpresale/scss/_variables.scss |   2 -
 .../static/pretixpresale/scss/main.scss       |   4 +-
 .../static/pretixpresale/scss/waiting.scss    |   3 +-
 .../static/pretixpresale/scss/widget.scss     |   2 +-
 src/tests/presale/test_widget.py              |   6 +-
 19 files changed, 451 insertions(+), 48 deletions(-)
 create mode 100644 src/pretix/control/templates/pretixcontrol/event/color_scheme.html
 create mode 100644 src/pretix/static/pretixbase/scss/_theme.scss
 create mode 100644 src/pretix/static/pretixbase/scss/_variables.scss
 delete mode 100644 src/pretix/static/pretixcontrol/scss/_variables.scss
 delete mode 100644 src/pretix/static/pretixpresale/scss/_variables.scss

diff --git a/src/pretix/control/templates/pretixcontrol/event/color_scheme.html b/src/pretix/control/templates/pretixcontrol/event/color_scheme.html
new file mode 100644
index 0000000000..3035c8e44d
--- /dev/null
+++ b/src/pretix/control/templates/pretixcontrol/event/color_scheme.html
@@ -0,0 +1,221 @@
+{% extends "pretixcontrol/items/base.html" %}
+{% load i18n %}
+{% block title %}{% trans "Color scheme" %}{% endblock %}
+{% block inside %}
+    <h1>{% trans "Headline" %}</h1>
+    <div class="row text-center">
+        <div class="col-md-2">
+            <button class="btn btn-default">Button</button>
+            <button class="btn btn-default btn-lg">Button</button>
+        </div>
+        <div class="col-md-2">
+            <button class="btn btn-primary ">Button</button>
+            <button class="btn btn-primary btn-lg">Button</button>
+        </div>
+        <div class="col-md-2">
+            <button class="btn btn-success ">Button</button>
+            <button class="btn btn-success btn-lg">Button</button>
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <button class="btn btn-warning ">Button</button>
+            <button class="btn btn-warning btn-lg">Button</button>
+        </div>
+        <div class="col-md-2">
+            <button class="btn btn-danger ">Button</button>
+            <button class="btn btn-danger btn-lg">Button</button>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+    <div class="row text-center">
+        <div class="col-md-2">
+            Text<br>
+            <span class="text-muted">Very secondary text</span>
+        </div>
+        <div class="col-md-2">
+            <a href="#">Link</a>
+        </div>
+        <div class="col-md-2">
+            <span class="text-success">
+                <span class="fa fa-check"></span>
+                Enabled
+            </span>
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <span class="text-danger">
+                <span class="fa fa-times"></span>
+                Disabled
+            </span>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+    <div class="row text-center">
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <span class="label label-success {{ class }}">Paid</span>
+            <br><br>
+            <div class="quotabox">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-success progress-bar-50">
+                    </div>
+                </div>
+                <div class="numbers">
+                    50 / 100
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <span class="label label-warning {{ class }}">Pending</span>
+
+            <br><br>
+            <div class="quotabox">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-warning progress-bar-100">
+                    </div>
+                </div>
+                <div class="numbers">
+                    100 / 100
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+            <span class="label label-danger {{ class }}">Canceled</span>
+
+            <br><br>
+            <div class="quotabox">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-danger progress-bar-100">
+                    </div>
+                </div>
+                <div class="numbers">
+                    100 / 100
+                </div>
+            </div>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+    <div class="row text-center">
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <ul class="nav nav-pills">
+                <li class="">
+                    <a href="#">
+                        Tab 1
+                    </a>
+                </li>
+                <li class="active">
+                    <a href="#">
+                        Tab 2
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-md-2">
+            <div class="alert alert-success">Alert message</div>
+        </div>
+        <div class="col-md-2">
+            <div class="alert alert-info">Alert message</div>
+        </div>
+        <div class="col-md-2">
+            <div class="alert alert-warning">Alert message</div>
+        </div>
+        <div class="col-md-2">
+            <div class="alert alert-danger">Alert message</div>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+    <div class="row text-center">
+        <div class="col-md-2">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        Panel
+                    </h4>
+                </div>
+                <div class="panel-body">
+                    Content
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        Panel
+                    </h4>
+                </div>
+                <div class="panel-body">
+                    Content
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+            <div class="panel panel-success">
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        Panel
+                    </h4>
+                </div>
+                <div class="panel-body">
+                    Content
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <div class="panel panel-warning">
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        Panel
+                    </h4>
+                </div>
+                <div class="panel-body">
+                    Content
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2">
+            <div class="panel panel-danger">
+                <div class="panel-heading">
+                    <h4 class="panel-title">
+                        Panel
+                    </h4>
+                </div>
+                <div class="panel-body">
+                    Content
+                </div>
+            </div>
+        </div>
+    </div>
+    <p>&nbsp;</p>
+    <div class="row text-center">
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+            <span class="fa fa-cog big-rotating-icon"></span>
+        </div>
+        <div class="col-md-2">
+            <div class="thank-you">
+                <span class="fa fa-check-circle"></span>
+            </div>
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+        </div>
+        <div class="col-md-2">
+        </div>
+    </div>
+{% endblock %}
diff --git a/src/pretix/control/templates/pretixcontrol/event/payment_provider.html b/src/pretix/control/templates/pretixcontrol/event/payment_provider.html
index 978274ddd7..d859f21f1f 100644
--- a/src/pretix/control/templates/pretixcontrol/event/payment_provider.html
+++ b/src/pretix/control/templates/pretixcontrol/event/payment_provider.html
@@ -16,8 +16,7 @@
             {% bootstrap_form form layout='control' %}
             {% if settings_content %}{{ settings_content|safe }}{% endif %}
             <p>&nbsp;</p>
-            <div class="alert alert-warning">
-                <span class="fa fa-w fa-legal fa-2x pull-left"></span>
+            <div class="alert alert-legal">
                 <strong>{% trans "Warning:" %}</strong>
                 {% blocktrans trimmed %}
                     Please note that EU Directive 2015/2366 bans surcharging payment fees for most common payment
diff --git a/src/pretix/control/templates/pretixcontrol/event/tax_edit.html b/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
index 1fe7ebf277..52b9550f47 100644
--- a/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
+++ b/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
@@ -33,29 +33,25 @@
             <div id="advanced" class="panel-collapse collapsed {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}in{% endif %}">
                 <div class="panel-body">
                     <legend>{% trans "Advanced settings" %}</legend>
-                    <div class="alert alert-warning">
-                        <span class="fa fa-fw fa-legal fa-4x pull-left"></span>
+                    <div class="alert alert-legal">
                         {% blocktrans trimmed with docs="https://docs.pretix.eu/en/latest/user/events/taxes.html" %}
                             These settings are intended for advanced users. See the
                             <a href="{{ docs }}">documentation</a>
                             for more information. Note that we are not responsible for the correct handling
                             of taxes in your ticket shop. If in doubt, please contact a lawyer or tax consultant.
                         {% endblocktrans %}
-                        <div class="clearfix"></div>
                     </div>
                     {% bootstrap_field form.price_includes_tax layout="control" %}
                     {% bootstrap_field form.eu_reverse_charge layout="control" %}
                     {% bootstrap_field form.home_country layout="control" %}
                     <legend>{% trans "Custom taxation rules" %}</legend>
                     <div class="alert alert-warning">
-                        <span class="fa fa-fw fa-exclamation-circle fa-4x pull-left"></span>
                         {% blocktrans trimmed %}
                             These settings are intended for professional users with very specific taxation situations.
                             If you create any rule here, the reverse charge settings above will be ignored. The rules will be
                             checked in order and once the first rule matches the order, it will be used and all further rules will
                             be ignored. If no rule matches, tax will be charged.
                         {% endblocktrans %}
-                        <div class="clearfix"></div>
                     </div>
 
                     <div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
diff --git a/src/pretix/control/urls.py b/src/pretix/control/urls.py
index 3c7d2f0cbe..5a4628d0d7 100644
--- a/src/pretix/control/urls.py
+++ b/src/pretix/control/urls.py
@@ -70,6 +70,7 @@ urlpatterns = [
     url(r'^event/(?P<organizer>[^/]+)/(?P<event>[^/]+)/', include([
         url(r'^$', dashboards.event_index, name='event.index'),
         url(r'^live/$', event.EventLive.as_view(), name='event.live'),
+        url(r'^colorscheme/$', event.EventColorScheme.as_view(), name='event.colorscheme'),
         url(r'^logs/$', event.EventLog.as_view(), name='event.log'),
         url(r'^delete/$', event.EventDelete.as_view(), name='event.delete'),
         url(r'^requiredactions/$', event.EventActions.as_view(), name='event.requiredactions'),
diff --git a/src/pretix/control/views/event.py b/src/pretix/control/views/event.py
index b128305316..c32d2d3dd6 100644
--- a/src/pretix/control/views/event.py
+++ b/src/pretix/control/views/event.py
@@ -738,6 +738,10 @@ class EventPermissions(EventSettingsViewMixin, EventPermissionRequiredMixin, Tem
     template_name = 'pretixcontrol/event/permissions.html'
 
 
+class EventColorScheme(EventPermissionRequiredMixin, TemplateView):
+    template_name = 'pretixcontrol/event/color_scheme.html'
+
+
 class EventLive(EventPermissionRequiredMixin, TemplateView):
     permission = 'can_change_event_settings'
     template_name = 'pretixcontrol/event/live.html'
diff --git a/src/pretix/plugins/statistics/static/pretixplugins/statistics/statistics.js b/src/pretix/plugins/statistics/static/pretixplugins/statistics/statistics.js
index daa229690e..544159f16b 100644
--- a/src/pretix/plugins/statistics/static/pretixplugins/statistics/statistics.js
+++ b/src/pretix/plugins/statistics/static/pretixplugins/statistics/statistics.js
@@ -7,7 +7,7 @@ $(function () {
         xkey: 'date',
         ykeys: ['ordered', 'paid'],
         labels: [gettext('Placed orders'), gettext('Paid orders')],
-        lineColors: ['#000099', '#009900'],
+        lineColors: ['#3b1c4a', '#50a167'],
         smooth: false,
         resize: true,
         fillOpacity: 0.3,
@@ -21,6 +21,7 @@ $(function () {
         labels: [gettext('Total revenue')],
         smooth: false,
         resize: true,
+        lineColors: ['#3b1c4a'],
         fillOpacity: 0.3,
         preUnits: $.trim($("#currency").html()) + ' '
     });
@@ -30,7 +31,7 @@ $(function () {
         xkey: 'item',
         ykeys: ['ordered', 'paid'],
         labels: [gettext('Placed orders'), gettext('Paid orders')],
-        barColors: ['#000099', '#009900'],
+        barColors: ['#3b1c4a', '#50a167'],
         resize: true,
         xLabelAngle: 30
     });
diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss
new file mode 100644
index 0000000000..fbe3ddf06f
--- /dev/null
+++ b/src/pretix/static/pretixbase/scss/_theme.scss
@@ -0,0 +1,135 @@
+.sidebar-nav li > a > .fa {
+  color: $navbar-inverse-bg;
+}
+
+.btn {
+  border-width: 0px;
+}
+
+.btn-default {
+  box-shadow: 0px 0px 0px 1px #cccccc inset;
+  box-sizing: border-box;
+}
+
+.btn-default:hover, .btn-default:focus {
+  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 3px 0 #BFBFBF;
+  background: $btn-default-bg;
+}
+
+.btn-default:active, .btn-default:active:hover, .btn-default:active:focus {
+  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 8px 0 #BFBFBF;
+  background: $btn-default-bg;
+  outline: 0;
+}
+
+.btn-primary:hover, .btn-primary:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-primary, 25%);
+  background: $btn-primary-bg;
+}
+
+.btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-primary, 25%);
+  background: $btn-primary-bg;
+  outline: 0;
+}
+
+.btn-success:hover, .btn-success:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-success, 25%);
+  background: $btn-success-bg;
+}
+
+.btn-success:active, .btn-success:active:hover, .btn-success:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-success, 25%);
+  background: $btn-success-bg;
+  outline: 0;
+}
+
+.btn-warning:hover, .btn-warning:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-warning, 25%);
+  background: $btn-warning-bg;
+}
+
+.btn-warning:active, .btn-warning:active:hover, .btn-warning:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-warning, 25%);
+  background: $btn-warning-bg;
+  outline: 0;
+}
+
+.btn-danger:hover, .btn-danger:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-danger, 25%);
+  background: $btn-danger-bg;
+}
+
+.btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-danger, 25%);
+  background: $btn-danger-bg;
+  outline: 0;
+}
+
+.alert-primary, .alert-warning, .alert-info, .alert-success, .alert-danger {
+  color: #3b3b3b;
+}
+.panel-danger > .panel-heading, .panel-success > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading, .panel-warning > .panel-heading {
+  color: #000000;
+}
+.panel-primary .panel-heading {
+  color: white;
+}
+
+
+.alert {
+  text-align: left;
+}
+.alert-legal {
+  border-color: $state-info-border;
+}
+.alert-success, .alert-danger, .alert-info, .alert-warning, .alert-legal {
+  position: relative;
+  padding-left: 65px;
+
+  &::before {
+    color: white;
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    width: 50px;
+    padding-top: 13px;
+    text-align: center;
+    height: 100%;
+    font: normal normal normal 14px FontAwesome;
+    font-size: 24px;
+    text-rendering: auto; // optimizelegibility throws things off #1094
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.alert-success::before {
+  background: $state-success-border;
+  content: "\f00c";
+}
+.alert-info::before {
+  background: $state-info-border;
+  content: "\f129";
+}
+.alert-warning::before {
+  background: $state-warning-border;
+  content: "\f071";
+  font-size: 22px;
+  padding-top: 14px;
+}
+.alert-legal::before {
+  background: $state-info-border;
+  content: "\f0e3";
+}
+.alert-danger::before {
+  background: $state-danger-border;
+  content: "\f071";
+  font-size: 22px;
+  padding-top: 14px;
+}
+
+.progress-bar {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
diff --git a/src/pretix/static/pretixbase/scss/_variables.scss b/src/pretix/static/pretixbase/scss/_variables.scss
new file mode 100644
index 0000000000..7733b80b6c
--- /dev/null
+++ b/src/pretix/static/pretixbase/scss/_variables.scss
@@ -0,0 +1,58 @@
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+$gray-darker: lighten(#000, 13.5%);
+$gray-dark: lighten(#000, 20%);
+$gray: lighten(#000, 33.5%);
+$gray-light: lighten(#000, 60%);
+$gray-lighter: lighten(#000, 93.5%);
+$gray-lightest: lighten(#000, 97.25%);
+
+$font-family-sans-serif:  "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$text-color: #222222;
+$text-muted: #999999;
+
+$brand-primary: #7f5a91 !default;
+$brand-success: #50a167;
+$brand-info: #5f9cd4;
+$brand-warning: #ffb419;
+$brand-danger: #d36060;
+
+$btn-default-border: #CCCCCC;
+
+$border-radius-base:        3px !default;
+$border-radius-large:       4px !default;
+$border-radius-small:       2px !default;
+
+$state-success-text: $brand-success;
+$state-info-text: $brand-info;
+$state-warning-text: $brand-warning;
+$state-danger-text: $brand-danger;
+
+$navbar-inverse-bg: #3b1c4a;
+$navbar-inverse-link-color: white;
+$navbar-inverse-link-hover-color: $gray-lighter;
+$navbar-inverse-brand-hover-color: $gray-lighter;
+$navbar-inverse-color: white;
+
+$state-success-bg:               white;
+$state-success-border:           $brand-success;
+$state-info-bg:                  white;
+$state-info-border:              $brand-info;
+$state-warning-bg:               white;
+$state-warning-border:           $brand-warning;
+$state-danger-bg:                white;
+$state-danger-border:            $brand-danger;
+$panel-success-border:               tint($brand-success, 50%);
+$panel-success-heading-bg:               tint($brand-success, 50%);
+$panel-danger-border:               tint($brand-danger, 50%);
+$panel-danger-heading-bg:               tint($brand-danger, 50%);
+$panel-warning-border:               tint($brand-warning, 50%);
+$panel-warning-heading-bg:               tint($brand-warning, 50%);
+$panel-default-border: #e5e5e5;
+$panel-default-heading-bg: #e5e5e5;
diff --git a/src/pretix/static/pretixbase/scss/cachedfiles.scss b/src/pretix/static/pretixbase/scss/cachedfiles.scss
index 14371f4bc6..7029126dac 100644
--- a/src/pretix/static/pretixbase/scss/cachedfiles.scss
+++ b/src/pretix/static/pretixbase/scss/cachedfiles.scss
@@ -1,6 +1,7 @@
+@import "_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "_theme.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
-@import "colors.scss";
 
 
 body {
diff --git a/src/pretix/static/pretixbase/scss/error.scss b/src/pretix/static/pretixbase/scss/error.scss
index 3788022f0f..478844a8ef 100644
--- a/src/pretix/static/pretixbase/scss/error.scss
+++ b/src/pretix/static/pretixbase/scss/error.scss
@@ -1,5 +1,6 @@
-@import "colors.scss";
+@import "_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "_theme.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 
 
diff --git a/src/pretix/static/pretixcontrol/scss/_variables.scss b/src/pretix/static/pretixcontrol/scss/_variables.scss
deleted file mode 100644
index 12c1074e6c..0000000000
--- a/src/pretix/static/pretixcontrol/scss/_variables.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$gray-darker: lighten(#000, 13.5%);
-$gray-dark: lighten(#000, 20%);
-$gray: lighten(#000, 33.5%);
-$gray-light: lighten(#000, 60%);
-$gray-lighter: lighten(#000, 93.5%);
-$gray-lightest: lighten(#000, 97.25%);
-$font-family-sans-serif:  "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$brand-primary: #8E44B3 !default;
-$brand-success: #5cb85c;
-$brand-info: #5bc0de;
-$brand-warning: #f0ad4e;
-$brand-danger: #d9534f;
-$navbar-inverse-bg: #3b1c4a;
-$navbar-inverse-link-color: white;
-$navbar-inverse-link-hover-color: $gray-lighter;
-$navbar-inverse-brand-hover-color: $gray-lighter;
-$navbar-inverse-color: white;
diff --git a/src/pretix/static/pretixcontrol/scss/auth.scss b/src/pretix/static/pretixcontrol/scss/auth.scss
index 83888db212..f148fb7c01 100644
--- a/src/pretix/static/pretixcontrol/scss/auth.scss
+++ b/src/pretix/static/pretixcontrol/scss/auth.scss
@@ -1,4 +1,7 @@
+@import "../../pretixbase/scss/_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "../../fontawesome/scss/font-awesome.scss";
+@import "../../pretixbase/scss/_theme.scss";
 
 body {
 	background: #eee;
@@ -42,4 +45,4 @@ footer {
     max-width: 330px;
     margin: auto;
     margin-bottom: 20px;
-}
\ No newline at end of file
+}
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index 548451d477..39d27a3eab 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/src/pretix/static/pretixcontrol/scss/main.scss
@@ -1,6 +1,7 @@
-@import "_variables.scss";
+@import "../../pretixbase/scss/_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
+@import "../../pretixbase/scss/_theme.scss";
 @import "../../typeahead/typeahead.scss";
 @import "../../charts/morris.scss";
 @import "../../datetimepicker/_bootstrap-datetimepicker.scss";
diff --git a/src/pretix/static/pretixpresale/scss/_checkout.scss b/src/pretix/static/pretixpresale/scss/_checkout.scss
index cfbce85ebb..ae756f50ec 100644
--- a/src/pretix/static/pretixpresale/scss/_checkout.scss
+++ b/src/pretix/static/pretixpresale/scss/_checkout.scss
@@ -47,27 +47,27 @@
     }
 
     &.step-done .checkout-step-icon {
-      border: 1px solid $brand-success;
-      background: $brand-success;
+      border: 1px solid $brand-primary;
+      background: $brand-primary;
       color: white;
     }
     &.step-done .checkout-step-label {
-      color: $brand-success;
+      color: $brand-primary;
     }
     &.step-done .checkout-step-bar-left, &.step-done .checkout-step-bar-right {
-      background: $brand-success;
+      background: $brand-primary;
     }
 
     &.step-current .checkout-step-icon {
-      border: 1px solid darken($brand-info, 20%);
-      background: darken($brand-info, 20%);
+      border: 1px solid $brand-primary;
+      background: $brand-primary;
       color: white;
     }
     &.step-current .checkout-step-label {
-      color: darken($brand-info, 20%);
+      color: $brand-primary;
     }
     &.step-current .checkout-step-bar-left {
-      background: $brand-success;
+      background: $brand-primary;
     }
     &:last-child .checkout-step-bar-right,
     &:first-child .checkout-step-bar-left {
@@ -83,4 +83,4 @@
   .checkout-step-label {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pretix/static/pretixpresale/scss/_variables.scss b/src/pretix/static/pretixpresale/scss/_variables.scss
deleted file mode 100644
index 6d391c981d..0000000000
--- a/src/pretix/static/pretixpresale/scss/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$font-family-sans-serif:  "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$brand-primary: #8E44B3 !default;
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index f597635143..c672abbb1c 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -1,6 +1,6 @@
-@import "_variables.scss";
-@import "../../pretixbase/scss/colors.scss";
+@import "../../pretixbase/scss/_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "../../pretixbase/scss/_theme.scss";
 @import "../../datetimepicker/_bootstrap-datetimepicker.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 
diff --git a/src/pretix/static/pretixpresale/scss/waiting.scss b/src/pretix/static/pretixpresale/scss/waiting.scss
index d919057827..94ab41b995 100644
--- a/src/pretix/static/pretixpresale/scss/waiting.scss
+++ b/src/pretix/static/pretixpresale/scss/waiting.scss
@@ -1,6 +1,7 @@
+@import "../../pretixbase/scss/_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "../../pretixbase/scss/_theme.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
-@import "../../pretixbase/scss/colors.scss";
 
 
 body {
diff --git a/src/pretix/static/pretixpresale/scss/widget.scss b/src/pretix/static/pretixpresale/scss/widget.scss
index 4bb890e9fd..726bf4ad9e 100644
--- a/src/pretix/static/pretixpresale/scss/widget.scss
+++ b/src/pretix/static/pretixpresale/scss/widget.scss
@@ -1,4 +1,4 @@
-@import "_variables.scss";
+@import "../../pretixbase/scss/_variables.scss";
 @import "../../bootstrap/scss/bootstrap/variables";
 @import "../../bootstrap/scss/bootstrap/mixins";
 
diff --git a/src/tests/presale/test_widget.py b/src/tests/presale/test_widget.py
index f8255fc41c..f50b29f8ca 100644
--- a/src/tests/presale/test_widget.py
+++ b/src/tests/presale/test_widget.py
@@ -255,7 +255,7 @@ class WidgetCartTest(CartTestMixin, TestCase):
     def test_css_customized(self):
         response = self.client.get('/%s/%s/widget/v1.css' % (self.orga.slug, self.event.slug))
         c = b"".join(response.streaming_content).decode()
-        assert '#8E44B3' in c
+        assert '#7f5a91' in c
         assert '#33c33c' not in c
         assert '#34c34c' not in c
 
@@ -263,7 +263,7 @@ class WidgetCartTest(CartTestMixin, TestCase):
         regenerate_organizer_css.apply(args=(self.orga.pk,))
         response = self.client.get('/%s/%s/widget/v1.css' % (self.orga.slug, self.event.slug))
         c = b"".join(response.streaming_content).decode()
-        assert '#8E44B3' not in c
+        assert '#7f5a91' not in c
         assert '#33c33c' in c
         assert '#34c34c' not in c
 
@@ -271,7 +271,7 @@ class WidgetCartTest(CartTestMixin, TestCase):
         regenerate_css.apply(args=(self.event.pk,))
         response = self.client.get('/%s/%s/widget/v1.css' % (self.orga.slug, self.event.slug))
         c = b"".join(response.streaming_content).decode()
-        assert '#8E44B3' not in c
+        assert '#7f5a91' not in c
         assert '#33c33c' not in c
         assert '#34c34c' in c