3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 19:46:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3397 from penpot/juan-history-redesign

Browse source 
💄  History panel redesign
This commit is contained in:
Alejandro 2023-07-11 06:52:40 +02:00 • committed by GitHub
commit b8dbd16b01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 314 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/history-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="M2.4 8a6 6 0 111.758 4.242M2.4 8l2.1-2M2.4 8L1 5.5m7.4-.7v3.6l2.4 1.2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 201 B

2
frontend/resources/images/icons/open-link-refactor.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="m2 10 8-8m0 0H2m8 0v8"/>
<path d="M4 12l8-8zm8-8H4zm0 0v8z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 153 B

After

Width:  |  Height:  |  Size: 156 B

Before After
Before After

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

@ -8,6 +8,8 @@
.light,
.default {
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);
--button-background-hover: var(--color-background-quaternary);
--button-foreground-hover: var(--color-accent-primary);
@ -64,10 +66,9 @@
--tab-foreground-color-hover: var(--color-foreground-primary);
--tab-foreground-color-selected: var(--color-accent-primary);
--title-background-color: var(--color-background-secondary);
--title-background-color: var(--color-background-primary);
--title-foreground-color: var(--color-foreground-secondary);
--title-foreground-color-hover: var(--color-foreground-primary);
--title-background-color: var(--color-background-primary);
--layer-row-background-color: var(--color-background-primary);
--layer-row-background-color-hover: var(--color-background-secondary);
@ -139,6 +140,7 @@
--color-bullet-border-color: var(--color-background-quaternary);
--palette-handler-background-color: var(--color-background-quaternary);
--assets-title-background-color: var(--color-background-primary);
--assets-item-background-color: var(--color-background-tertiary);
--assets-item-background-color-hover: var(--color-background-quaternary);
--assets-item-name-foreground-color: var(--color-foreground-secondary);
@ -163,4 +165,14 @@
--not-found-background-color: var(--color-background-tertiary);
--not-found-foreground-color: var(--color-foreground-secondary);
--entry-foreground-color: var(--color-foreground-secondary);
--entry-background-color: var(--color-background-tertiary);
--entry-background-color-disabled: var(--color-background-primary);
--entry-border-color-disabled: var(--color-background-quaternary);
--entry-foreground-color-hover: var(--color-foreground-primary);
--entry-background-color-hover: var(--color-background-quaternary);
--empty-message-background-color: var(--color-background-tertiary);
--empty-message-foreground-color: var(--color-foreground-secondary);
}