3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 23:58:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3465 from penpot/eva-structure-redesign

Browse source 
💄 UI structure redesign
This commit is contained in:
Alejandro 2023-08-07 12:57:21 +02:00 • committed by GitHub
commit 8ad16f9644
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
97 changed files with 2194 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/play-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 2l9.6 6L4 14V2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 149 B

3
frontend/resources/images/icons/status-alert-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 4v4m-.015 3.07v.263"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/icons/status-tick-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.333 4L6 11.333 2.667 8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

3
frontend/resources/images/icons/status-update-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.11 3.556V6.89m0 0h-3.333m3.334 0l-2.578-2.423a5 5 0 00-8.25 1.867m1.94 2.777H1.889m0 0v3.333m0-3.333l2.578 2.423a5 5 0 008.25-1.867"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

3
frontend/resources/images/icons/status-wrong-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 4L8 8m0 0l-4 4m4-4l4 4M8 8L4 4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 166 B

3
frontend/resources/images/status-alert-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 4v4m-.015 3.07v.263"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

3
frontend/resources/images/status-tick-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.333 4L6 11.333 2.667 8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 158 B

3
frontend/resources/images/status-update-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.11 3.556V6.89m0 0h-3.333m3.334 0l-2.578-2.423a5 5 0 00-8.25 1.867m1.94 2.777H1.889m0 0v3.333m0-3.333l2.578 2.423a5 5 0 008.25-1.867"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

3
frontend/resources/images/status-wrong-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 4L8 8m0 0l-4 4m4-4l4 4M8 8L4 4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 166 B

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

@ -187,3 +187,57 @@
}
}
}
.menu-dropdown {
@include menuShadow;
display: flex;
flex-direction: column;
gap: $s-4;
width: $s-192;
padding: $s-4;
border-radius: $br-8;
background-color: var(--menu-background-color);
z-index: $z-index-10;
}
.menu-item {
@include titleTipography;
display: flex;
align-items: center;
justify-content: space-between;
height: $s-28;
width: 100%;
padding: $s-6;
border-radius: $br-8;
cursor: pointer;
&:hover {
background-color: var(--menu-background-color-hover);
}
}
.shortcut {
@include flexCenter;
gap: $s-2;
color: var(--menu-shortcut-foreground-color);
}
.shortcut-key {
@include titleTipography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;
border-radius: $br-6;
background-color: var(--menu-shortcut-background-color);
}
.user-icon {
@include flexCenter;
@include titleTipography;
height: $s-24;
width: $s-24;
border-radius: $br-circle;
img {
border-radius: $br-circle;
border: $s-2 solid var(--user-count-foreground-color);
}
}

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

@ -17,6 +17,11 @@
--green-30: rgba(145, 250, 219, 0.3);
--lilac: #bb97d8;
--strong-green: #00d1b8;
// NOTIFICATION
--dark-ok-color: var(--strong-green);
--dark-warning-color: #ff9b49;
--dark-pending-color: var(--lilac);
--dark-error-color: #ff4986;
// LIGHT
--light-gray-1: #fff;
@ -30,4 +35,13 @@
--purple-30: rgba(105, 17, 212, 0.2);
--blue: #1345aa;
--strong-purple: #8c33eb;
// NOTIFICATION WILL CHANGE
--light-ok-color: var(--strong-green);
--light-warning-color: #ff9b49;
--light-pending-color: var(--lilac);
--light-error-color: #ff4986;
//GENERIC
--color-canvas: #e8e9ea;
}

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

@ -7,6 +7,9 @@
.light,
.default {
--canvas-background-color: var(--color-background-primary);
--canvas-fill-color: var(--canvas-color);
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
@ -175,4 +178,17 @@
--empty-message-background-color: var(--color-background-tertiary);
--empty-message-foreground-color: var(--color-foreground-secondary);
--status-ok-background-color: var(--ok-color);
--status-warning-background-color: var(--warning-color);
--status-pending-background-color: var(--pending-color);
--status-error-background-color: var(--error-color);
--status-icon-foreground-color: var(--color-background-primary);
--user-count-background-color: var(--color-background-secondary);
--user-count-foreground-color: var(--color-accent-primary);
--modal-background-color: var(--color-background-quaternary);
--modal-foreground-color: var(--color-foreground-primary);
--modal-foreground-color-secondary: var(--color-foreground-secondary);
}

