Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-14 07:51:35 -05:00
Code Issues Activity

♻️ Add new exceptions for light theme

Browse source
This commit is contained in:
Eva 2024-01-30 10:40:28 +01:00 • committed by Alonso Torres
parent a882d0bf6d
commit 153bb752a4
28 changed files with 131 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -127,7 +127,7 @@
border-radius: $br-8;
color: var(--button-tertiary-foreground-color-rest);
background-color: transparent;
border: $s-1 solid transparent;
border: $s-2 solid transparent;
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-rest);
@ -135,7 +135,7 @@
&:hover {
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
border: $s-2 solid var(--button-secondary-border-color-hover);
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-hover);
@ -143,7 +143,7 @@
}
&:active {
outline: none;
border: $s-1 solid transparent;
border: $s-2 solid transparent;
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg,
@ -168,11 +168,11 @@
.button-icon-selected {
outline: none;
border: $s-1 solid transparent;
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
border: $s-2 solid var(--button-icon-border-color-selected);
background-color: var(--button-icon-background-color-selected);
color: var(--button-icon-foreground-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-active);
stroke: var(--button-icon-foreground-color-selected);
}
}

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

@ -42,6 +42,7 @@
--lf-primary: #000;
--lf-secondary: #495e74;
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
--lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)};
//Light accent
--la-primary: #6911d4;

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

@ -63,6 +63,12 @@
--button-tertiary-border-color-focus: var(--color-accent-primary);
--button-tertiary-foreground-color-focus: var(--color-foreground-primary);
--button-icon-foreground-color: var(--color-foreground-secondary);
--button-icon-foreground-color-hover: var(--color-foreground-secondary);
--button-icon-background-color-selected: var(--color-background-quaternary);
--button-icon-foreground-color-selected: var(--color-accent-primary);
--button-icon-border-color-selected: var(--color-background-quaternary);
--button-radio-background-color-rest: var(--color-background-tertiary);
--button-radio-border-color-rest: var(--color-background-tertiary);
--button-radio-foreground-color-rest: var(--color-foreground-secondary);
@ -92,11 +98,14 @@
--constraint-center-area-background-color: var(--color-background-primary);
// TABS
--tabs-background-color: var(--color-background-secondary);
--tab-background-color-hover: var(--color-background-primary);
--tab-background-color-selected: var(--color-background-quaternary);
--tab-foreground-color: var(--color-foreground-secondary);
--tab-foreground-color-hover: var(--color-foreground-primary);
--tab-foreground-color-selected: var(--color-accent-primary);
--tab-border-color: var(--color-background-secondary);
--tab-border-color-selected: var(--color-background-secondary);
// SECTION TITLE
--title-background-color: var(--color-background-primary);
@ -213,16 +222,14 @@
--assets-item-background-color: var(--color-background-tertiary);
--assets-item-background-color-hover: var(--color-background-quaternary);
--assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
--assets-item-name-foreground-color: var(--color-foreground-secondary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
--assets-item-border-color: var(--color-accent-primary);
--assets-item-background-color-drag: var(--color-accent-primary-muted);
--assets-item-border-color-drag: var(--color-accent-tertiary);
--assets-component-background-color: var(--app-white); // We don't want this color to change with palette
--assets-component-background-color-disabled: var(
--df-secondary;
); // We don't want this color to change with palette
--assets-item-background-color-drag: transparent;
--assets-item-border-color-drag: var(--color-accent-primary-muted);
--assets-component-background-color: var(--app-white); // TODO: review this token
--assets-component-background-color-disabled: var(--df-secondary;);
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary);
@ -230,6 +237,7 @@
--radio-btn-background-color-selected: var(--color-background-quaternary);
--radio-btn-foreground-color: var(--color-foreground-secondary);
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color: var(--color-background-tertiary);
--radio-btn-border-color-selected: var(--color-background-quaternary);
--library-name-foreground-color: var(--color-foreground-primary);
@ -354,3 +362,25 @@
#app {
background-color: var(--app-background);
}
.light {
--assets-component-background-color: var(--color-background-secondary);
--tabs-background-color: var(--color-background-tertiary);
--tab-background-color-selected: var(--color-background-primary);
--tab-border-color: var(--color-background-tertiary);
--tab-border-color-selected: var(--color-background-secondary);
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-primary);
--radio-btn-foreground-color: var(--color-foreground-secondary);
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color: var(--color-background-tertiary);
--radio-btn-border-color-selected: var(--color-background-secondary);
--button-icon-background-color-selected: var(--color-background-primary);
--button-icon-border-color-selected: var(--color-background-secondary);
--assets-item-name-background-color: var(--color-background-primary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
}

