From c6088d247938a4ec52a4e8ee9847b6bf7a26d277 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 28 Oct 2021 17:24:22 +0200
Subject: [PATCH] Make concept colors transparent

---
 .../Private/Partials/Product/Teaser.html      |  2 +-
 tailwind.config.js                            | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 74da2d26..4cf06886 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -19,7 +19,7 @@
                      alt="{product.name}"
                      width="640" height="480" />
             </a>
-            <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}', else: 'bg-ep-primary-80')}">
+            <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-80', else: 'bg-ep-primary-80')}">
                 <div class="flex items-center space-x-2">
                     <f:if condition="{country.code}">
                         <svg class="product-teaser__flag">
diff --git a/tailwind.config.js b/tailwind.config.js
index b7dfce46..3dc5a766 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,17 +14,17 @@ module.exports = {
         safelist: [
             'bg-header-season-w',
             'bg-header-season-s',
-            'bg-concept-bdg',
-            'bg-concept-skr',
-            'bg-concept-evt',
-            'bg-concept-fam',
-            'bg-concept-grp',
-            'bg-concept-prg',
-            'bg-concept-ind',
-            'bg-concept-wkd',
-            'bg-concept-spz',
-            'bg-concept-epe',
-            'bg-concept-sfl',
+            'bg-concept-bdg', 'bg-concept-bdg-80',
+            'bg-concept-skr', 'bg-concept-skr-80',
+            'bg-concept-evt', 'bg-concept-evt-80',
+            'bg-concept-fam', 'bg-concept-fam-80',
+            'bg-concept-grp', 'bg-concept-grp-80',
+            'bg-concept-prg', 'bg-concept-prg-80',
+            'bg-concept-ind', 'bg-concept-ind-80',
+            'bg-concept-wkd', 'bg-concept-wkd-80',
+            'bg-concept-spz', 'bg-concept-spz-80',
+            'bg-concept-epe', 'bg-concept-epe-8ß',
+            'bg-concept-sfl', 'bg-concept-sfl-80',
             /^flatpickr-.*/,
         ],
     },
@@ -56,14 +56,20 @@ module.exports = {
                     bdg: '#3d8ccb',
                     skr: '#3d8ccb',
                     evt: '#ed5454',
+                    'evt-80': tinycolor('#ed5454').setAlpha(0.80).toRgbString(),
                     fam: '#7ca7d5',
+                    'fam-80': tinycolor('#7ca7d5').setAlpha(0.80).toRgbString(),
                     grp: '#ffa300',
                     prg: '#3d8ccb',
+                    'prg-80': tinycolor('#3d8ccb').setAlpha(0.80).toRgbString(),
                     ind: '#009fe3',
+                    'ind-80': tinycolor('#009fe3').setAlpha(0.80).toRgbString(),
                     wkd: '#44d04e',
+                    'wkd-80': tinycolor('#44d04e').setAlpha(0.80).toRgbString(),
                     spz: '#436a8a',
                     epe: '#436a8a',
                     sfl: '#999',
+                    'sfl-80': tinycolor('#999999').setAlpha(0.80).toRgbString(),
                 },
                 ep: {
                     primary: '#3d8ccb',