From 932eeae2c132180a9d2d8ee9ca5314436cc1c008 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Tue, 5 Apr 2022 11:55:11 +0200
Subject: [PATCH 1/3] IBX-2653: Introduce colorful ibexa-tag and
 ibexa-tag-view-select

---
 .../Resources/public/scss/_page-title.scss    |  9 +--
 .../public/scss/_tag-view-select.scss         | 74 +++++++++++++------
 src/bundle/Resources/public/scss/_tag.scss    | 48 +++++++++---
 .../themes/admin/ui/page_title.html.twig      |  5 +-
 .../themes/admin/ui/search_tag.html.twig      |  8 +-
 .../views/themes/admin/ui/tag.html.twig       |  6 +-
 6 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_page-title.scss b/src/bundle/Resources/public/scss/_page-title.scss
index 3cd7abf411..7ca678a94c 100644
--- a/src/bundle/Resources/public/scss/_page-title.scss
+++ b/src/bundle/Resources/public/scss/_page-title.scss
@@ -15,14 +15,7 @@
         display: flex;
     }
 
-    .ibexa-tag {
-        max-height: calculateRem(28px);
+    .ibexa-badge {
         margin-left: calculateRem(8px);
-        padding: calculateRem(2px) calculateRem(12px);
-
-        &__content {
-            font-weight: normal;
-            font-size: $ibexa-text-font-size-medium;
-        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss
index c396ac302e..a7061909a1 100644
--- a/src/bundle/Resources/public/scss/_tag-view-select.scss
+++ b/src/bundle/Resources/public/scss/_tag-view-select.scss
@@ -4,8 +4,6 @@
     padding: calculateRem(24px);
 
     &__info {
-        @include ibexa-font-sans-serif();
-
         font-size: $ibexa-text-font-size-medium;
         color: $ibexa-color-black;
         white-space: nowrap;
@@ -23,13 +21,15 @@
     &__selected-item-tag {
         display: inline-flex;
         align-items: center;
-        height: calculateRem(24px);
         max-width: 100%;
-        padding: 0 calculateRem(8px);
-        border-radius: $ibexa-border-radius;
-        background-color: $ibexa-color-light-400;
+        height: calculateRem(24px);
+        padding: calculateRem(4px) calculateRem(10px);
         font-size: $ibexa-text-font-size-small;
-        line-height: calculateRem(18px);
+        line-height: calculateRem(16px);
+        font-weight: normal;
+        border: calculateRem(1px) solid $ibexa-color-dark;
+        border-radius: calculateRem(12px);
+        background-color: $ibexa-color-light-400;
         margin-top: calculateRem(5px);
         margin-bottom: calculateRem(5px);
 
@@ -67,25 +67,63 @@
         text-overflow: ellipsis;
         color: transparent;
 
-        &--start {
-            width: 100%;
-
+        &--start,
+        &--end {
             .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
                 color: $ibexa-color-black;
             }
         }
 
+        &--start {
+            width: 100%;
+        }
+
         &--end {
             width: 0;
             direction: rtl;
             text-align: right;
+        }
+    }
 
-            .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
-                color: $ibexa-color-black;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
+        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+
+    @mixin color-tags($color-text, $color-border, $color-background) {
+        .ibexa-tag-view-select {
+            &__selected-item-tag {
+                border-color: $color-border;
+                background-color: $color-background;
+
+                .ibexa-icon {
+                    fill: $color-text;
+                }
+            }
+
+            &__selected-item-tag-ellipsize {
+                color: $color-text;
+            }
+
+            &__selected-item-tag-content {
+                &--start,
+                &--end {
+                    .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
+                        color: $color-text;
+                    }
+                }
             }
         }
     }
 
+    @each $name, $color-text, $color-border, $color-background in $color-versions {
+        &--#{$name} {
+            @include color-tags($color-text, $color-border, $color-background);
+        }
+    }
+
     &__selected-item-tag-remove-btn {
         padding: 0;
         margin-left: calculateRem(12px);
@@ -96,16 +134,6 @@
     &[disabled] {
         border-color: $ibexa-color-light;
 
-        .ibexa-tag-view-select {
-            &__info {
-                color: $ibexa-color-dark-300;
-            }
-
-            &__selected_item {
-                color: $ibexa-color-dark-400;
-                fill: $ibexa-color-dark-400;
-                background-color: $ibexa-color-light-300;
-            }
-        }
+        @include color-tags($ibexa-color-dark-400, $ibexa-color-light, $ibexa-color-light-300);
     }
 }
diff --git a/src/bundle/Resources/public/scss/_tag.scss b/src/bundle/Resources/public/scss/_tag.scss
index 8ab2f86bb1..f6a06f18a3 100644
--- a/src/bundle/Resources/public/scss/_tag.scss
+++ b/src/bundle/Resources/public/scss/_tag.scss
@@ -1,32 +1,62 @@
 .ibexa-tag {
-    border-radius: calculateRem(18px);
-    background: $ibexa-color-light-300;
-    font-size: $ibexa-text-font-size-small;
-    padding: calculateRem(2px) calculateRem(28px) calculateRem(2px) calculateRem(8px);
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     position: relative;
+    height: calculateRem(24px);
+    padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
+    border: calculateRem(1px) solid $ibexa-color-dark;
+    border-radius: calculateRem(12px);
+    background-color: $ibexa-color-light-400;
 
     &__content {
-        line-height: calculateRem(22px);
+        font-size: $ibexa-text-font-size-small;
+        font-weight: normal;
     }
 
     &__spinner {
         height: calculateRem(22px);
         line-height: 0;
+
+        .ibexa-icon {
+            fill: $ibexa-color-dark;
+        }
     }
 
     &__remove-btn {
         position: absolute;
-        top: calc(50% - #{calculateRem(8px)});
-        right: calculateRem(6px);
+        right: calculateRem(8px);
         cursor: pointer;
         border: 0;
         padding: 0;
         outline: none;
         line-height: 0;
 
-        &:disabled {
+        &:disabled,
+        &[disabled] {
             cursor: not-allowed;
         }
     }
+
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
+        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+
+    @each $name, $color-text, $color-border, $color-background in $color-versions {
+        &--#{$name} {
+            color: $color-text;
+            border-color: $color-border;
+            background-color: $color-background;
+
+            .ibexa-tag {
+                &__remove-btn,
+                &__spinner,
+                .ibexa-icon {
+                    fill: $color-text;
+                }
+            }
+        }
+    }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
index d7a8fd018e..eaa6af0c74 100644
--- a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
@@ -3,9 +3,10 @@
         <div class="ibexa-page-title__top">
             <h1 class="ibexa-page-title__title">
                 {{ title }}
+                {% set tag = 'asdf' %}
                 {% if tag is defined %}
-                    <div class="ibexa-tag">
-                        <div class="ibexa-tag__content">{{ tag }}</div>
+                    <div class="ibexa-badge">
+                        {{ tag }}
                     </div>
                 {% endif %}
             </h1>
diff --git a/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig
index 73ce5d8eed..a762e503a2 100644
--- a/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig
@@ -7,13 +7,13 @@
     <div class="ibexa-tag__content">
         {{ content }}
     </div>
-    <button 
-        type="button" 
+    <button
+        type="button"
         class="ibexa-tag__remove-btn {{ btn_class }}"
         data-target-selector="{{ target_selector }}"
     >
-        <svg class="ibexa-icon ibexa-icon--small">
-            <use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
+        <svg class="ibexa-icon ibexa-icon--tiny">
+            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
         </svg>
     </button>
 </div>
diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
index 7747dc0a90..ae204a657d 100644
--- a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
@@ -7,13 +7,13 @@
         {{ content }}
     </div>
     <div class="ibexa-tag__spinner" {% if not is_loading_state %} hidden {% endif %}>
-        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--dark ibexa-spin">
+        <svg class="ibexa-icon ibexa-icon--small ibexa-spin">
             <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
         </svg>
     </div>
     <button type="button" class="ibexa-tag__remove-btn">
-        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--dark">
-            <use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
+        <svg class="ibexa-icon ibexa-icon--tiny">
+            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
         </svg>
     </button>
 </div>

From a23bc53a9ad7e3b639955851ae7fa74799ddc91b Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Mon, 25 Apr 2022 15:39:38 +0200
Subject: [PATCH 2/3] updates

---
 .../public/scss/_tag-view-select.scss         | 26 ++++++++-----------
 src/bundle/Resources/public/scss/_tag.scss    | 18 ++++++-------
 .../themes/admin/ui/page_title.html.twig      |  1 -
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss
index a7061909a1..0733936bb8 100644
--- a/src/bundle/Resources/public/scss/_tag-view-select.scss
+++ b/src/bundle/Resources/public/scss/_tag-view-select.scss
@@ -27,9 +27,8 @@
         font-size: $ibexa-text-font-size-small;
         line-height: calculateRem(16px);
         font-weight: normal;
-        border: calculateRem(1px) solid $ibexa-color-dark;
         border-radius: calculateRem(12px);
-        background-color: $ibexa-color-light-400;
+        background-color: $ibexa-color-light-500;
         margin-top: calculateRem(5px);
         margin-bottom: calculateRem(5px);
 
@@ -85,17 +84,16 @@
         }
     }
 
-    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
-        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
-        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
-        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
-        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
-        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-light-500,
+        'info' $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
 
-    @mixin color-tags($color-text, $color-border, $color-background) {
+    @mixin colorful-tags($color-text, $color-background) {
         .ibexa-tag-view-select {
             &__selected-item-tag {
-                border-color: $color-border;
                 background-color: $color-background;
 
                 .ibexa-icon {
@@ -118,9 +116,9 @@
         }
     }
 
-    @each $name, $color-text, $color-border, $color-background in $color-versions {
+    @each $name, $color-text, $color-background in $color-versions {
         &--#{$name} {
-            @include color-tags($color-text, $color-border, $color-background);
+            @include colorful-tags($color-text, $color-background);
         }
     }
 
@@ -132,8 +130,6 @@
 
     &:disabled,
     &[disabled] {
-        border-color: $ibexa-color-light;
-
-        @include color-tags($ibexa-color-dark-400, $ibexa-color-light, $ibexa-color-light-300);
+        @include colorful-tags($ibexa-color-dark-400, $ibexa-color-light-300);
     }
 }
diff --git a/src/bundle/Resources/public/scss/_tag.scss b/src/bundle/Resources/public/scss/_tag.scss
index f6a06f18a3..2759955444 100644
--- a/src/bundle/Resources/public/scss/_tag.scss
+++ b/src/bundle/Resources/public/scss/_tag.scss
@@ -4,9 +4,8 @@
     position: relative;
     height: calculateRem(24px);
     padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
-    border: calculateRem(1px) solid $ibexa-color-dark;
     border-radius: calculateRem(12px);
-    background-color: $ibexa-color-light-400;
+    background-color: $ibexa-color-light-500;
 
     &__content {
         font-size: $ibexa-text-font-size-small;
@@ -37,17 +36,16 @@
         }
     }
 
-    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
-        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
-        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
-        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
-        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
-        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-light-500,
+        'info' $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
 
-    @each $name, $color-text, $color-border, $color-background in $color-versions {
+    @each $name, $color-text, $color-background in $color-versions {
         &--#{$name} {
             color: $color-text;
-            border-color: $color-border;
             background-color: $color-background;
 
             .ibexa-tag {
diff --git a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
index eaa6af0c74..0c4fcfba62 100644
--- a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
@@ -3,7 +3,6 @@
         <div class="ibexa-page-title__top">
             <h1 class="ibexa-page-title__title">
                 {{ title }}
-                {% set tag = 'asdf' %}
                 {% if tag is defined %}
                     <div class="ibexa-badge">
                         {{ tag }}

From a456a4a13ff2601d5872f1cf2d1a305f2fcb6e29 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Wed, 11 May 2022 14:48:57 +0200
Subject: [PATCH 3/3] prettier fixes

---
 src/bundle/Resources/public/scss/_main-menu.scss       | 4 ++--
 src/bundle/Resources/public/scss/_popup-menu.scss      | 4 ++--
 src/bundle/Resources/public/scss/_tag-view-select.scss | 9 +++------
 src/bundle/Resources/public/scss/_tag.scss             | 9 +++------
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss
index a49ffef859..964b5d93d2 100644
--- a/src/bundle/Resources/public/scss/_main-menu.scss
+++ b/src/bundle/Resources/public/scss/_main-menu.scss
@@ -42,12 +42,12 @@
                     &--selected {
                         color: $ibexa-color-info;
                         background-color: $ibexa-color-info-800;
-            
+
                         .ibexa-main-menu {
                             &__item-icon {
                                 fill: $ibexa-color-info;
                             }
-            
+
                             &__item-text-column {
                                 color: $ibexa-color-info;
                             }
diff --git a/src/bundle/Resources/public/scss/_popup-menu.scss b/src/bundle/Resources/public/scss/_popup-menu.scss
index 306809c790..49d5daa098 100644
--- a/src/bundle/Resources/public/scss/_popup-menu.scss
+++ b/src/bundle/Resources/public/scss/_popup-menu.scss
@@ -33,7 +33,7 @@
             border-top: calculateRem(1px) solid $ibexa-color-info-800;
 
             .ibexa-popup-menu__items-list {
-                padding-left: calculateRem(6px)
+                padding-left: calculateRem(6px);
             }
         }
 
@@ -99,7 +99,7 @@
 
             &--group-name {
                 color: $ibexa-color-light-700;
-    
+
                 &:hover {
                     background-color: initial;
                     color: $ibexa-color-light-700;
diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss
index 0733936bb8..8e2114487a 100644
--- a/src/bundle/Resources/public/scss/_tag-view-select.scss
+++ b/src/bundle/Resources/public/scss/_tag-view-select.scss
@@ -84,12 +84,9 @@
         }
     }
 
-    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200,
-        'secondary' $ibexa-color-dark $ibexa-color-light-500,
-        'info' $ibexa-color-info $ibexa-color-info-200,
-        'danger' $ibexa-color-danger $ibexa-color-danger-200,
-        'success' $ibexa-color-success $ibexa-color-success-200,
-        'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200, 'secondary' $ibexa-color-dark $ibexa-color-light-500,
+        'info' $ibexa-color-info $ibexa-color-info-200, 'danger' $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success $ibexa-color-success-200, 'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
 
     @mixin colorful-tags($color-text, $color-background) {
         .ibexa-tag-view-select {
diff --git a/src/bundle/Resources/public/scss/_tag.scss b/src/bundle/Resources/public/scss/_tag.scss
index 2759955444..f443badda3 100644
--- a/src/bundle/Resources/public/scss/_tag.scss
+++ b/src/bundle/Resources/public/scss/_tag.scss
@@ -36,12 +36,9 @@
         }
     }
 
-    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200,
-        'secondary' $ibexa-color-dark $ibexa-color-light-500,
-        'info' $ibexa-color-info $ibexa-color-info-200,
-        'danger' $ibexa-color-danger $ibexa-color-danger-200,
-        'success' $ibexa-color-success $ibexa-color-success-200,
-        'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200, 'secondary' $ibexa-color-dark $ibexa-color-light-500,
+        'info' $ibexa-color-info $ibexa-color-info-200, 'danger' $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success $ibexa-color-success-200, 'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
 
     @each $name, $color-text, $color-background in $color-versions {
         &--#{$name} {