Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

💄 Fix color assets and styles

Browse source
This commit is contained in:
elhombretecla 2023-08-09 11:11:51 +02:00
parent af460536d1
commit bc14f59153
10 changed files with 18 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -80,7 +80,7 @@
--layer-row-foreground-color: var(--color-foreground-secondary);
--layer-row-foreground-color-hover: var(--color-accent-primary);
--layer-row-foreground-color-selected: var(--color-accent-primary);
--layer-row-foreground-color-drag: var(--color-accent-primary);
--layer-row-foreground-color-drag: var(--color-select);
--layer-row-foreground-color-focus: var(--color-foreground-primary);
--layer-row-border-color-focus: var(--color-accent-primary);
--layer-child-row-background-color: var(--color-background-tertiary);
@ -150,7 +150,7 @@
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
--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-primary);
--assets-item-border-color-drag: var(--color-select);
--assets-component-background-color: var(--white); // We don't want this color to change with palette
--radio-btns-background-color: var(--color-background-tertiary);

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

@ -41,6 +41,7 @@ $s-148: calc(var(--s-4) * 37);
$s-152: calc(var(--s-4) * 38);
$s-160: calc(var(--s-4) * 40);
$s-168: calc(var(--s-4) * 42);
$s-180: calc(var(--s-4) * 45);
$s-184: calc(var(--s-4) * 46);
$s-192: calc(var(--s-4) * 48);
$s-196: calc(var(--s-4) * 49);

4
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -36,16 +36,14 @@
display: flex;
align-items: center;
flex-grow: 1;
gap: $s-4;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
.collased-icon {
@include flexCenter;
height: $s-24;
width: $s-24;
border-radius: $br-8;
padding: 0 $s-4 0 $s-8;
padding-left: $s-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);

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

@ -46,7 +46,7 @@
width: 100%;
margin: 0;
border: 0;
border-radius: $br-8;
border-radius: $br-4;
background-color: var(--input-background-color);
font-size: $fs-14;
color: var(--input-foreground-color);
@ -81,7 +81,7 @@
@extend .menu-dropdown;
position: absolute;
top: $s-48;
left: calc(var(--width, $s-256) - $s-32);
left: calc(var(--width, $s-256) - $s-16);
margin: 0;
.menu-item {
@ -121,7 +121,7 @@
.sub-menu {
@extend .menu-dropdown;
position: absolute;
left: calc(var(--width, $s-256) + $s-168);
left: calc(var(--width, $s-256) + $s-180);
width: 270px;
.shortcut {
@extend .shortcut;

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

@ -26,7 +26,7 @@
display: flex;
align-items: center;
height: $s-32;
padding: $s-8 $s-12 $s-8 $s-8;
padding: $s-8;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
@ -34,7 +34,8 @@
.bullet-block {
@include flexCenter;
height: 100%;
width: $s-32;
justify-content: flex-start;
margin-right: $s-4;
}
.name-block {
@include titleTipography;

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

@ -15,7 +15,7 @@
width: 100%;
.section-icon {
@include flexCenter;
padding-right: $s-8;
padding-right: $s-2;
svg {
@include flexCenter;
height: $s-16;
@ -27,6 +27,7 @@
.section-name {
display: flex;
align-items: center;
margin: 0 $s-2;
}
.num-assets {
@include flexCenter;

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

@ -58,8 +58,7 @@
:collapsed? (not open?)
:on-collapsed toggle-open
:title (if local?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")
[:span {:class (dom/classnames (css :special-subtitle) true)} file-name]])
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
(mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))}
(when-not local?

2
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json
View file

@ -1 +1 @@
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}
{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}

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

@ -20,14 +20,11 @@
.special-title {
@include textEllipsis;
width: calc(var(--width, 256px) - $s-80);
color: var(--title-foreground-color-hover);
margin-left: $s-2;
text-align: left;
}
.special-subtitle {
padding-left: $s-4;
color: var(--title-foreground-color);
text-transform: initial;
}
.file-link {
@extend .button-tertiary;
height: $s-32;

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

@ -19,6 +19,7 @@
height: $s-32;
width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
padding-right: $s-12;
cursor: pointer;
&.filtered {
width: calc(100% - $s-12);