Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-09 21:41:23 -05:00
Code Issues Activity

💄 Update context variable name on notification components

Browse source
This commit is contained in:
Eva Marco 2024-02-26 16:40:17 +01:00 • committed by Andrey Antukh
parent 27e9a2a7f2
commit c7001fed3c
3 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/app/main/ui/notifications/context_notification.scss
View file

@ -7,60 +7,60 @@
@import "refactor/common-refactor.scss";
.context-notification {
--bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default);
---context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default);
display: grid;
grid-template-columns: $s-16 auto 1fr;
gap: $s-8;
min-height: $s-32;
width: 100%;
padding: $s-8 $s-8 $s-8 $s-16;
border: $s-1 solid var(--border-color);
border: $s-1 solid var(--context-notification-border-color);
border-radius: $br-8;
background-color: var(--bg-color);
background-color: var(--context-notification-bg-color);
}
.warning {
--bg-color: var(--alert-background-color-warning);
--fg-color: var(--alert-text-foreground-color-warning);
--icon-color: var(--alert-icon-foreground-color-warning);
--border-color: var(--alert-border-color-warning);
--context-notification-bg-color: var(--alert-background-color-warning);
--context-notification-fg-color: var(--alert-text-foreground-color-warning);
--context-notification-icon-color: var(--alert-icon-foreground-color-warning);
--context-notification-border-color: var(--alert-border-color-warning);
}
.success {
--bg-color: var(--alert-background-color-success);
--fg-color: var(--alert-text-foreground-color-success);
--icon-color: var(--alert-icon-foreground-color-success);
--border-color: var(--alert-border-color-success);
--context-notification-bg-color: var(--alert-background-color-success);
--context-notification-fg-color: var(--alert-text-foreground-color-success);
--context-notification-icon-color: var(--alert-icon-foreground-color-success);
--context-notification-border-color: var(--alert-border-color-success);
}
.info {
--bg-color: var(--alert-background-color-info);
--fg-color: var(--alert-text-foreground-color-info);
--icon-color: var(--alert-icon-foreground-color-info);
--border-color: var(--alert-border-color-info);
--context-notification-bg-color: var(--alert-background-color-info);
--context-notification-fg-color: var(--alert-text-foreground-color-info);
--context-notification-icon-color: var(--alert-icon-foreground-color-info);
--context-notification-border-color: var(--alert-border-color-info);
}
.default {
--bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default);
--context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default);
}
.error {
--bg-color: var(--alert-background-color-error);
--fg-color: var(--alert-text-foreground-color-error);
--icon-color: var(--alert-icon-foreground-color-error);
--border-color: var(--alert-border-color-error);
--context-notification-bg-color: var(--alert-background-color-error);
--context-notification-fg-color: var(--alert-text-foreground-color-error);
--context-notification-icon-color: var(--alert-icon-foreground-color-error);
--context-notification-border-color: var(--alert-border-color-error);
}
.icon {
@extend .button-icon;
align-self: self-start;
stroke: var(--icon-color);
stroke: var(--context-notification-icon-color);
}
.link-nav {
@ -72,7 +72,7 @@
.context-text {
@include bodyMedTipography;
align-self: center;
color: var(--fg-color);
color: var(--context-notification-fg-color);
margin: auto 0;
}

16
frontend/src/app/main/ui/notifications/inline_notification.scss
View file

@ -7,10 +7,10 @@
@import "refactor/common-refactor.scss";
.inline-notification {
--bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default);
--inline-notification-bg-color: var(--alert-background-color-default);
--inline-notification-fg-color: var(--alert-text-foreground-color-default);
--inline-notification-icon-color: var(--alert-icon-foreground-color-default);
--inline-notification-border-color: var(--alert-border-color-default);
@include alertShadow;
position: absolute;
top: $s-72;
@ -24,17 +24,17 @@
max-width: $s-712;
padding: $s-8 $s-8 $s-8 $s-16;
margin-inline: auto;
border: $s-1 solid var(--border-color);
border: $s-1 solid var(--inline-notification-border-color);
border-radius: $br-8;
z-index: $z-index-modal;
background-color: var(--bg-color);
color: var(--fg-color);
background-color: var(--inline-notification-bg-color);
color: var(--inline-notification-fg-color);
}
.icon {
@extend .button-icon;
height: 100%;
stroke: var(--icon-color);
stroke: var(--inline-notification-icon-color);
}
.inline-text {

50
frontend/src/app/main/ui/notifications/toast_notification.scss
View file

@ -7,10 +7,10 @@
@import "refactor/common-refactor.scss";
.toast-notification {
--bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default);
--toast-notification-bg-color: var(--alert-background-color-default);
--toast-notification-fg-color: var(--alert-text-foreground-color-default);
--toast-notification-icon-color: var(--alert-icon-foreground-color-default);
--toast-notification-border-color: var(--alert-border-color-default);
@include alertShadow;
position: fixed;
top: $s-16;
@ -22,10 +22,10 @@
min-width: $s-500;
max-width: calc(10 * $s-100);
padding: $s-8 $s-8 $s-8 $s-16;
border: $s-1 solid var(--border-color);
background-color: var(--bg-color);
border: $s-1 solid var(--toast-notification-border-color);
background-color: var(--toast-notification-bg-color);
border-radius: $br-8;
color: var(--fg-color);
color: var(--toast-notification-fg-color);
z-index: $z-index-alert;
}
@ -34,17 +34,17 @@
}
.warning {
--bg-color: var(--alert-background-color-warning);
--fg-color: var(--alert-text-foreground-color-warning);
--icon-color: var(--alert-icon-foreground-color-warning);
--border-color: var(--alert-border-color-warning);
--toast-notification-bg-color: var(--alert-background-color-warning);
--toast-notification-fg-color: var(--alert-text-foreground-color-warning);
--toast-notification-icon-color: var(--alert-icon-foreground-color-warning);
--toast-notification-border-color: var(--alert-border-color-warning);
}
.success {
--bg-color: var(--alert-background-color-success);
--fg-color: var(--alert-text-foreground-color-success);
--icon-color: var(--alert-icon-foreground-color-success);
--border-color: var(--alert-border-color-success);
--toast-notification-bg-color: var(--alert-background-color-success);
--toast-notification-fg-color: var(--alert-text-foreground-color-success);
--toast-notification-icon-color: var(--alert-icon-foreground-color-success);
--toast-notification-border-color: var(--alert-border-color-success);
}
.info {
@ -55,17 +55,17 @@
}
.default {
--bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default);
--toast-notification-bg-color: var(--alert-background-color-default);
--toast-notification-fg-color: var(--alert-text-foreground-color-default);
--toast-notification-icon-color: var(--alert-icon-foreground-color-default);
--toast-notification-border-color: var(--alert-border-color-default);
}
.error {
--bg-color: var(--alert-background-color-error);
--fg-color: var(--alert-text-foreground-color-error);
--icon-color: var(--alert-icon-foreground-color-error);
--border-color: var(--alert-border-color-error);
--toast-notification-bg-color: var(--alert-background-color-error);
--toast-notification-fg-color: var(--alert-text-foreground-color-error);
--toast-notification-icon-color: var(--alert-icon-foreground-color-error);
--toast-notification-border-color: var(--alert-border-color-error);
}
.link-nav {
@ -81,7 +81,7 @@
.icon {
@extend .button-icon;
height: 100%;
stroke: var(--icon-color);
stroke: var(--toast-notification-icon-color);
}
.text {
@ -99,5 +99,5 @@
.close-icon {
@extend .button-icon;
stroke: var(--icon-color);
stroke: var(--toast-notification-icon-color);
}