3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 01:48:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3707 from penpot/eva-comments-new-ui

Browse source 
💄 Update comment UI with new design
This commit is contained in:
Aitor Moreno 2023-10-16 15:13:54 +02:00 • committed by GitHub
commit 82f0cc7cff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 999 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -75,6 +75,12 @@
stroke: var(--button-primary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-secondary {
@ -118,6 +124,12 @@
stroke: var(--button-secondary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-tertiary {
@ -161,6 +173,12 @@
stroke: var(--button-tertiary-foreground-color-active);
}
}
&:global(.disabled) {
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
cursor: unset;
}
}
.button-radio {
@ -375,6 +393,26 @@
}
}
.checkbox-icon {
@include flexCenter;
width: $s-16;
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
svg {
display: none;
}
&:global(.checked) {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
}
.input-checkbox {
display: flex;
align-items: center;
@ -385,20 +423,7 @@
gap: $s-6;
cursor: pointer;
span {
@include flexCenter;
width: $s-16;
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
&:global(.checked) {
background-color: var(--input-border-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
@extend .checkbox-icon;
}
input {
margin: 0;
@ -505,6 +530,28 @@
grid-template-columns: $s-92 1fr;
}
.comment-bubbles {
@include titleTipography;
@include flexCenter;
height: $s-32;
width: $s-32;
border-radius: $br-circle;
background-color: var(--comment-bullet-background-color-rest);
border: $s-1 solid var(--comment-bullet-border-color-rest);
color: var(--comment-bullet-foreground-color-rest);
}
.resolved-comment-bubble {
background-color: var(--comment-bullet-background-color-resolved);
border: $s-1 solid var(--comment-bullet-border-color-resolved);
color: var(--comment-bullet-foreground-color-resolved);
}
.unread-comment-bubble {
background-color: var(--comment-bullet-background-color-unread);
border: $s-1 solid var(--comment-bullet-border-color-unread);
color: var(--comment-bullet-foreground-color-unread);
}
// SELECTS AND DROPDOWNS
.menu-dropdown {
@include menuShadow;

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

@ -20,7 +20,9 @@
--button-background-focus: var(--color-background-secondary);
--button-foreground-focus: var(--color-foreground-primary);
--button-border-focus: var(--color-accent-primary);
--button-foreground-color-disabled: var(--color-background-quaternary);
--button-foreground-color-disabled: var(--color-foreground-secondary);
--button-background-color-disabled: var(--color-background-primary);
--button-border-color-disabled: var(--color-background-quaternary);
--button-primary-background-color-rest: var(--color-accent-primary);
--button-primary-border-color-rest: var(--color-accent-primary);
@ -229,4 +231,18 @@
--colorpicker-details-color: var(--color-background-quaternary);
--colorpicker-details-color-selected: var(--color-accent-primary);
--colorpicker-handlers-color: var(--color-foreground-primary);
// COMMENTS
--comment-title-color: var(--color-foreground-primary);
--comment-subtitle-color: var(--color-foreground-secondary);
--comment-bullet-background-color-rest: var(--color-background-quaternary);
--comment-bullet-foreground-color-rest: var(--color-foreground-primary);
--comment-bullet-border-color-rest: var(--color-background-secondary);
--comment-bullet-background-color-unread: var(--color-accent-primary);
--comment-bullet-foreground-color-unread: var(--color-background-primary);
--comment-bullet-border-color-unread: var(--color-background-secondary);
--comment-bullet-background-color-resolved: var(--color-background-primary);
--comment-bullet-foreground-color-resolved: var(--color-foreground-secondary);
--comment-bullet-border-color-resolved: var(--color-background-quaternary);
--comment-modal-background-color: var(--color-background-primary);
}