3
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -24,8 +24,7 @@
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
--overlay-color: rgba(255, 255, 255, 0.4);
--overlay-color: var(--lf-secondary-50);
--shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;

6
frontend/src/app/main/ui/components/editable_label.scss
View file

@ -15,9 +15,9 @@
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0;
padding-left: $s-6;
border-radius: $br-8;
border: $s-1 solid var(--input-border-color-focus);
color: var(--layer-row-foreground-color);
border-radius: $br-4;
border: $s-1 solid var(--input-border-color-active);
color: var(--input-foreground-color-active);
}
.editable-label {

18
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -12,13 +12,16 @@
height: $s-32;
background-color: var(--input-background-color);
}
.radio-icon {
@extend .button-radio;
@include buttonStyle;
@include flexCenter;
@include focusRadio;
height: $s-32;
flex-grow: 1;
border-radius: $s-8;
box-sizing: content-box;
border: none;
box-sizing: border-box;
border: $s-2 solid var(--radio-btn-border-color);
input {
display: none;
}
@ -31,16 +34,14 @@
color: var(--radio-btn-foreground-color);
}
&:hover {
border: none;
svg {
color: var(--radio-btn-foreground-color-selected);
stroke: var(--radio-btn-foreground-color-selected);
}
}
&.checked {
border: none;
background-color: var(--radio-btn-background-color-selected);
box-shadow: var(--radio-button-box-shadow);
border-color: var(--radio-btn-border-color-selected);
svg {
stroke: var(--radio-btn-foreground-color-selected);
}
@ -52,6 +53,7 @@
&.disabled {
cursor: default;
background-color: transparent;
border: $s-2 solid transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}
@ -59,8 +61,8 @@
color: var(--button-foreground-color-disabled);
}
&:hover {
border: none;
background-color: transparent;
border: $s-2 solid transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}

