Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-15 08:21:40 -05:00
Code Issues Activity

💄 Improve toast UI visualization (#5727)

Browse source
This commit is contained in:
Xaviju 2025-01-31 12:17:39 +01:00 • committed by GitHub
parent 0bd4a7d0fc
commit d62dc3b416
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/ds/_sizes.scss
View file

@ -19,4 +19,5 @@ $sz-224: px2rem(224);
$sz-252: px2rem(252);
$sz-284: px2rem(284);
$sz-400: px2rem(400);
$sz-480: px2rem(480);
$sz-964: px2rem(964);

6
frontend/src/app/main/ui/ds/colors.scss
View file

@ -16,9 +16,9 @@ $green-200: #a7e8d9;
$green-500: #2d9f8f;
$green-950: #0a2927;
$orange-200: #ffc8a8;
$orange-500: #fe4811;
$orange-950: #440806;
$orange-200: #fedeac;
$orange-500: #fe9c07;
$orange-950: #3d2501;
$red-200: #ffcada;
$red-400: #c80857;

23
frontend/src/app/main/ui/ds/notifications/actionable.scss
View file

@ -5,21 +5,26 @@
// Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *;
@use "../typography.scss" as t;
@use "../typography.scss" as *;
.notification {
@include use-typography("body-medium");
--actionable-bg-color: var(--color-background-primary);
--actionable-fg-color: var(--color-foreground-primary);
--actionable-border-color: var(--color-background-quaternary);
--actionable-icon-color: var(--color-foreground-secondary);
--actionable-padding: var(--sp-s);
align-items: center;
background: var(--color-background-primary);
background: var(--actionable-bg-color);
border-radius: $br-8;
border: $b-1 solid var(--color-background-quaternary);
border: $b-1 solid var(--actionable-border-color);
color: var(--actionable-fg-color);
display: grid;
gap: var(--sp-s);
grid-template-columns: 1fr auto auto;
justify-content: space-between;
padding: var(--sp-s);
}
.notification-message {
@include t.use-typography("body-small");
color: var(--color-foreground-primary);
padding: var(--actionable-padding);
padding-inline-start: var(--sp-l);
}

13
frontend/src/app/main/ui/ds/notifications/toast.scss
View file

@ -9,24 +9,26 @@
@use "../typography.scss" as *;
.toast {
@include use-typography("body-small");
@include use-typography("body-medium");
--toast-bg-color: var(--color-background-primary);
--toast-fg-color: var(--color-foreground-primary);
--toast-border-color: var(--color-background-quaternary);
--toast-padding: var(--sp-l);
--toast-icon-color: var(--color-foreground-secondary);
--toast-icon-margin: var(--sp-xxs);
min-width: $sz-224;
height: $sz-32;
min-inline-size: $sz-224;
max-inline-size: $sz-480;
background-color: var(--toast-bg-color);
border: $b-1 solid var(--toast-border-color);
border-radius: $br-8;
padding: 0 var(--sp-s);
padding: var(--toast-padding);
display: inline-grid;
grid-template-columns: auto 1fr auto;
column-gap: var(--sp-s);
align-items: center;
align-items: flex-start;
color: var(--toast-fg-color);
}
@ -61,6 +63,7 @@
.icon {
color: var(--toast-icon-color);
margin-block-start: var(--toast-icon-margin);
}
.close-button {

2
frontend/src/app/main/ui/ds/typography.scss
View file

@ -92,7 +92,7 @@ $_fs-36: px2rem(36);
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-compact;
line-height: $_font-lineheight-normal;
font-size: $_fs-14;
}