@uzum-tech/ui 1.8.1 → 1.8.2

package/es/notification/src/NotificationProvider.d.ts

@@ -77,6 +77,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -88,6 +90,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -99,6 +103,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -110,6 +116,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -121,6 +129,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -132,6 +142,8 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -168,6 +180,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -179,6 +193,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -190,6 +206,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -201,6 +219,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -212,6 +232,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -223,6 +245,8 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -259,6 +283,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -270,6 +296,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -281,6 +309,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -292,6 +322,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -303,6 +335,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -314,6 +348,8 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -365,6 +401,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -376,6 +414,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -387,6 +427,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -398,6 +440,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -409,6 +453,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -420,6 +466,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -456,6 +504,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -467,6 +517,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -478,6 +530,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -489,6 +543,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -500,6 +556,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -511,6 +569,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -547,6 +607,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -558,6 +620,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -569,6 +633,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -580,6 +646,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -591,6 +659,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -602,6 +672,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -690,6 +762,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -701,6 +775,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -712,6 +788,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -723,6 +801,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -734,6 +814,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -745,6 +827,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -781,6 +865,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -792,6 +878,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -803,6 +891,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -814,6 +904,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -825,6 +917,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -836,6 +930,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
@@ -872,6 +968,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -883,6 +981,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -894,6 +994,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -905,6 +1007,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -916,6 +1020,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -927,6 +1033,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;

package/es/notification/src/styles/index.cssr.js

