3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 13:06:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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"; @import "refactor/common-refactor.scss";
.context-notification { .context-notification {
--bg-color: var(--alert-background-color-default); ---context-notification-bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default); --context-notification-fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default); --context-notification-icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default); --context-notification-border-color: var(--alert-border-color-default);
display: grid; display: grid;
grid-template-columns: $s-16 auto 1fr; grid-template-columns: $s-16 auto 1fr;
gap: $s-8; gap: $s-8;
min-height: $s-32; min-height: $s-32;
width: 100%; width: 100%;
padding: $s-8 $s-8 $s-8 $s-16; 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; border-radius: $br-8;
background-color: var(--bg-color); background-color: var(--context-notification-bg-color);
} }
.warning { .warning {
--bg-color: var(--alert-background-color-warning); --context-notification-bg-color: var(--alert-background-color-warning);
--fg-color: var(--alert-text-foreground-color-warning); --context-notification-fg-color: var(--alert-text-foreground-color-warning);
--icon-color: var(--alert-icon-foreground-color-warning); --context-notification-icon-color: var(--alert-icon-foreground-color-warning);
--border-color: var(--alert-border-color-warning); --context-notification-border-color: var(--alert-border-color-warning);
} }
.success { .success {
--bg-color: var(--alert-background-color-success); --context-notification-bg-color: var(--alert-background-color-success);
--fg-color: var(--alert-text-foreground-color-success); --context-notification-fg-color: var(--alert-text-foreground-color-success);
--icon-color: var(--alert-icon-foreground-color-success); --context-notification-icon-color: var(--alert-icon-foreground-color-success);
--border-color: var(--alert-border-color-success); --context-notification-border-color: var(--alert-border-color-success);
} }
.info { .info {
--bg-color: var(--alert-background-color-info); --context-notification-bg-color: var(--alert-background-color-info);
--fg-color: var(--alert-text-foreground-color-info); --context-notification-fg-color: var(--alert-text-foreground-color-info);
--icon-color: var(--alert-icon-foreground-color-info); --context-notification-icon-color: var(--alert-icon-foreground-color-info);
--border-color: var(--alert-border-color-info); --context-notification-border-color: var(--alert-border-color-info);
} }
.default { .default {
--bg-color: var(--alert-background-color-default); --context-notification-bg-color: var(--alert-background-color-default);
--fg-color: var(--alert-text-foreground-color-default); --context-notification-fg-color: var(--alert-text-foreground-color-default);
--icon-color: var(--alert-icon-foreground-color-default); --context-notification-icon-color: var(--alert-icon-foreground-color-default);
--border-color: var(--alert-border-color-default); --context-notification-border-color: var(--alert-border-color-default);
} }
.error { .error {
--bg-color: var(--alert-background-color-error); --context-notification-bg-color: var(--alert-background-color-error);
--fg-color: var(--alert-text-foreground-color-error); --context-notification-fg-color: var(--alert-text-foreground-color-error);
--icon-color: var(--alert-icon-foreground-color-error); --context-notification-icon-color: var(--alert-icon-foreground-color-error);
--border-color: var(--alert-border-color-error); --context-notification-border-color: var(--alert-border-color-error);
} }
.icon { .icon {
@extend .button-icon; @extend .button-icon;
align-self: self-start; align-self: self-start;
stroke: var(--icon-color); stroke: var(--context-notification-icon-color);
} }
.link-nav { .link-nav {
@ -72,7 +72,7 @@
.context-text { .context-text {
@include bodyMedTipography; @include bodyMedTipography;
align-self: center; align-self: center;
color: var(--fg-color); color: var(--context-notification-fg-color);
margin: auto 0; margin: auto 0;
} }

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

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

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

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