From 89a09091dbb8b6759a7f67a912ff839d1cae19c5 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 14 Nov 2023 12:45:31 +0100
Subject: [PATCH 1/5] :bug: Fix problem with focus styles

---
 .../styles/common/refactor/basic-rules.scss   | 83 ++-----------------
 .../common/refactor/common-refactor.scss      |  1 +
 .../styles/common/refactor/design-tokens.scss |  6 +-
 .../styles/common/refactor/focus.scss         | 50 +++++++++++
 4 files changed, 63 insertions(+), 77 deletions(-)
 create mode 100644 frontend/resources/styles/common/refactor/focus.scss

diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 8c84e486a..192206232 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -37,6 +37,7 @@
 .button-primary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusPrimary;
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
   color: var(--button-primary-foreground-color-rest);
@@ -54,17 +55,6 @@
       stroke: var(--button-primary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--button-primary-background-color-focus);
-    border: $s-1 solid var(--button-primary-border-color-focus);
-    color: var(--button-primary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-primary-foreground-color-focus);
-    }
-  }
   &:active {
     background-color: var(--button-primary-background-color-active);
     border: $s-1 solid var(--button-primary-border-color-active);
@@ -86,6 +76,7 @@
 .button-secondary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusSecondary;
   border-radius: $br-8;
   background-color: var(--button-secondary-background-color-rest);
   border: $s-1 solid var(--button-secondary-border-color-rest);
@@ -104,17 +95,6 @@
       stroke: var(--button-secondary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--button-secondary-background-color-focus);
-    border: $s-1 solid var(--button-secondary-border-color-focus);
-    color: var(--button-secondary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-secondary-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     background-color: var(--button-secondary-background-color-active);
@@ -136,6 +116,7 @@
 .button-tertiary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusTertiary;
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
@@ -153,17 +134,6 @@
       stroke: var(--button-tertiary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: $s-1 solid var(--button-tertiary-border-color-focus);
-    background-color: var(--button-tertiary-background-color-focus);
-    color: var(--button-tertiary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-tertiary-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     border: $s-1 solid transparent;
@@ -185,6 +155,7 @@
 .button-radio {
   @include buttonStyle;
   @include flexCenter;
+  @include focusRadio;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
   border: $s-1 solid var(--button-radio-background-color-rest);
@@ -201,17 +172,6 @@
       stroke: var(--button-radio-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: $s-1 solid var(--button-radio-border-color-focus);
-    background-color: var(--button-radio-background-color-focus);
-    color: var(--button-radio-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-radio-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     border: $s-1 solid transparent;
@@ -244,27 +204,16 @@
 .button-tag {
   @include buttonStyle;
   @include flexCenter;
+  @include focus;
   &:hover {
     svg {
       stroke: var(--title-foreground-color-hover);
     }
   }
-  &:focus {
-    outline: none;
-    border: 1px solid var(--button-border-focus);
-    background-color: var(--button-background-focus);
-    svg {
-      stroke: var(--button-foreground-focus);
-    }
-  }
   &:active {
     border: none;
     background-color: transparent;
   }
-  &:focus-visible {
-    border: none;
-    outline: none;
-  }
 }
 
 .button-icon {
@@ -291,8 +240,7 @@
   background-color: var(--button-constraint-background-color-rest);
   padding: 0;
   margin: 0;
-  &:hover,
-  &:focus {
+  &:hover {
     outline: $s-4 solid var(--button-constraint-border-color-hover);
     background-color: var(--button-constraint-background-color-hover);
   }
@@ -304,6 +252,7 @@
   @include removeInputStyle;
   @include titleTipography;
   @include textEllipsis;
+  // @include focusInput;
   height: $s-28;
   width: 100%;
   flex-grow: 1;
@@ -311,11 +260,6 @@
   padding: 0 0 0 $s-6;
   border-radius: $br-8;
   color: var(--input-foreground-color-active);
-  &:focus-within,
-  &:active {
-    color: var(--input-foreground-color-active);
-    background-color: var(--input-background-color-active);
-  }
   &[disabled] {
     opacity: 0.5;
     pointer-events: none;
@@ -342,6 +286,7 @@
 
 .input-element {
   @include titleTipography;
+  @include focusInput;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -373,15 +318,6 @@
     }
     background-color: var(--input-background-color-hover);
   }
-
-  &:focus-within,
-  &:active {
-    input {
-      color: var(--input-foreground-color-active);
-    }
-    background-color: var(--input-background-color-active);
-    border: $s-1 solid var(--input-border-color-active);
-  }
 }
 
 .disabled-input {
@@ -459,8 +395,7 @@
   padding: $s-8 $s-12;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color-hover);
-  &:hover,
-  &:focus-within {
+  &:hover {
     background-color: var(--assets-item-background-color-hover);
     color: var(--assets-item-name-foreground-color-hover);
   }
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index c2297c66b..2793e6f16 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -15,4 +15,5 @@
 @import "common/refactor/shadows.scss";
 @import "common/refactor/z-index.scss";
 @import "common/refactor/mixins.scss";
+@import "common/refactor/focus.scss";
 @import "common/refactor/basic-rules.scss";
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index db7638b9f..de67c5107 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -17,9 +17,9 @@
   // BUTTONS
 
   --button-foreground-hover: var(--color-accent-primary);
-  --button-background-focus: var(--color-background-secondary);
-  --button-foreground-focus: var(--color-foreground-primary);
-  --button-border-focus: var(--color-accent-primary);
+  --button-background-color-focus: var(--color-background-secondary);
+  --button-foreground-color-focus: var(--color-foreground-primary);
+  --button-border-color-focus: var(--color-accent-primary);
   --button-foreground-color-disabled: var(--color-foreground-secondary);
   --button-background-color-disabled: var(--color-background-primary);
   --button-border-color-disabled: var(--color-background-quaternary);
diff --git a/frontend/resources/styles/common/refactor/focus.scss b/frontend/resources/styles/common/refactor/focus.scss
new file mode 100644
index 000000000..8efdeebd5
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/focus.scss
@@ -0,0 +1,50 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@mixin focusType($type) {
+  $realType: "";
+  @if $type {
+    $realType: $type + "-";
+  }
+  &:focus-visible {
+    outline: none;
+    background-color: var(--button-#{$realType}background-color-focus);
+    border: $s-1 solid var(--button-#{$realType}border-color-focus);
+    color: var(--button-#{$realType}foreground-color-focus);
+    svg,
+    span svg {
+      stroke: var(--button-#{$realType}foreground-color-focus);
+    }
+  }
+}
+
+@mixin focusPrimary {
+  @include focusType(primary);
+}
+
+@mixin focusSecondary {
+  @include focusType(secondary);
+}
+
+@mixin focusTertiary {
+  @include focusType(tertiary);
+}
+
+@mixin focusRadio {
+  @include focusType(radio);
+}
+
+@mixin focus {
+  @include focusType(null);
+}
+
+@mixin focusInput {
+  &:focus-within {
+    color: var(--input-foreground-color-active);
+    background-color: var(--input-background-color-active);
+    border: $s-1 solid var(--input-border-color-active);
+  }
+}

From 78332257aa5e5da8c599978c99545378487b2499 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 14 Nov 2023 16:32:13 +0100
Subject: [PATCH 2/5] :bug: Fix problem with color inputs

---
 common/src/app/common/colors.cljc         | 5 +++--
 common/test/common_tests/colors_test.cljc | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc
index 101eecb98..7274b78a4 100644
--- a/common/src/app/common/colors.cljc
+++ b/common/src/app/common/colors.cljc
@@ -183,7 +183,7 @@
    "yellowgreen" "#9acd32"})
 
 (def ^:private hex-color-re
-  #"\#[0-9a-fA-F]{3,6}")
+  #"\#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})")
 
 (def ^:private rgb-color-re
   #"(?:|rgb)\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)")
@@ -431,7 +431,8 @@
 (defn parse
   [color]
   (when (string? color)
-    (if (valid-hex-color? color)
+    (if (or (valid-hex-color? color)
+            (valid-hex-color? (dm/str "#" color)))
       (normalize-hex color)
       (or (some-> (parse-rgb color) (rgb->hex))
           (get names (str/lower color))))))
diff --git a/common/test/common_tests/colors_test.cljc b/common/test/common_tests/colors_test.cljc
index 277cf158c..a37e481fe 100644
--- a/common/test/common_tests/colors_test.cljc
+++ b/common/test/common_tests/colors_test.cljc
@@ -17,6 +17,7 @@
   (t/is (false? (colors/valid-hex-color? "#")))
   (t/is (false? (colors/valid-hex-color? "#qqqqqq")))
   (t/is (true? (colors/valid-hex-color? "#aaa")))
+  (t/is (false? (colors/valid-hex-color? "#aaaa")))
   (t/is (true? (colors/valid-hex-color? "#fabada")))
   )
 

From 6c003a4f24ec7f33d5419972eef2a592850b0d04 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 14 Nov 2023 16:45:25 +0100
Subject: [PATCH 3/5] :bug: Fix rounded corners on canvas color

---
 .../sidebar/options/rows/color_row.cljs       | 21 ++++++++-----------
 .../sidebar/options/rows/color_row.scss       |  3 +++
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 09d22f7ed..225cb1dfc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -68,6 +68,12 @@
         editing-text*  (mf/use-state false)
         editing-text?  (deref editing-text*)
 
+        opacity?
+        (and (not gradient-color?)
+             (not multiple-colors?)
+             (not library-color?)
+             (not disable-opacity))
+
         on-focus
         (mf/use-fn
          (mf/deps on-focus)
@@ -187,6 +193,7 @@
              :ref dref}
        [:span {:class (stl/css :color-info)}
         [:span {:class (stl/css-case :color-name-wrapper true
+                                     :no-opacity (not opacity?)
                                      :library-name-wrapper library-color?
                                      :editing editing-text?
                                      :gradient-name-wrapper gradient-color?)}
@@ -238,10 +245,7 @@
                              :on-blur on-blur
                              :on-change handle-value-change}]])]
 
-        (when (and (not gradient-color?)
-                   (not multiple-colors?)
-                   (not library-color?))
-
+        (when opacity?
           [:div {:class (stl/css :opacity-element-wrapper)}
            [:span {:class (stl/css :icon-text)}
             "%"]
@@ -263,14 +267,7 @@
                    :on-click handle-select}
           i/move-refactor])]
 
-
-
-
-
-
-
-
-
+      ;; OLD CSS
       [:div.row-flex.color-data {:title title
                                  :class (dom/classnames
                                          :dnd-over-top (= (:over dprops) :top)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index 1af2b9683..0eb3e1a8f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -24,6 +24,9 @@
       border-radius: $br-8 0 0 $br-8;
       padding: 0;
       margin-right: 0;
+      &.no-opacity {
+        border-radius: $br-8;
+      }
       .color-bullet-wrapper {
         height: $s-28;
         padding: 0 $s-2 0 $s-8;

From e1bbf9676697a23b3da5535cd18879f07ed43d77 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 14 Nov 2023 17:35:37 +0100
Subject: [PATCH 4/5] :bug: Fix problem with placeholder in opacity field

---
 .../app/main/ui/workspace/sidebar/options/rows/color_row.cljs   | 2 +-
 .../app/main/ui/workspace/sidebar/options/rows/color_row.scss   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 225cb1dfc..2147b59fe 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -251,7 +251,7 @@
             "%"]
            [:> numeric-input* {:value (-> color :opacity opacity->string)
                                :className (stl/css :opacity-input)
-                               :placeholder (tr "settings.multiple")
+                               :placeholder "--"
                                :select-on-focus select-on-focus
                                :on-focus on-focus
                                :on-blur on-blur
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index 0eb3e1a8f..6eeadc248 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -118,6 +118,7 @@
       width: $s-60;
       border-radius: 0 $br-8 $br-8 0;
       .opacity-input {
+        padding: 0;
         border-radius: 0 $br-8 $br-8 0;
         min-width: $s-28;
       }

From 1f611dd81a2b90f0115f0b58b3ef82650929c8a5 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 14 Nov 2023 17:35:48 +0100
Subject: [PATCH 5/5] :bug: Fix disabled icons colors

---
 frontend/resources/styles/common/refactor/design-tokens.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index de67c5107..829364a1f 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -21,7 +21,7 @@
   --button-foreground-color-focus: var(--color-foreground-primary);
   --button-border-color-focus: var(--color-accent-primary);
   --button-foreground-color-disabled: var(--color-foreground-secondary);
-  --button-background-color-disabled: var(--color-background-primary);
+  --button-background-color-disabled: var(--color-foreground-disabled);
   --button-border-color-disabled: var(--color-background-quaternary);
 
   --button-primary-background-color-rest: var(--color-accent-primary);