3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 20:58:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update colors for alerts

Browse source
This commit is contained in:
Eva Marco 2024-02-14 17:03:15 +01:00 • committed by Andrey Antukh
parent f91a8b371a
commit de0cd5aa04
14 changed files with 158 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -57,16 +57,19 @@
--la-quaternary: #ff6fe0;
// STATUS COLOR
--status-color-success-50: #f0f8ff;
--status-color-success-200: #a7e8d9;
--status-color-success-500: #2d9f8f;
--status-color-success-950: #0a2927;
--status-color-warning-50: #fff4ed;
--status-color-warning-200: #ffc8a8;
--status-color-warning-500: #fe4811;
--status-color-warning-950: #440806;
--status-color-error-50: #fff0f3;
--status-color-error-200: #ffcada;
--status-color-error-500: #ff3277;
--status-color-error-950: #500124;
--status-color-info-50: #f0f8ff;
--status-color-info-200: #bae3fd;
--status-color-info-500: #0e9be9;
--status-color-info-950: #082c49;
// Status color default will change with theme and will be defined on theme files

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

@ -311,15 +311,30 @@
--modal-separator-backogrund-color: var(--color-background-quaternary);
// ALERTS NOTIFICATION TOAST & STATUS WIDGET
--alert-background-color-success: var(--status-color-success-500);
--alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme
--alert-background-color-warning: var(--status-color-warning-500);
--alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme
--alert-background-color-error: var(--status-color-error-500);
--alert-foreground-color-error: var(--app-white); // We don't want this color to change with theme
--alert-background-color-neutral: var(--color-background-quaternary);
--alert-foreground-color-neutral: var(--color-foreground-secondary);
--alert-foreground-color-neutral-active: var(--color-foreground-primary);
--alert-background-color-success: var(--color-success-background);
--alert-text-foreground-color-success: var(--color-foreground-primary);
--alert-icon-foreground-color-success: var(--color-success-foreground);
--alert-border-color-success: var(--color-success-foreground);
--alert-background-color-warning: var(--color-warning-background);
--alert-text-foreground-color-warning: var(--color-foreground-primary);
--alert-icon-foreground-color-warning: var(--color-warning-foreground);
--alert-border-color-warning: var(--color-warning-foreground);
--alert-background-color-error: var(--color-error-background);
--alert-text-foreground-color-error: var(--color-foreground-primary);
--alert-icon-foreground-color-error: var(--color-error-foreground);
--alert-border-color-error: var(--color-error-foreground);
--alert-background-color-info: var(--color-info-background);
--alert-text-foreground-color-info: var(--color-foreground-primary);
--alert-icon-foreground-color-info: var(--color-info-foreground);
--alert-border-color-info: var(--color-info-foreground);
--alert-background-color-default: var(--color-background-primary);
--alert-text-foreground-color-default: var(--color-foreground-primary);
--alert-icon-foreground-color-default: var(--color-foreground-primary);
--alert-border-color-default: var(--color-background-quaternary);
--notification-background-color-success: var();
--notification-foreground-color-success: var();

12
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -24,6 +24,18 @@
--color-accent-quaternary: var(--da-quaternary);
--color-component-highlight: var(--da-secondary);
--color-success-background: var(--status-color-success-950);
--color-success-foreground: var(--status-color-success-500);
--color-warning-background: var(--status-color-warning-950);
--color-warning-foreground: var(--status-color-warning-500);
--color-error-background: var(--status-color-error-950);
--color-error-foreground: var(--status-color-error-500);
--color-info-background: var(--status-color-info-950);
--color-info-foreground: var(--status-color-info-500);
--overlay-color: var(--db-primary-60);
--shadow-color: var(--db-secondary-30);

13
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -24,6 +24,19 @@
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
--color-success-background: var(--status-color-success-200);
--color-success-foreground: var(--status-color-success-500);
--color-warning-background: var(--status-color-warning-200);
--color-warning-foreground: var(--status-color-warning-500);
--color-error-background: var(--status-color-error-200);
--color-error-foreground: var(--status-color-error-500);
--color-info-background: var(--status-color-info-200);
--color-info-foreground: var(--status-color-info-500);
--overlay-color: var(--lb-primary-60);
--shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;