@@ -129,6 +129,8 @@ export default c([cB('notification-container', `
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
+ padding-top: var(--u-padding-top);
+ padding-bottom: var(--u-padding-bottom);
  padding-left: var(--u-padding-left);
  padding-right: var(--u-padding-right);
  width: var(--u-width);
@@ -138,12 +140,14 @@ export default c([cB('notification-container', `
  border-radius: var(--u-border-radius);
  box-sizing: border-box;
  opacity: 1;
- `, [cE('avatar', [cB('icon', {
+ box-shadow: 0 0 20px 0 rgba(68, 83, 113, 0.10), 0 12px 20px 0 rgba(68, 83, 113, 0.05);
+ `, [cE('avatar', [cB('icon-wrapper', `
+ `), cB('icon', {
   color: 'var(--u-icon-color)'
 }), cB('base-icon', {
   color: 'var(--u-icon-color)'
 })]), cM('show-avatar', [cB('notification-main', `
- margin-left: calc(var(--u-avatar-size) + 16px);
+ margin-left: 16px;
  width: calc(100% - var(--u-avatar-size) + 16px); 
  `)]), cM('closable', [cB('notification-main', [c('> *:first-child', `
  padding-right: var(--u-close-size);
@@ -156,9 +160,7 @@ export default c([cB('notification-container', `
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
  `)]), cE('avatar', `
- position: absolute;
- top: var(--u-padding-top);
- left: var(--u-padding-left);
+ position: relative;
  width: var(--u-avatar-size);
  height: var(--u-avatar-size);
  font-size: var(--u-avatar-size);
@@ -166,18 +168,18 @@ export default c([cB('notification-container', `
  align-items: center;
  justify-content: center;
  `, [cB('icon', 'transition: color .3s var(--u-bezier);')]), cB('notification-main', `
- padding-top: var(--u-padding-top);
- padding-bottom: var(--u-padding-bottom);
+ padding-top: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  width: calc(100% - 8px);
+ justify-content: center;
  `, [cB('notification-main-footer', `
  display: flex;
  align-items: center;
  justify-content: space-between;
- margin-top: 12px;
+ margin-top: 8px;
  `, [cE('meta', `
  font-size: var(--u-meta-font-size);
  transition: color .3s var(--u-bezier-ease-out);
@@ -186,6 +188,8 @@ export default c([cB('notification-container', `
  cursor: pointer;
  transition: color .3s var(--u-bezier-ease-out);
  color: var(--u-action-text-color);
+ width: 100%;
+ margin-top: 16px;
  `)]), cE('header', `
  font-weight: var(--u-title-font-weight);
  font-size: var(--u-title-font-size);

package/es/notification/styles/light.d.ts

@@ -26,6 +26,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColor: string;
     descriptionTextColor: string;
     actionTextColor: string;
+    iconWrapperColor: string;
+    iconWrapperPulseColor: string;
     colorSuccess: string;
     iconColorSuccess: string;
     textColorSuccess: string;
@@ -37,6 +39,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColorSuccess: string;
     descriptionTextColorSuccess: string;
     actionTextColorSuccess: string;
+    iconWrapperColorSuccess: string;
+    iconWrapperPulseColorSuccess: string;
     colorInfo: string;
     iconColorInfo: string;
     textColorInfo: string;
@@ -48,6 +52,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColorInfo: string;
     descriptionTextColorInfo: string;
     actionTextColorInfo: string;
+    iconWrapperColorInfo: string;
+    iconWrapperPulseColorInfo: string;
     colorWarning: string;
     iconColorWarning: string;
     textColorWarning: string;
@@ -59,6 +65,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColorWarning: string;
     descriptionTextColorWarning: string;
     actionTextColorWarning: string;
+    iconWrapperColorWarning: string;
+    iconWrapperPulseColorWarning: string;
     colorError: string;
     iconColorError: string;
     textColorError: string;
@@ -70,6 +78,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColorError: string;
     descriptionTextColorError: string;
     actionTextColorError: string;
+    iconWrapperColorError: string;
+    iconWrapperPulseColorError: string;
     colorPrimary: string;
     iconColorPrimary: string;
     textColorPrimary: string;
@@ -81,6 +91,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     titleTextColorPrimary: string;
     descriptionTextColorPrimary: string;
     actionTextColorPrimary: string;
+    iconWrapperColorPrimary: string;
+    iconWrapperPulseColorPrimary: string;
     width: string;
     padding: string;
     closeBorderRadius: string;
@@ -113,6 +125,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColor: string;
     descriptionTextColor: string;
     actionTextColor: string;
+    iconWrapperColor: string;
+    iconWrapperPulseColor: string;
     colorSuccess: string;
     iconColorSuccess: string;
     textColorSuccess: string;
@@ -124,6 +138,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColorSuccess: string;
     descriptionTextColorSuccess: string;
     actionTextColorSuccess: string;
+    iconWrapperColorSuccess: string;
+    iconWrapperPulseColorSuccess: string;
     colorInfo: string;
     iconColorInfo: string;
     textColorInfo: string;
@@ -135,6 +151,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColorInfo: string;
     descriptionTextColorInfo: string;
     actionTextColorInfo: string;
+    iconWrapperColorInfo: string;
+    iconWrapperPulseColorInfo: string;
     colorWarning: string;
     iconColorWarning: string;
     textColorWarning: string;
@@ -146,6 +164,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColorWarning: string;
     descriptionTextColorWarning: string;
     actionTextColorWarning: string;
+    iconWrapperColorWarning: string;
+    iconWrapperPulseColorWarning: string;
     colorError: string;
     iconColorError: string;
     textColorError: string;
@@ -157,6 +177,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColorError: string;
     descriptionTextColorError: string;
     actionTextColorError: string;
+    iconWrapperColorError: string;
+    iconWrapperPulseColorError: string;
     colorPrimary: string;
     iconColorPrimary: string;
     textColorPrimary: string;
@@ -168,6 +190,8 @@ declare const notificationLight: import("../../_mixins").Theme<"Notification", {
     titleTextColorPrimary: string;
     descriptionTextColorPrimary: string;
     actionTextColorPrimary: string;
+    iconWrapperColorPrimary: string;
+    iconWrapperPulseColorPrimary: string;
     width: string;
     padding: string;
     closeBorderRadius: string;

package/es/notification/styles/light.js

@@ -2,21 +2,22 @@ import { scrollbarLight } from '../../_internal/scrollbar/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 import commonVars from './_common';
+import derived from '../../_styles/common/light';
 export const self = (vars) => {
-    const { fontWeightStrong, lineHeightBodyMedium, fontBodyLarge, fontBodyMedium, borderRadiusLarge, closeMedium, iconMedium, fontWeight, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, staticGreen, brandPrimary500, brandSecondary600, staticRed, elementsTertiary, textPrimary, transparencySecondary, transparencyPrimary } = vars;
-    return Object.assign(Object.assign({}, commonVars), { lineHeight: lineHeightBodyMedium, fontSize: fontBodyMedium, fontWeight, descriptionFontWeight: fontWeight, descriptionLineHeight: lineHeightBodyMedium, descriptionFontSize: fontBodyMedium, titleFontSize: fontBodyLarge, titleLineHeight: lineHeightBodyMedium, titleFontWeight: fontWeightStrong, metaFontSize: fontBodyMedium, borderRadius: borderRadiusLarge, closeSize: closeMedium, closeIconSize: iconMedium, avatarSize: iconMedium, closeMargin: '12px', 
+    const { fontWeightStrong, lineHeightBodyMedium, fontBodyLarge, fontBodyMedium, borderRadiusLarge, closeMedium, iconMedium, iconLarge, fontWeight, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, staticGreen, brandPrimary500, brandSecondary600, staticRed, elementsQuinary, transparencySecondary, transparencyPrimary, elementsDarkQuinary } = vars;
+    return Object.assign(Object.assign({}, commonVars), { lineHeight: lineHeightBodyMedium, fontSize: fontBodyMedium, fontWeight, descriptionFontWeight: fontWeight, descriptionLineHeight: lineHeightBodyMedium, descriptionFontSize: fontBodyMedium, titleFontSize: fontBodyLarge, titleLineHeight: lineHeightBodyMedium, titleFontWeight: fontWeightStrong, metaFontSize: fontBodyMedium, borderRadius: borderRadiusLarge, closeSize: closeMedium, closeIconSize: iconMedium, avatarSize: iconLarge, closeMargin: '12px', 
         // Default
-        color: staticBlack, iconColor: staticWhite, textColor: staticWhite, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, titleTextColor: staticWhite, descriptionTextColor: staticWhite, actionTextColor: staticWhite, 
+        color: staticWhite, iconColor: elementsDarkQuinary, textColor: staticBlack, closeIconColor: staticBlack, closeIconColorHover: staticBlack, closeIconColorPressed: staticBlack, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, titleTextColor: staticBlack, descriptionTextColor: staticBlack, actionTextColor: staticBlack, iconWrapperColor: 'rgb(16 16 16 / 8%)', iconWrapperPulseColor: 'rgb(16 16 16 / 4%)', 
         // Success
-        colorSuccess: staticGreen, iconColorSuccess: staticWhite, textColorSuccess: staticWhite, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, titleTextColorSuccess: staticWhite, descriptionTextColorSuccess: staticWhite, actionTextColorSuccess: staticWhite, 
+        colorSuccess: staticWhite, iconColorSuccess: staticGreen, textColorSuccess: staticBlack, closeIconColorSuccess: staticBlack, closeIconColorHoverSuccess: staticBlack, closeIconColorPressedSuccess: staticBlack, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, titleTextColorSuccess: staticBlack, descriptionTextColorSuccess: staticBlack, actionTextColorSuccess: staticBlack, iconWrapperColorSuccess: derived.brandTertiary300, iconWrapperPulseColorSuccess: derived.brand350, 
         // Info
-        colorInfo: elementsTertiary, iconColorInfo: textPrimary, textColorInfo: textPrimary, closeIconColorInfo: textPrimary, closeIconColorHoverInfo: textPrimary, closeIconColorPressedInfo: textPrimary, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, titleTextColorInfo: textPrimary, descriptionTextColorInfo: textPrimary, actionTextColorInfo: textPrimary, 
+        colorInfo: staticWhite, iconColorInfo: elementsQuinary, textColorInfo: staticBlack, closeIconColorInfo: staticBlack, closeIconColorHoverInfo: staticBlack, closeIconColorPressedInfo: staticBlack, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, titleTextColorInfo: staticBlack, descriptionTextColorInfo: staticBlack, actionTextColorInfo: staticBlack, iconWrapperColorInfo: 'rgb(197 199 202 / 36%)', iconWrapperPulseColorInfo: 'rgb(197 199 202 / 14%)', 
         // Warning
-        colorWarning: brandSecondary600, iconColorWarning: staticBlack, textColorWarning: staticBlack, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, titleTextColorWarning: staticBlack, descriptionTextColorWarning: staticBlack, actionTextColorWarning: staticBlack, 
+        colorWarning: staticWhite, iconColorWarning: brandSecondary600, textColorWarning: staticBlack, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, titleTextColorWarning: staticBlack, descriptionTextColorWarning: staticBlack, actionTextColorWarning: staticBlack, iconWrapperColorWarning: 'rgb(249 222 109 / 28%)', iconWrapperPulseColorWarning: 'rgb(249 222 109 / 18%)', 
         // Error
-        colorError: staticRed, iconColorError: staticWhite, textColorError: staticWhite, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, titleTextColorError: staticWhite, descriptionTextColorError: staticWhite, actionTextColorError: staticWhite, 
+        colorError: staticWhite, iconColorError: staticRed, textColorError: staticBlack, closeIconColorError: staticBlack, closeIconColorHoverError: staticBlack, closeIconColorPressedError: staticBlack, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, titleTextColorError: staticBlack, descriptionTextColorError: staticBlack, actionTextColorError: staticBlack, iconWrapperColorError: derived.brandQuinary100, iconWrapperPulseColorError: derived.brand550, 
         // Primary
-        colorPrimary: brandPrimary500, iconColorPrimary: staticWhite, textColorPrimary: staticWhite, closeIconColorPrimary: staticWhite, closeIconColorHoverPrimary: staticWhite, closeIconColorPressedPrimary: staticWhite, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, titleTextColorPrimary: staticWhite, descriptionTextColorPrimary: staticWhite, actionTextColorPrimary: staticWhite });
+        colorPrimary: staticWhite, iconColorPrimary: brandPrimary500, textColorPrimary: staticBlack, closeIconColorPrimary: staticBlack, closeIconColorHoverPrimary: staticBlack, closeIconColorPressedPrimary: staticBlack, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, titleTextColorPrimary: staticBlack, descriptionTextColorPrimary: staticBlack, actionTextColorPrimary: staticBlack, iconWrapperColorPrimary: derived.brandPrimary100, iconWrapperPulseColorPrimary: derived.brandPrimary50 });
 };
 const notificationLight = createTheme({
     name: 'Notification',