3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 23:56:11 +02:00
Code Issues Projects Releases Packages Wiki 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
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-252: px2rem(252);
$sz-284: px2rem(284); $sz-284: px2rem(284);
$sz-400: px2rem(400); $sz-400: px2rem(400);
$sz-480: px2rem(480);
$sz-964: px2rem(964); $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-500: #2d9f8f;
$green-950: #0a2927; $green-950: #0a2927;
$orange-200: #ffc8a8; $orange-200: #fedeac;
$orange-500: #fe4811; $orange-500: #fe9c07;
$orange-950: #440806; $orange-950: #3d2501;
$red-200: #ffcada; $red-200: #ffcada;
$red-400: #c80857; $red-400: #c80857;

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

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

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

@ -9,24 +9,26 @@
@use "../typography.scss" as *; @use "../typography.scss" as *;
.toast { .toast {
@include use-typography("body-small"); @include use-typography("body-medium");
--toast-bg-color: var(--color-background-primary); --toast-bg-color: var(--color-background-primary);
--toast-fg-color: var(--color-foreground-primary); --toast-fg-color: var(--color-foreground-primary);
--toast-border-color: var(--color-background-quaternary); --toast-border-color: var(--color-background-quaternary);
--toast-padding: var(--sp-l);
--toast-icon-color: var(--color-foreground-secondary); --toast-icon-color: var(--color-foreground-secondary);
--toast-icon-margin: var(--sp-xxs);
min-width: $sz-224; min-inline-size: $sz-224;
height: $sz-32; max-inline-size: $sz-480;
background-color: var(--toast-bg-color); background-color: var(--toast-bg-color);
border: $b-1 solid var(--toast-border-color); border: $b-1 solid var(--toast-border-color);
border-radius: $br-8; border-radius: $br-8;
padding: 0 var(--sp-s); padding: var(--toast-padding);
display: inline-grid; display: inline-grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
column-gap: var(--sp-s); column-gap: var(--sp-s);
align-items: center; align-items: flex-start;
color: var(--toast-fg-color); color: var(--toast-fg-color);
} }
@ -61,6 +63,7 @@
.icon { .icon {
color: var(--toast-icon-color); color: var(--toast-icon-color);
margin-block-start: var(--toast-icon-margin);
} }
.close-button { .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-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: $_font-weight-regular; font-weight: $_font-weight-regular;
line-height: $_font-lineheight-compact; line-height: $_font-lineheight-normal;
font-size: $_fs-14; font-size: $_fs-14;
} }