From 24a0206da6efeea01125ab7872579c0e8bbd1541 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 12 Aug 2021 17:51:22 +0200
Subject: [PATCH] WIP Migrate to tailwind and alpine

---
 .../Private/Assets/scss/components/_background.scss         | 4 ++--
 .../Resources/Private/Assets/scss/components/_buttons.scss  | 3 +++
 .../Resources/Private/Assets/scss/components/_tiles.scss    | 2 +-
 .../Resources/Private/Partials/Disrupter/Large.html         | 6 +++---
 .../Resources/Private/Partials/Disturber/Large.html         | 2 +-
 .../ep_theme/Resources/Private/Partials/Form/Checkbox.html  | 2 +-
 tailwind.config.js                                          | 4 ++++
 7 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_background.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_background.scss
index a379bb41..79a02345 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_background.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_background.scss
@@ -5,7 +5,7 @@
 
     &:before {
         @apply block absolute top-0 left-0 inset-0 opacity-80;
-        @apply bg-ep-primary sbw:bg-sbw-primary;
+        @apply bg-ep-primary sbw:bg-sbw-primary uch:bg-uch-primary;
         z-index: -10;
         content: '';
     }
@@ -18,7 +18,7 @@
 
     &:before {
         @apply block absolute top-0 left-0 inset-0 opacity-80;
-        @apply bg-ep-primary sbw:bg-sbw-primary;
+        @apply bg-ep-primary sbw:bg-sbw-primary uch:bg-uch-primary;
         z-index: -10;
         content: '';
     }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index 084f373e..2c17530d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -4,16 +4,19 @@
     @apply transition-colors outline-none focus:outline-none;
     @apply bg-ep-secondary border-2 border-ep-secondary text-white;
     @apply sbw:bg-sbw-secondary sbw:border-sbw-secondary;
+    @apply uch:bg-uch-secondary uch:border-uch-secondary;
 
     &--active,
     &--secondary {
         @apply bg-ep-primary border-ep-primary;
         @apply sbw:bg-sbw-primary sbw:border-sbw-primary;
+        @apply uch:bg-uch-primary uch:border-uch-primary;
     }
 
     &:hover {
         @apply bg-ep-primary-dark border-ep-primary-dark;
         @apply sbw:bg-sbw-primary-dark sbw:border-sbw-primary-dark;
+        @apply uch:bg-uch-primary-dark uch:border-uch-primary-dark;
     }
 
     &--light {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
index 9cbd798c..f2ce7dda 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
@@ -37,7 +37,7 @@
     }
 
     &:hover:after {
-        @apply sbw:bg-sbw-overlay-secondary;
+        @apply sbw:bg-sbw-overlay-secondary uch:bg-uch-overlay-secondary;
     }
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
index 0dd03b08..5920c2f6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
@@ -5,7 +5,7 @@
 
     <div class="bg-winter my-2">
         <f:if condition="{settings.themeKey} == 'ep'">
-            <f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block sbw:md:hidden transform -translate-y-2 text-white'}"/>
+            <f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
         </f:if>
         <div class="relative container grid grid-cols-2 gap-8" data-rte-content>
             <div class="col-span-2 md:col-span-1">
@@ -22,7 +22,7 @@
                     </f:if>
                     <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
                        rel="nofollow"
-                       class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
+                       class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary uch:bg-uch-secondary flex items-center space-x-2">
                         <svg class="w-10 h-10 text-white">
                             <use href="#icon-phone"></use>
                         </svg>
@@ -60,7 +60,7 @@
             </div>
         </div>
         <f:if condition="{settings.themeKey} == 'ep'">
-            <f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block sbw:md:hidden transform translate-y-2 text-white'}"/>
+            <f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
         </f:if>
     </div>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
index 3ba8b0dd..004b3f2a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
@@ -23,7 +23,7 @@
                     </f:if>
                     <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
                        rel="nofollow"
-                       class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
+                       class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary uch:bg-uch-secondary flex items-center space-x-2">
                         <svg class="w-10 h-10 text-white">
                             <use href="#icon-phone"></use>
                         </svg>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
index e669dc5f..6d86a835 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html
@@ -6,7 +6,7 @@
                 property="{element.identifier}"
                 id="{element.uniqueIdentifier}"
                 value="{element.properties.value}"
-                class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary h-6 w-6"
+                class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-6 w-6"
                 additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
             />
             <span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
diff --git a/tailwind.config.js b/tailwind.config.js
index dc2c16a1..624aaafb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,7 @@ module.exports = {
                     'secondary': '#ee525a',
                     'primary-dark': '#c7a20c',
                     'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
+                    'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
                     'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                     'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
                 },
@@ -81,8 +82,11 @@ module.exports = {
                 'uch': {
                     'primary': '#b5e400',
                     'secondary': '#19a3dc',
+                    'primary-dark': '#b5e400',
                     'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
+                    'primary-50': tinycolor('#b5e400').setAlpha(0.5).toRgbString(),
                     'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
+                    'overlay-secondary': tinycolor('#b5e400').setAlpha(0.55).toRgbString(),
                 },
             },
             height: {