8
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -17,8 +17,7 @@
flex-direction: row;
gap: $s-2;
border-radius: $br-8;
background: var(--color-background-secondary);
padding: $s-2;
background: var(--tabs-background-color);
cursor: pointer;
font-size: $fs-12;
height: 100%;
@ -27,7 +26,6 @@
flex-direction: row;
height: 100%;
width: 100%;
gap: $s-2;
.tab-container-tab-title {
@include flexCenter;
@include tabTitleTipography;
@ -35,10 +33,11 @@
width: 100%;
padding: 0 $s-8;
margin: 0;
border-radius: $br-5;
border-radius: $br-8;
background-color: transparent;
color: var(--tab-foreground-color);
white-space: nowrap;
border: $s-2 solid var(--tab-border-color);
svg {
@extend .button-icon;
stroke: var(--tab-foreground-color);
@ -47,6 +46,7 @@
&.current,
&.current:hover {
background: var(--tab-background-color-selected);
border-color: var(--tab-border-color-selected);
color: var(--tab-foreground-color-selected);
svg {
stroke: var(--tab-foreground-color-selected);

53
frontend/src/app/main/ui/components/tabs_container.cljs
View file

@ -1,53 +0,0 @@
;; 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
(ns app.main.ui.components.tabs-container
(:require
[app.common.data :as d]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc tabs-element
{::mf/wrap-props false}
[props]
(let [children (unchecked-get props "children")]
[:div.tab-element
[:div.tab-element-content children]]))
(mf/defc tabs-container
{::mf/wrap-props false}
[props]
(let [children (->>
(unchecked-get props "children")
(filter some?))
selected (unchecked-get props "selected")
on-change (unchecked-get props "on-change-tab")
state (mf/use-state #(or selected (-> children first .-props .-id)))
selected (or selected @state)
select-fn
(mf/use-fn
(mf/deps on-change)
(fn [event]
(let [id (d/read-string (.. event -target -dataset -id))]
(reset! state id)
(when (fn? on-change) (on-change id)))))]
[:div.tab-container
[:div.tab-container-tabs
(for [tab children]
(let [props (.-props tab)
id (.-id props)
title (.-title props)]
[:div.tab-container-tab-title
{:key (str/concat "tab-" (d/name id))
:data-id (pr-str id)
:on-click select-fn
:class (when (= selected id) "current")}
title]))]
[:div.tab-container-content
(d/seek #(= selected (-> % .-props .-id)) children)]]))

4
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -67,8 +67,8 @@
width: $s-32;
svg {
min-width: $s-16;
min-height: $s-16;
width: $s-16;
height: $s-16;
stroke: $df-secondary;
fill: none;
}

26
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -163,12 +163,12 @@
&.loading {
.file-name {
color: var(--element-foreground-pending);
color: var(--modal-text-foreground-color);
.file-icon {
:global(#loader-pencil) {
color: var(--element-foreground-pending);
stroke: var(--element-foreground-pending);
fill: var(--element-foreground-pending);
color: var(--modal-text-foreground-color);
stroke: var(--modal-text-foreground-color);
fill: var(--modal-text-foreground-color);
}
}
}
@ -186,34 +186,34 @@
}
&.success {
.file-name {
color: var(--element-foreground-success);
color: var(--modal-text-foreground-color);
.file-icon svg {
stroke: var(--element-foreground-success);
stroke: var(--modal-text-foreground-color);
}
.file-icon.icon-fill svg {
fill: var(--element-foreground-success);
fill: var(--modal-text-foreground-color);
}
}
}
&.error {
.file-name {
color: var(--element-foreground-error);
color: var(--modal-text-foreground-color);
.file-icon svg {
stroke: var(--element-foreground-error);
stroke: var(--modal-text-foreground-color);
}
.file-icon.icon-fill svg {
fill: var(--element-foreground-error);
fill: var(--modal-text-foreground-color);
}
}
}
&.editable {
.file-name {
color: var(--icon-foreground);
color: var(--modal-text-foreground-color);
.file-icon svg {
stroke: var(--icon-foreground);
stroke: var(--modal-text-foreground-color);
}
.file-icon.icon-fill svg {
fill: var(--icon-foreground);
fill: var(--modal-text-foreground-color);
}
}
}

10
frontend/src/app/main/ui/dashboard/pin_button.scss
View file

@ -7,13 +7,14 @@
@use "common/refactor/common-refactor.scss" as *;
.button {
--pin-button-icon-color: #{$df-secondary};
--pin-button-icon-color: var(--button-icon-foreground-color);
--pin-button-bg-color: none;
--pin-button-border-color: none;
width: $s-32;
height: $s-32;
background: var(--pin-button-bg-color);
border: none;
border: $s-2 solid var(--pin-button-border-color);
border-radius: $br-8;
display: grid;
place-content: center;
@ -21,8 +22,9 @@
}
.button-active {
--pin-button-icon-color: #{$da-primary};
--pin-button-bg-color: #{$db-cuaternary};
--pin-button-icon-color: var(--button-icon-foreground-color-selected);
--pin-button-bg-color: var(--button-icon-background-color-selected);
--pin-button-border-color: var(--button-icon-border-color-selected);
}
.icon {

16
frontend/src/app/main/ui/export.scss
View file

@ -276,27 +276,27 @@
}
&.loading {
.file-name {
color: var(--element-foreground-pending);
color: var(--modal-text-foreground-color);
.file-icon svg:global(#loader-pencil) {
color: var(--element-foreground-pending);
stroke: var(--element-foreground-pending);
fill: var(--element-foreground-pending);
color: var(--modal-text-foreground-color);
stroke: var(--modal-text-foreground-color);
fill: var(--modal-text-foreground-color);
}
}
}
&.error {
.file-name {
color: var(--element-foreground-error);
color: var(--modal-text-foreground-color);
.file-icon svg {
stroke: var(--element-foreground-error);
stroke: var(--modal-text-foreground-color);
}
}
}
&.success {
.file-name {
color: var(--element-foreground-success);
color: var(--modal-text-foreground-color);
.file-icon svg {
stroke: var(--element-foreground-success);
stroke: var(--modal-text-foreground-color);
}
}
}

7
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -16,9 +16,7 @@
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
@ -33,6 +31,9 @@
.close-button {
@extend .button-tertiary;
position: absolute;
right: $s-2;
top: $s-2;
height: $s-28;
width: $s-28;
border-radius: $br-6;

6
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -59,6 +59,7 @@
margin: $s-0;
list-style: none;
z-index: $z-index-2;
gap: $s-2;
&.mid-palette,
&.small-palette {
display: flex;
@ -73,7 +74,6 @@
height: $s-32;
width: $s-32;
border-radius: $br-8;
border: $s-2 solid transparent;
background-clip: padding-box;
padding: 0;
svg {
@ -83,12 +83,10 @@
&.selected {
@extend .button-icon-selected;
}
&:hover {
border: $s-2 solid transparent;
}
}
}
}
.palette-actions {
@extend .button-tertiary;
grid-area: actions;

6
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -128,6 +128,7 @@
margin: 0;
height: $s-28;
width: $s-28;
border: none;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
@ -140,7 +141,6 @@
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@ -153,6 +153,7 @@
margin: 0;
height: $s-28;
width: $s-28;
border: none;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
@ -165,7 +166,6 @@
}
&.selected {
background-color: var(--button-tertiary-background-color-selected);
border: $s-2 solid var(--button-tertiary-border-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@ -218,6 +218,7 @@
margin: 0;
width: $s-28;
height: $s-28;
border: none;
svg {
@extend .button-icon;
height: $s-16;
@ -226,5 +227,6 @@
}
&:hover {
background-color: transparent;
border: none;
}
}

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

@ -30,6 +30,10 @@ $width-settings-bar-max: $s-500;
}
}
.layers-tab {
padding-top: $s-4;
}
.left-header {
grid-area: header;
}
@ -85,6 +89,5 @@ $width-settings-bar-max: $s-500;
width: 100%;
height: $s-12;
border-top: $s-2 solid var(--resize-area-border-color);
background-color: var(--resize-area-background-color);
cursor: ns-resize;
}

3
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -168,7 +168,8 @@
:placeholder (tr "workspace.assets.search")}
[:button
{:on-click on-open-menu
:class (stl/css :section-button)}
:class (stl/css-case :section-button true
:opened menu-open?)}
i/filter-refactor]]
[:& context-menu-a11y
{:on-close on-menu-close

4
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -90,6 +90,10 @@
}
}
}
&.opened {
@extend .button-icon-selected;
}
}
.sections-container {

8
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -34,6 +34,7 @@
position: absolute;
left: $s-4;
bottom: $s-4;
height: $s-20;
width: calc(100% - 2 * $s-4);
padding: $s-2;
column-gap: $s-4;
@ -50,10 +51,11 @@
span {
display: flex;
align-items: center;
height: 100%;
}
&.editing {
border: $s-1 solid var(--input-border-color-focus);
border-radius: $br-2;
border-radius: $br-4;
display: flex;
align-items: center;
background-color: var(--input-background-color);
@ -63,12 +65,12 @@
&:hover {
background-color: var(--assets-item-background-color-hover);
.cell-name {
display: flex;
display: block;
}
}
&.selected {
border: $s-4 solid var(--assets-item-border-color);
border: $s-1 solid var(--assets-item-border-color);
}
}

1
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -239,6 +239,7 @@
[:button {:on-click toggle-filters
:class (stl/css-case
:filter-button true
:opened show-menu?
:active active?)}
i/filter-refactor]]

3
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -49,6 +49,9 @@
stroke: var(--button-foreground-hover);
}
}
&.opened {
@extend .button-icon-selected;
}
}
.close-search {
@extend .button-tertiary;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
View file

@ -52,5 +52,5 @@
.coord-input {
@extend .input-element;
border-radius: 0 $br-8 $br-8 0;
border-left: 1px solid var(--panel-background-color);
border-left: $s-1 solid var(--panel-background-color);
}

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -229,10 +229,7 @@
@extend .button-icon;
}
&.extended {
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-radio-foreground-color-active);
}
@extend .button-icon-selected;
}
}

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -54,10 +54,7 @@
stroke: var(--icon-foreground);
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@extend .button-icon-selected;
}
}
}
@ -138,10 +135,7 @@
stroke: var(--icon-foreground);
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@extend .button-icon-selected;
}
}
}

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

@ -83,11 +83,7 @@
@extend .button-icon;
}
&.selected {
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@extend .button-icon-selected;
}
}

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

@ -546,7 +546,7 @@
[:span {:class (stl/css :icon)}
i/clip-content-refactor]]])
(when (options :show-in-viewer)
[:div {:class (stl/css :clip-content)}
[:div {:class (stl/css :show-in-viewer)}
[:input {:type "checkbox"
:id "show-in-viewer"
:ref show-in-viewer-ref

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

@ -203,10 +203,7 @@
stroke: var(--icon-foreground);
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@extend .button-icon-selected;
}
}
@ -235,10 +232,7 @@
}
}
&.selected {
background-color: var(--button-tertiary-background-color-hover);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@extend .button-icon-selected;
}
}
}

7
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -39,7 +39,6 @@
height: $s-36;
width: $s-36;
flex-shrink: 0;
background-color: transparent;
border-radius: $s-8;
border: none;
margin: 0 $s-2;
@ -48,11 +47,9 @@
@extend .button-icon;
stroke: var(--color-foreground-secondary);
}
&.selected {
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-radio-foreground-color-active);
}
@extend .button-icon-selected;
}
}
}