Skip to content

Commit

Permalink
feat(toaster): implementa definições do AnimaliaDS
Browse files Browse the repository at this point in the history 
Implementa customização via design-tokens definidos pelo AnimaliaDS

Fixes DTHFUI-7910
  • Loading branch information
@anliben
anliben committed Dec 29, 2023
1 parent 5cd8471 commit 2d85e4a
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 58 deletions.
76 changes: 37 additions & 39 deletions src/css/services/po-notification/po-toaster/po-toaster.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ po-toaster {
}

.po-toaster {
border-radius: 4px;
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius);
box-shadow: var(--shadow);

border-width: 1px;
border-width: var(--border-width-sm);
border-style: solid;

display: flex;
Expand Down Expand Up @@ -50,7 +50,7 @@ po-toaster {
}

.po-toaster-icon {
padding: 1rem;
padding: var(--spacing-sm);
}

.po-toaster-icon po-icon {
Expand All @@ -62,10 +62,7 @@ po-toaster {
.po-toaster-message {
@apply --font-toaster-message;

padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
padding: var(--spacing-sm);
flex-grow: 1;
flex-wrap: wrap;
align-items: center;
Expand All @@ -90,19 +87,19 @@ po-toaster {
}

.po-toaster-close {
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-top: var(--spacing-xs);
padding-right: var(--spacing-xs);
padding-bottom: var(--spacing-xs);

display: flex;
}

.po-toaster-divider {
margin-left: 0.25rem;
margin-right: 0.25rem;
border-width: 1px;
border-width: var(--border-width-sm);
border-style: solid;
width: auto;
width: 100%;
}

.po-toaster-button-close po-icon {
Expand All @@ -112,63 +109,59 @@ po-toaster {
}

.po-toaster-success {
background-color: var(--color-toaster-background-color-success);
border-color: var(--color-toaster-border-color-success);
background-color: var(--color-toaster-background-color-success, var(--background-success));
border-color: var(--color-toaster-border-color-success, var(--border-color-success));
}

.po-toaster-success .po-toaster-icon {
background-color: var(--color-toaster-icon-background-color-success);
color: var(--color-toaster-icon-color-success);
background-color: var(--color-toaster-icon-background-color-success, var(--color-success));
color: var(--color-toaster-icon-color-success, var(--color-icon));
}

.po-toaster-success .po-toaster-divider {
background-color: var(--color-toaster-border-color-success);
border-color: var(--color-toaster-border-color-success);
border-color: var(--color-toaster-border-color-success, var(--border-color-success));
}

.po-toaster-error {
background-color: var(--color-toaster-background-color-error);
border-color: var(--color-toaster-border-color-error);
background-color: var(--color-toaster-background-color-error, var(--background-error));
border-color: var(--color-toaster-border-color-error, var(--border-color-error));
}

.po-toaster-error .po-toaster-icon {
background-color: var(--color-toaster-icon-background-color-error);
color: var(--color-toaster-icon-color-error);
background-color: var(--color-toaster-icon-background-color-error, var(--color-error));
color: var(--color-toaster-icon-color-error, var(--color-icon));
}

.po-toaster-error .po-toaster-divider {
background-color: var(--color-toaster-border-color-error);
border-color: var(--color-toaster-border-color-error);
border-color: var(--color-toaster-border-color-error, var(--border-color-error));
}

.po-toaster-warning {
background-color: var(--color-toaster-background-color-warning);
border-color: var(--color-toaster-border-color-warning);
background-color: var(--color-toaster-background-color-warning, var(--background-warning));
border-color: var(--color-toaster-border-color-warning, var(--border-color-warning));
}

.po-toaster-warning .po-toaster-icon {
background-color: var(--color-toaster-icon-background-color-warning);
color: var(--color-toaster-icon-color-warning);
background-color: var(--color-toaster-icon-background-color-warning, var(--color-warning));
color: var(--color-toaster-icon-color-warning, var(--color-icon-warning));
}

.po-toaster-warning .po-toaster-divider {
background-color: var(--color-toaster-border-color-warning);
border-color: var(--color-toaster-border-color-warning);
border-color: var(--color-toaster-border-color-warning, var(--border-color-warning));
}

.po-toaster-info {
background-color: var(--color-toaster-background-color-info);
border-color: var(--color-toaster-border-color-info);
background-color: var(--color-toaster-background-color-info, var(--background-info));
border-color: var(--color-toaster-border-color-info, var(--border-color-info));
}

.po-toaster-info .po-toaster-icon {
background-color: var(--color-toaster-icon-background-color-info);
color: var(--color-toaster-icon-color-info);
background-color: var(--color-toaster-icon-background-color-info, var(--color-info));
color: var(--color-toaster-icon-color-info, var(--color-icon));
}

.po-toaster-info .po-toaster-divider {
background-color: var(--color-toaster-border-color-info);
border-color: var(--color-toaster-border-color-info);
border-color: var(--color-toaster-border-color-info, var(--border-color-info));
}

.po-toaster-row {
Expand All @@ -179,18 +172,23 @@ po-toaster {
.po-toaster {
width: 90%;
}

.po-toaster-icon {
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: var(--spacing-xs);
padding-left: var(--spacing-xs);
}

.po-toaster-message {
padding-bottom: 0rem;
padding-right: var(--spacing-xs);
padding-left: var(--spacing-xs);
}

.po-toaster-actions {
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-bottom: 0.5rem;
margin-top: var(--spacing-xs);

display: inline-block;
}
Expand Down
74 changes: 55 additions & 19 deletions src/css/themes/po-theme-default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1759,39 +1759,75 @@ po-widget {
/*------------------------------------*\
SERVICES
\*------------------------------------*/
:root {
/*------------------------------------*\
TOASTER

/*------------------------------------*\
TOASTER
\*------------------------------------*/
po-toaster {
--border-radius: var(--border-radius-md);
--color-icon: var(--color-neutral-light-00);
--shadow: var(--shadow-lg);

/* Success */
--color-success: var(--color-feedback-positive-base);
--background-success: var(--color-feedback-positive-lightest);
--border-color-success: var(--color-feedback-positive-lighter);

/* Error */
--color-error: var(--color-feedback-negative-base);
--background-error: var(--color-feedback-negative-lightest);
--border-color-error: var(--color-feedback-negative-lighter);

/* Warning */
--color-warning: var(--color-feedback-warning-base);
--color-icon-warning: var(--color-neutral-dark-90);
--background-warning: var(--color-feedback-warning-lightest);
--border-color-warning: var(--color-feedback-warning-lighter);

/* Info */
--color-info: var(--color-feedback-info-base);
--background-info: var(--color-feedback-info-lightest);
--border-color-info: var(--color-feedback-info-lighter);
}

:root {
/**
* Toaster Item Success
*/
--color-toaster-background-color-success: var(--color-feedback-positive-lightest);
--color-toaster-border-color-success: var(--color-feedback-positive-lighter);
--color-toaster-icon-background-color-success: var(--color-feedback-positive-base);
--color-toaster-icon-color-success: var(--color-neutral-light-00);
--color-toaster-background-color-success: var(
--background-success
); /*Deprecated v18.x.x utilizar --background-success*/
--color-toaster-border-color-success: var(
--border-color-success
); /*Deprecated v18.x.x utilizar --border-color-success*/
--color-toaster-icon-background-color-success: var(--color-success); /*Deprecated v18.x.x utilizar --color-success*/
--color-toaster-icon-color-success: var(--color-icon); /*Deprecated v18.x.x utilizar --color-icon*/

/**
* Toaster Item Warning
*/
--color-toaster-background-color-warning: var(--color-feedback-warning-lightest);
--color-toaster-border-color-warning: var(--color-feedback-warning-lighter);
--color-toaster-icon-background-color-warning: var(--color-feedback-warning-base);
--color-toaster-icon-color-warning: var(--color-neutral-dark-90);
--color-toaster-background-color-warning: var(
--background-warning
); /*Deprecated v18.x.x utilizar --background-warning*/
--color-toaster-border-color-warning: var(
--border-color-warning
); /*Deprecated v18.x.x utilizar --border-color-warning*/
--color-toaster-icon-background-color-warning: var(--color-warning); /*Deprecated v18.x.x utilizar --color-warning*/
--color-toaster-icon-color-warning: var(--color-icon-warning); /*Deprecated v18.x.x utilizar --color-icon-warning*/

/**
* Toaster Item Error
*/
--color-toaster-background-color-error: var(--color-feedback-negative-lightest);
--color-toaster-border-color-error: var(--color-feedback-negative-lighter);
--color-toaster-icon-background-color-error: var(--color-feedback-negative-base);
--color-toaster-icon-color-error: var(--color-neutral-light-00);
--color-toaster-background-color-error: var(--background-error); /*Deprecated v18.x.x utilizar --background-error*/
--color-toaster-border-color-error: var(--border-color-error); /*Deprecated v18.x.x utilizar --border-color-error*/
--color-toaster-icon-background-color-error: var(--color-error); /*Deprecated v18.x.x utilizar --color-error*/
--color-toaster-icon-color-error: var(--color-icon); /*Deprecated v18.x.x utilizar --color-icon*/

/**
* Toaster Item Info
*/
--color-toaster-background-color-info: var(--color-feedback-info-lightest);
--color-toaster-border-color-info: var(--color-feedback-info-lighter);
--color-toaster-icon-background-color-info: var(--color-feedback-info-base);
--color-toaster-icon-color-info: var(--color-neutral-light-00);
--color-toaster-background-color-info: var(--background-info); /*Deprecated v18.x.x utilizar --background-info*/
--color-toaster-border-color-info: var(--border-color-info); /*Deprecated v18.x.x utilizar --border-color-info*/
--color-toaster-icon-background-color-info: var(--color-info); /*Deprecated v18.x.x utilizar --color-info*/
--color-toaster-icon-color-info: var(--color-icon); /*Deprecated v18.x.x utilizar --color-icon*/
}

0 comments on commit 2d85e4a

Please sign in to comment.