Merge pull request #3800 from penpot/alotor-ui-polish

New UI Polishing

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))))))

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")))
   )
 

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,
+  &:hover {
-  &:focus {
     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,
+  &:hover {
-  &:focus-within {
     background-color: var(--assets-item-background-color-hover);
     color: var(--assets-item-name-foreground-color-hover);
   }

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";

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -17,11 +17,11 @@
   // BUTTONS
 
   --button-foreground-hover: var(--color-accent-primary);
-  --button-background-focus: var(--color-background-secondary);
+  --button-background-color-focus: var(--color-background-secondary);
-  --button-foreground-focus: var(--color-foreground-primary);
+  --button-foreground-color-focus: var(--color-foreground-primary);
-  --button-border-focus: var(--color-accent-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);

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);
+  }
+}

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,16 +245,13 @@
                              :on-blur on-blur
                              :on-change handle-value-change}]])]
 
-        (when (and (not gradient-color?)
+        (when opacity?
-                   (not multiple-colors?)
-                   (not library-color?))
-
           [:div {:class (stl/css :opacity-element-wrapper)}
            [:span {:class (stl/css :icon-text)}
             "%"]
            [:> 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
@@ -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)

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;
@@ -115,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;
       }