Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-31 09:01:20 -05:00
Code Issues Activity

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

Browse source 
New UI Polishing
This commit is contained in:
Eva Marco 2023-11-15 14:16:56 +01:00 • committed by GitHub
commit fe1a433440
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 82 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
common/src/app/common/colors.cljc
View file

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

1
common/test/common_tests/colors_test.cljc
View file

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

83
frontend/resources/styles/common/refactor/basic-rules.scss
View file

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

1
frontend/resources/styles/common/refactor/common-refactor.scss
View file

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

8
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -17,11 +17,11 @@
// 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-background-color-disabled: var(--color-foreground-disabled);
--button-border-color-disabled: var(--color-background-quaternary);
--button-primary-background-color-rest: var(--color-accent-primary);

50
frontend/resources/styles/common/refactor/focus.scss Normal file
View file

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

23
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -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?)
(not multiple-colors?)
(not library-color?))
(when opacity?
[: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)

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

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