9
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -52,3 +52,12 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@keyframes spin-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

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

@ -3,3 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@mixin menuShadow {
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
}

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

@ -34,10 +34,14 @@ $s-84: calc(var(--s-4) * 21);
$s-92: calc(var(--s-4) * 23);
$s-96: calc(var(--s-4) * 24);
$s-104: calc(var(--s-4) * 25);
$s-116: calc(var(--s-4) * 29);
$s-120: calc(var(--s-4) * 30);
$s-136: calc(var(--s-4) * 34);
$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-184: calc(var(--s-4) * 46);
$s-192: calc(var(--s-4) * 48);
$s-196: calc(var(--s-4) * 49);
$s-200: calc(var(--s-4) * 50);
@ -46,13 +50,16 @@ $s-240: calc(var(--s-4) * 60);
$s-248: calc(var(--s-4) * 62);
$s-256: calc(var(--s-4) * 64);
$s-272: calc(var(--s-4) * 68);
$s-276: calc(var(--s-4) * 69);
$s-280: calc(var(--s-4) * 70);
$s-284: calc(var(--s-4) * 71);
$s-300: calc(var(--s-4) * 75);
$s-320: calc(var(--s-4) * 80);
$s-348: calc(var(--s-4) * 87);
$s-380: calc(var(--s-4) * 95);
$s-400: calc(var(--s-4) * 100);
$s-480: calc(var(--s-4) * 120);
$s-500: calc(var(--s-4) * 125);
$s-520: calc(var(--s-4) * 130);
$s-664: calc(var(--s-4) * 166);
$s-712: calc(var(--s-4) * 178);

5
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -17,4 +17,9 @@
--color-accent-secondary: var(--lilac);
--color-accent-tertiary: var(--strong-green);
--overlay-color: rgba(0, 0, 0, 0.4);
--ok-color: var(--dark-ok-color);
--warning-color: var(--dark-warning-color);
--pending-color: var(--dark-pending-color);
--error-color: var(--dark-error-color);
--canvas-color: var(--color-canvas);
}

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

@ -16,4 +16,9 @@
--color-accent-primary-muted: var(--purple-30);
--color-accent-secondary: var(--blue);
--color-accent-tertiary: var(--strong-purple);
--ok-color: var(--light-ok-color);
--warning-color: var(--light-warning-color);
--pending-color: var(--light-pending-color);
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
}

7
frontend/resources/styles/common/refactor/z-index.scss
View file

@ -4,9 +4,10 @@
//
// Copyright (c) KALEIDOS INC
$z-index-1: 1;
$z-index-2: 2;
$z-index-4: 4;
$z-index-1: 1; // floating elements
$z-index-2: 2; //sidebars
$z-index-3: 3; // context menu
$z-index-4: 4; // modal
$z-index-10: 10;
$z-index-20: 20;
$z-index-modal: 30; // When refactor finish we can reduce this number,

1
frontend/resources/styles/main/layouts/inspect.scss
View file

@ -121,6 +121,7 @@ $width-settings-bar: 256px;
&.settings-bar-right {
width: 100%;
grid-area: right-sidebar;
}
}

4
frontend/resources/styles/main/partials/signup-questions.scss
View file

@ -85,7 +85,7 @@
grid-template-areas: "previous next";
.step-prev {
display: flex;
align-items: end;
align-items: flex-end;
justify-content: flex-start;
grid-area: previous;
button {
@ -99,7 +99,7 @@
.step-next {
display: flex;
align-items: end;
align-items: flex-end;
justify-content: flex-end;
grid-area: next;
input {

2
frontend/resources/styles/main/partials/tab-container.scss
View file

@ -2,7 +2,7 @@
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
height: 100%;
height: calc(100% - 45px);
}
.tab-container-tabs {

1
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -322,7 +322,6 @@
display: flex;
margin-left: 0px;
margin-right: 10px;
/* border: 1px solid red; */
width: 150px;
justify-content: flex-end;

4
frontend/resources/styles/main/partials/workspace.scss
View file

@ -161,7 +161,7 @@ $height-palette-max: 80px;
justify-content: center;
align-items: center;
svg#loader-pencil {
svg {
fill: $color-gray-50;
}
}
@ -171,7 +171,7 @@ $height-palette-max: 80px;
display: flex;
padding: 0;
margin: 0;
grid-area: viewport;
&.scrolling {
cursor: grab;
}