3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-01 12:21:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix some text and background colors

Browse source
This commit is contained in:
Eva 2023-12-29 12:36:26 +01:00 • committed by Alonso Torres
parent 7d2da6ef80
commit 74aaa710bf
11 changed files with 284 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/base.scss
View file

@ -19,7 +19,7 @@ body {
overflow: hidden;
background-color: red; //debugger colors
color: #fabada; //debugger colors
color: yellow; //debugger colors
}
#app {

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

@ -34,3 +34,7 @@ $da-primary: var(--color-accent-primary);
$da-primary-muted: var(--color-accent-primary-muted);
$da-secondary: var(--color-accent-secondary);
$da-tertiary: var(--color-accent-tertiary);
#app {
background-color: var(--app-background);
}

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

@ -13,6 +13,8 @@
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--app-background: var(--color-background-primary);
--loader-background: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
--presence-color: var(--default-presence-color);

51
frontend/src/app/main/ui/export.cljs
View file

@ -15,7 +15,6 @@
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
[app.util.dom :as dom]
@ -86,11 +85,13 @@
[:span {:class (stl/css :checkbox-wrapper)}
(cond
all-checked? [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)} i/tick-refactor]
:global/checked true)}
i/tick-refactor]
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}]
:else [:span {:class (stl/css-case :checkobox-tick true
:global/intermediate true)} i/remove-refactor])]]
:global/intermediate true)}
i/remove-refactor])]]
[:div {:class (stl/css :selection-title)}
(tr "dashboard.export-multiple.selected"
(c (count enabled-exports))
@ -108,7 +109,8 @@
[:span {:class (stl/css :checkbox-wrapper)}
(if (:enabled export)
[:span {:class (stl/css-case :checkobox-tick true
:global/checked true)} i/tick-refactor]
:global/checked true)}
i/tick-refactor]
[:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}])]
@ -128,7 +130,8 @@
[:& shape-wrapper {:shape shape}]])]
[:div {:class (stl/css :selection-name)} (cond-> (:name shape) suffix (str suffix))]
[:div {:class (stl/css :selection-name)}
(cond-> (:name shape) suffix (str suffix))]
(when (:scale export)
[:div {:class (stl/css :selection-scale)}
(dm/str (ust/format-precision (* width (:scale export)) 2) "px"
@ -143,8 +146,7 @@
(when (> (count all-exports) 0)
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
[:input
{:class (stl/css :cancel-button)
[:input {:class (stl/css :cancel-button)
:type "button"
:value (tr "labels.cancel")
:on-click cancel-fn}]
@ -160,7 +162,8 @@
(mf/defc shapes-no-selection []
[:div {:class (stl/css :no-selection)}
[:p {:class (stl/css :modal-msg)} (tr "dashboard.export-shapes.no-elements")]
[:p {:class (stl/css :modal-msg)}
(tr "dashboard.export-shapes.no-elements")]
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export-shapes.how-to")]
[:a {:target "_blank"
:class (stl/css :modal-link)
@ -191,8 +194,7 @@
(mf/defc export-progress-widget
{::mf/wrap [mf/memo]}
[]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state (mf/deref refs/export)
(let [state (mf/deref refs/export)
error? (:error state)
healthy? (:healthy? state)
detail-visible? (:detail-visible state)
@ -207,15 +209,10 @@
pwidth (if error?
280
(/ (* progress 280) total))
color (if new-css-system
(cond
error? clr/new-danger
healthy? clr/new-primary
(not healthy?) clr/new-warning)
(cond
error? clr/danger
healthy? clr/primary
(not healthy?) clr/warning))
color (cond
error? clr/new-danger
healthy? clr/new-primary
(not healthy?) clr/new-warning)
title (cond
error? (tr "workspace.options.exporting-object-error")
complete? (tr "workspace.options.exporting-complete")
@ -228,7 +225,7 @@
toggle-detail-visibility
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
[*
[:*
(when widget-visible?
[:div {:class (stl/css :export-progress-widget)
:on-click toggle-detail-visibility}
@ -250,7 +247,6 @@
:transform "rotate(-90 16,16)"
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
(when detail-visible?
[:div {:class (stl/css :export-progress-modal-overlay)}
[:div {:class (stl/css :export-progress-modal-container)}
@ -260,14 +256,19 @@
title]
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export} (tr "workspace.options.retry")]
[:p {:class (stl/css :progress)} (dm/str progress " / " total)])]
:on-click retry-last-export}
(tr "workspace.options.retry")]
[:p {:class (stl/css :progress)}
(dm/str progress " / " total)])]
[:button {:class (stl/css :modal-close-button)
:on-click toggle-detail-visibility} i/close-refactor]]
:on-click toggle-detail-visibility}
i/close-refactor]]
[:svg {:class (stl/css :progress-bar)
:height 5 :width 280}
:height 5
:width 280}
[:g
[:path {:d "M0 0 L280 0"
:stroke clr/black

1
frontend/src/app/main/ui/workspace.scss
View file

@ -34,6 +34,7 @@
justify-content: center;
align-items: center;
grid-area: viewport;
background-color: var(--loader-background);
:global(svg#loader-pencil) {
fill: var(--icon-foreground);
}

23
frontend/src/app/main/ui/workspace/color_palette.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.color-palette
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.data.workspace.colors :as mdc]
@ -15,7 +15,6 @@
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.object :as obj]
@ -26,9 +25,9 @@
[{:keys [color size]}]
(letfn [(select-color [event]
(st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
[:div {:class (dom/classnames (css :color-cell) true
(css :is-not-library-color) (nil? (:id color))
(css :no-text) (<= size 64))
[:div {:class (stl/css-case :color-cell true
:is-not-library-color (nil? (:id color))
:no-text (<= size 64))
:title (uc/get-color-name color)
:on-click select-color}
[:& cb/color-bullet {:color color}]
@ -102,32 +101,32 @@
(when (not= 0 (:offset @state))
(swap! state assoc :offset 0)))
[:div {:class (dom/classnames (css :color-palette) true
(css :no-text) (< size 64))
[:div {:class (stl/css-case :color-palette true
:no-text (< size 64))
:style #js {"--bullet-size" (dm/str bullet-size "px")}}
(when show-arrows?
[:button {:class (dom/classnames (css :left-arrow) true)
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
:on-click on-left-arrow-click} i/arrow-refactor])
[:div {:class (dom/classnames (css :color-palette-content) true)
[:div {:class (stl/css :color-palette-content)
:ref container
:on-wheel on-scroll}
(if (empty? current-colors)
[:div {:class (dom/classnames (css :color-palette-empty) true)
[:div {:class (stl/css :color-palette-empty)
:style {:position "absolute"
:left "50%"
:top "50%"
:transform "translate(-50%, -50%)"}}
(tr "workspace.libraries.colors.empty-palette")]
[:div {:class (dom/classnames (css :color-palette-inside) true)
[:div {:class (stl/css :color-palette-inside)
:style {:position "relative"
:max-width (str width "px")
:right (str (* offset-step offset) "px")}}
(for [[idx item] (map-indexed vector current-colors)]
[:& palette-item {:color item :key idx :size size}])])]
(when show-arrows?
[:button {:class (dom/classnames (css :right-arrow) true)
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
:on-click on-right-arrow-click} i/arrow-refactor])]))

157
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -9,89 +9,94 @@
.color-palette {
height: 100%;
display: flex;
}
.left-arrow,
.right-arrow {
@include buttonStyle;
@include flexCenter;
position: relative;
.left-arrow,
.right-arrow {
@include buttonStyle;
@include flexCenter;
position: relative;
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-4;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
&::after {
content: "";
position: absolute;
z-index: $z-index-1;
bottom: 0;
left: calc(-1 * $s-80);
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-4;
width: $s-80;
background-image: linear-gradient(
to left,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
pointer-events: none;
}
&:hover {
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
&::after {
content: "";
position: absolute;
z-index: $z-index-1;
bottom: 0;
left: calc(-1 * $s-80);
height: 100%;
width: $s-80;
background-image: linear-gradient(
to left,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
pointer-events: none;
}
&:hover {
svg {
stroke: var(--button-foreground-hover);
}
}
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
}
&::after {
background-image: none;
}
stroke: var(--button-foreground-hover);
}
}
.left-arrow {
&::after {
left: $s-24;
background-image: linear-gradient(
to right,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
}
&.disabled ::after {
&::after {
background-image: none;
}
svg {
transform: rotate(180deg);
}
}
.color-palette-content {
display: flex;
overflow: hidden;
.color-palette-inside {
display: flex;
gap: $s-8;
}
.color-cell {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr;
justify-items: center;
height: 100%;
width: $s-80;
&.is-not-library-color {
width: $s-64;
}
&.no-text {
@include flexCenter;
width: $s-32;
}
}
}
}
.left-arrow {
&::after {
left: $s-24;
background-image: linear-gradient(
to right,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
}
&.disabled ::after {
background-image: none;
}
svg {
transform: rotate(180deg);
}
}
.color-palette-content {
display: flex;
overflow: hidden;
.color-palette-inside {
display: flex;
gap: $s-8;
}
.color-cell {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr;
justify-items: center;
height: 100%;
width: $s-80;
&.is-not-library-color {
width: $s-64;
}
&.no-text {
@include flexCenter;
width: $s-32;
}
}
}
.color-palette-empty {
@include titleTipography;
color: var(--palette-text-color);
}

46
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View file

@ -38,11 +38,13 @@
.parent-selected & {
background-color: var(--layer-child-row-background-color);
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-child-row-background-color);
}
.parent-selected &.highlight,
.parent-selected &:hover {
background-color: var(--layer-row-background-color-hover);
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
}
&.dnd-over-bot {
@ -60,6 +62,7 @@
.layer-row.highlight &,
.layer-row:hover & {
background-color: var(--layer-row-background-color-selected);
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
}
.layer-row.type-comp & {
color: var(--layer-row-component-foreground-color);
@ -105,6 +108,7 @@
@include buttonStyle;
position: relative;
justify-self: flex-end;
width: $s-16;
height: 100%;
width: $s-24;
padding: 0 $s-8 0 $s-4;
@ -137,23 +141,23 @@
.absolute {
position: absolute;
background-color: var(--layer-row-foreground-color);
height: $s-12;
width: $s-12;
border-radius: $br-2;
opacity: $op-4;
width: $s-12;
height: $s-12;
border-radius: $br-2;
.layer-row.hidden {
.layer-row.hidden & {
opacity: $op-1;
}
.layer-row.type-comp {
.layer-row.type-comp & {
background-color: var(--layer-row-component-foreground-color);
}
.layer-row.highlight,
.layer-row:hover {
.layer-row.highlight &,
.layer-row:hover & {
opacity: $op-4;
background-color: var(--layer-row-foreground-color-hover);
}
.layer-row.selected {
.layer-row.selected & {
background-color: var(--layer-row-foreground-color-selected);
}
}
@ -171,23 +175,23 @@
@extend .button-icon-small;
stroke: var(--icon-foreground);
.layer-row.hidden {
.layer-row.hidden & {
opacity: $op-7;
}
.layer-row.selected {
.layer-row.selected & {
stroke: var(--layer-row-foreground-color-selected);
}
.layer-row.type-comp {
.layer-row.type-comp & {
stroke: var(--layer-row-component-foreground-color);
}
.layer-row.highlight,
.layer-row:hover {
.layer-row.highlight &,
.layer-row:hover & {
opacity: $op-10;
stroke: var(--layer-row-foreground-color-hover);
}
}
.layer-row.selected {
.layer-row.selected & {
background-color: var(--layer-row-background-color-selected);
}
&.inverse svg {
@ -208,15 +212,15 @@
@extend .button-icon-small;
stroke: var(--icon-foreground);
.layer-row.hidden {
.layer-row.hidden & {
opacity: $op-7;
}
.type-comp {
.type-comp & {
stroke: var(--layer-row-component-foreground-color);
}
}
.element-actions.selected {
.element-actions.selected & {
display: flex;
opacity: $op-0;
@ -225,16 +229,15 @@
}
}
.layer-row.highlight,
.layer-row:hover {
.layer-row.highlight &,
.layer-row:hover & {
display: flex;
svg {
opacity: $op-10;
stroke: var(--layer-row-foreground-color-hover);
}
}
.layer-row.selected {
.layer-row.selected & {
display: flex;
svg {
stroke: var(--layer-row-foreground-color-selected);
@ -253,7 +256,6 @@
height: $s-16;
min-width: calc(var(--depth) * var(--layer-indentation-size));
}
.filtered {
min-width: $s-12;
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -194,7 +194,7 @@
:placeholder (tr "workspace.options.search-font")}]
(when (and recent-fonts show-recent)
[*
[:p {:class :title} (tr "workspace.options.recent-fonts")]
[:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")]
(for [[idx font] (d/enumerate recent-fonts)]
[:& font-item {:key (dm/str "font-" idx)
:font font

27
frontend/src/app/main/ui/workspace/text_palette.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.text-palette
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.data.workspace.texts :as dwt]
@ -14,7 +14,6 @@
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.object :as obj]
[cuerdas.core :as str]
@ -42,11 +41,11 @@
:attrs attrs}))
selected-ids))))]
[:div {:on-click handle-click
:class (dom/classnames (css :typography-item) true
(css :mid-item) (<= size 72)
(css :small-item) (<= size 64))}
:class (stl/css-case :typography-item true
:mid-item (<= size 72)
:small-item (<= size 64))}
[:div
{:class (dom/classnames (css :typography-name) true)
{:class (stl/css :typography-name)
:title (:name typography)
:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
@ -54,9 +53,9 @@
(:name typography)]
(when-not name-only?
[:*
[:div {:class (dom/classnames (css :typography-font) true)}
[:div {:class (stl/css :typography-font)}
(:name font-data)]
[:div {:class (dom/classnames (css :typography-data) true)}
[:div {:class (stl/css :typography-data)}
(str (:font-size typography) "px | " (:name variant-data))]])]))
(mf/defc palette
@ -132,25 +131,25 @@
(when (not= 0 (:offset @state))
(swap! state assoc :offset 0)))
[:div {:class (dom/classnames (css :text-palette) true)
[:div {:class (stl/css :text-palette)
:style #js {"--height" (str size "px")}}
(when show-arrows?
[:button {:class (dom/classnames (css :left-arrow) true)
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
:on-click on-left-arrow-click} i/arrow-refactor])
[:div {:class (dom/classnames (css :text-palette-content) true)
[:div {:class (stl/css :text-palette-content)
:ref container
:on-wheel on-wheel}
(if (empty? current-typographies)
[:div {:class (dom/classnames (css :text-palette-empty) true)
[:div {:class (stl/css :text-palette-empty)
:style {:position "absolute"
:left "50%"
:top "50%"
:transform "translate(-50%, -50%)"}}
(tr "workspace.libraries.colors.empty-typography-palette")]
[:div
{:class (dom/classnames (css :text-palette-inside) true)
{:class (stl/css :text-palette-inside)
:style {:position "relative"
:max-width (str width "px")
:right (str (* offset-step offset) "px")}}
@ -163,7 +162,7 @@
:size size}])])]
(when show-arrows?
[:button {:class (dom/classnames (css :right-arrow) true)
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
:on-click on-right-arrow-click} i/arrow-refactor])]))

234
frontend/src/app/main/ui/workspace/text_palette.scss
View file

@ -9,126 +9,132 @@
.text-palette {
height: 100%;
display: flex;
.left-arrow,
.right-arrow {
@include buttonStyle;
@include flexCenter;
position: relative;
}
.left-arrow,
.right-arrow {
@include buttonStyle;
@include flexCenter;
position: relative;
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-2;
svg {
@extend .button-icon;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: calc(-1 * $s-80);
height: 100%;
width: $s-24;
padding: 0;
z-index: $z-index-2;
width: $s-80;
z-index: $z-index-1;
background-image: linear-gradient(
to left,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
pointer-events: none;
}
&:hover {
svg {
@extend .button-icon;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: calc(-1 * $s-80);
height: 100%;
width: $s-80;
z-index: $z-index-1;
background-image: linear-gradient(
to left,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
pointer-events: none;
}
&:hover {
svg {
stroke: var(--button-foreground-hover);
}
}
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
}
&::after {
background-image: none;
}
stroke: var(--button-foreground-hover);
}
}
.left-arrow {
&::after {
left: $s-24;
background-image: linear-gradient(
to right,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
}
&.disabled ::after {
&::after {
background-image: none;
}
svg {
transform: rotate(180deg);
}
}
.text-palette-content {
display: flex;
overflow: hidden;
.text-palette-inside {
display: flex;
gap: $s-8;
}
.typography-item {
@include titleTipography;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
width: $s-136;
padding: $s-8;
border-radius: $br-8;
background-color: var(--palette-text-background-color);
&:first-child {
margin-left: $s-8;
}
.typography-name {
@include tabTitleTipography;
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color-selected);
}
.typography-font {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
.typography-data {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
&.mid-item {
.typography-name {
height: $s-16;
}
.typography-data {
display: none;
}
}
&.small-item {
.typography-name {
height: $s-12;
}
.typography-data,
.typography-font {
display: none;
}
}
&:hover {
background-color: var(--palette-text-background-color-hover);
}
}
}
}
.left-arrow {
&::after {
left: $s-24;
background-image: linear-gradient(
to right,
var(--palette-button-shadow-initial) 0%,
var(--palette-button-shadow-final) 100%
);
}
&.disabled ::after {
background-image: none;
}
svg {
transform: rotate(180deg);
}
}
.text-palette-content {
display: flex;
overflow: hidden;
}
.text-palette-inside {
display: flex;
gap: $s-8;
}
.typography-item {
@include titleTipography;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
width: $s-136;
padding: $s-8;
border-radius: $br-8;
background-color: var(--palette-text-background-color);
&:first-child {
margin-left: $s-8;
}
.typography-name {
@include tabTitleTipography;
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color-selected);
}
.typography-font {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
.typography-data {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
&.mid-item {
.typography-name {
height: $s-16;
}
.typography-data {
display: none;
}
}
&.small-item {
.typography-name {
height: $s-12;
}
.typography-data,
.typography-font {
display: none;
}
}
&:hover {
background-color: var(--palette-text-background-color-hover);
}
}
.text-palette-empty {
@include titleTipography;
color: var(--palette-text-color);
}