@pingux/astro 2.138.0-alpha.3 → 2.138.0-alpha.4

package/lib/cjs/components/Text/Text.styles.js

@@ -248,6 +248,7 @@ var text = _objectSpread(_objectSpread(_objectSpread({
   textEllipsis: textEllipsis,
   title: title,
   copyRightText: copyRightText,
-  attachmentTitle: attachmentTitle
+  attachmentTitle: attachmentTitle,
+  messagesText: _objectSpread({}, base)
 });
 exports.text = text;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -252,6 +252,26 @@ declare const buttons: {
                 };
             };
         };
+        messageCloseButton: {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
     };
 };
 export default buttons;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -66,6 +66,11 @@ var iconButtons = {
     '&.is-hovered': {
       backgroundColor: 'gray-700'
     }
+  }),
+  messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-hovered': {
+      backgroundColor: '#455469'
+    }
   })
 };
 var buttons = {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/message.d.ts

@@ -45,6 +45,12 @@ export declare const message: {
                 fill: string;
             };
         };
+        '&.is-default, > button > svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
         '&.is-error': {
             borderLeftColor: string;
         };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/message.js

@@ -10,7 +10,7 @@ var message = {
     backgroundColor: 'background.secondary',
     color: 'white !important',
     '> span': {
-      color: 'text.message'
+      color: 'white !important'
     },
     '&.is-success': {
       bg: 'background.secondary',
@@ -52,6 +52,12 @@ var message = {
         fill: 'text.message'
       }
     },
+    '&.is-default, > button > svg': {
+      color: 'white !important',
+      path: {
+        fill: 'text.message'
+      }
+    },
     '&.is-error': {
       borderLeftColor: 'red-500'
     }

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts

@@ -19,4 +19,11 @@ export declare const text: {
         color: string;
         fontWeight: number;
     };
+    messagesText: {
+        '&.is-success, &.is-warning, &.is-error, &.is-default': {
+            '& > a': {
+                color: string;
+            };
+        };
+    };
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -25,6 +25,13 @@ var text = {
   placeholder: {
     color: 'gray-400',
     fontWeight: 1
+  },
+  messagesText: {
+    '&.is-success, &.is-warning, &.is-error, &.is-default': {
+      '& > a': {
+        color: 'white'
+      }
+    }
   }
 };
 exports.text = text;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -116,6 +116,12 @@ declare const _default: {
                     fill: string;
                 };
             };
+            '&.is-default, > button > svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
             '&.is-error': {
                 borderLeftColor: string;
             };

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1198,6 +1198,17 @@ declare const _default: {
                 };
             };
             messageCloseButton: {
+                minWidth: string;
+                width: string;
+                height: string;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                    path: {
+                        fill: string;
+                    };
+                };
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -1763,6 +1774,16 @@ declare const _default: {
             fontSize: string;
             fontWeight: number;
         };
+        messagesText: {
+            '&.is-success, &.is-warning, &.is-error, &.is-default': {
+                color: string;
+                '& > a': {
+                    fontWeight: string;
+                    textDecoration: string;
+                    color: string;
+                };
+            };
+        };
         h1: {
             fontSize: string;
             fontWeight: number;
@@ -3489,6 +3510,9 @@ declare const _default: {
             };
         };
         message: {
+            wrapper: {
+                gap: string;
+            };
             item: {
                 maxWidth: number;
                 pointerEvents: string;
@@ -3502,7 +3526,20 @@ declare const _default: {
                 borderLeftColor: string;
                 color: string;
                 fontSize: string;
+                lineHeight: string;
                 borderRadius: number;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                    color: string;
+                    path: {
+                        fill: string;
+                        transform: string;
+                        transformOrigin: string;
+                    };
+                    alignSelf: string;
+                };
                 '&.is-success': {
                     bg: string;
                     borderLeftColor: string;
@@ -3515,7 +3552,6 @@ declare const _default: {
                 };
                 '&.is-error, > .is-error': {
                     bg: string;
-                    color: string;
                 };
                 '&.is-error, > button > svg': {
                     color: string;

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -942,6 +942,17 @@ declare const buttons: {
             };
         };
         messageCloseButton: {
+            minWidth: string;
+            width: string;
+            height: string;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+                path: {
+                    fill: string;
+                };
+            };
             cursor: string;
             transition: string;
             outline: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -452,7 +452,19 @@ var iconButtons = {
       }
     }, transitions)
   },
-  messageCloseButton: _objectSpread({}, baseIconButton),
+  messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    minWidth: '28px',
+    width: '28px',
+    height: '28px',
+    '& > svg': {
+      minWidth: '18px',
+      width: '18px',
+      height: '18px',
+      path: {
+        fill: '#455469 !important'
+      }
+    }
+  }),
   headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     borderRadius: '4px',
     path: {

package/lib/cjs/styles/themes/next-gen/variants/messages.d.ts

@@ -1,4 +1,7 @@
 export declare const message: {
+    wrapper: {
+        gap: string;
+    };
     item: {
         maxWidth: number;
         pointerEvents: string;
@@ -12,7 +15,20 @@ export declare const message: {
         borderLeftColor: string;
         color: string;
         fontSize: string;
+        lineHeight: string;
         borderRadius: number;
+        '& > svg': {
+            minWidth: string;
+            width: string;
+            height: string;
+            color: string;
+            path: {
+                fill: string;
+                transform: string;
+                transformOrigin: string;
+            };
+            alignSelf: string;
+        };
         '&.is-success': {
             bg: string;
             borderLeftColor: string;
@@ -25,7 +41,6 @@ export declare const message: {
         };
         '&.is-error, > .is-error': {
             bg: string;
-            color: string;
         };
         '&.is-error, > button > svg': {
             color: string;

package/lib/cjs/styles/themes/next-gen/variants/messages.js

@@ -6,38 +6,53 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.message = void 0;
 var message = {
+  wrapper: {
+    gap: 'md'
+  },
   item: {
     maxWidth: 400,
     pointerEvents: 'all',
-    mb: 'md',
-    p: '1.25rem',
+    mb: '0',
+    p: '20px 16px 20px 20px',
     wordBreak: 'break-word',
     alignItems: 'center',
     backgroundColor: 'blue-100',
     borderLeftWidth: '5px',
     borderLeftStyle: 'solid',
-    borderLeftColor: 'teal-500',
-    color: 'text.message',
+    borderLeftColor: 'blue',
+    color: 'gray-700',
     fontSize: '15px !important',
+    lineHeight: '1.3',
     borderRadius: 4,
+    '& > svg': {
+      minWidth: '20px',
+      width: '20px',
+      height: '20px',
+      color: 'gray-700',
+      path: {
+        fill: 'gray-700',
+        transform: 'scale(0.96)',
+        transformOrigin: 'center'
+      },
+      alignSelf: 'start'
+    },
     '&.is-success': {
       bg: 'green-100',
       borderLeftColor: 'green-500',
-      color: 'text.message'
+      color: 'gray-700'
     },
     '&.is-warning': {
       bg: 'warning.light',
       borderLeftColor: 'yellow-500',
-      color: 'text.message'
+      color: 'gray-700 '
     },
     '&.is-error, > .is-error': {
-      bg: 'red-100',
-      color: 'text.message'
+      bg: 'red-100'
     },
     '&.is-error, > button > svg': {
-      color: 'text.message !important',
+      color: 'gray-700 !important',
       path: {
-        fill: 'text.message'
+        fill: 'gray-700'
       }
     },
     '&.is-error': {

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -5,6 +5,16 @@ export declare const text: {
         fontSize: string;
         fontWeight: number;
     };
+    messagesText: {
+        '&.is-success, &.is-warning, &.is-error, &.is-default': {
+            color: string;
+            '& > a': {
+                fontWeight: string;
+                textDecoration: string;
+                color: string;
+            };
+        };
+    };
     h1: {
         fontSize: string;
         fontWeight: number;

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -124,6 +124,16 @@ var text = _objectSpread(_objectSpread({
     color: 'text.primary',
     fontSize: 'lg',
     fontWeight: 2
+  },
+  messagesText: {
+    '&.is-success, &.is-warning, &.is-error, &.is-default': {
+      color: 'gray-700',
+      '& > a': {
+        fontWeight: '600',
+        textDecoration: 'underline',
+        color: 'gray-700'
+      }
+    }
   }
 });
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -161,6 +161,9 @@ declare const _default: {
         };
     };
     message: {
+        wrapper: {
+            gap: string;
+        };
         item: {
             maxWidth: number;
             pointerEvents: string;
@@ -174,7 +177,20 @@ declare const _default: {
             borderLeftColor: string;
             color: string;
             fontSize: string;
+            lineHeight: string;
             borderRadius: number;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+                color: string;
+                path: {
+                    fill: string;
+                    transform: string;
+                    transformOrigin: string;
+                };
+                alignSelf: string;
+            };
             '&.is-success': {
                 bg: string;
                 borderLeftColor: string;
@@ -187,7 +203,6 @@ declare const _default: {
             };
             '&.is-error, > .is-error': {
                 bg: string;
-                color: string;
             };
             '&.is-error, > button > svg': {
                 color: string;

package/lib/components/Messages/Message.js

@@ -113,7 +113,8 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, messageIcon, ___EmotionJSX(Text, {
     className: statusClasses,
     color: color,
-    mr: "md"
+    mr: "md",
+    variant: "messagesText"
   }, children), ___EmotionJSX(CloseButton, {
     onPress: onCloseHandler,
     variant: "messageCloseButton",

package/lib/components/Text/Text.styles.js

@@ -239,5 +239,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   textEllipsis: textEllipsis,
   title: title,
   copyRightText: copyRightText,
-  attachmentTitle: attachmentTitle
+  attachmentTitle: attachmentTitle,
+  messagesText: _objectSpread({}, base)
 });

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -59,6 +59,11 @@ var iconButtons = {
     '&.is-hovered': {
       backgroundColor: 'gray-700'
     }
+  }),
+  messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-hovered': {
+      backgroundColor: '#455469'
+    }
   })
 };
 var buttons = {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/message.js

@@ -3,7 +3,7 @@ export var message = {
     backgroundColor: 'background.secondary',
     color: 'white !important',
     '> span': {
-      color: 'text.message'
+      color: 'white !important'
     },
     '&.is-success': {
       bg: 'background.secondary',
@@ -45,6 +45,12 @@ export var message = {
         fill: 'text.message'
       }
     },
+    '&.is-default, > button > svg': {
+      color: 'white !important',
+      path: {
+        fill: 'text.message'
+      }
+    },
     '&.is-error': {
       borderLeftColor: 'red-500'
     }

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -18,5 +18,12 @@ export var text = {
   placeholder: {
     color: 'gray-400',
     fontWeight: 1
+  },
+  messagesText: {
+    '&.is-success, &.is-warning, &.is-error, &.is-default': {
+      '& > a': {
+        color: 'white'
+      }
+    }
   }
 };

package/lib/styles/themes/next-gen/variants/button.js

@@ -444,7 +444,19 @@ var iconButtons = {
       }
     }, transitions)
   },
-  messageCloseButton: _objectSpread({}, baseIconButton),
+  messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    minWidth: '28px',
+    width: '28px',
+    height: '28px',
+    '& > svg': {
+      minWidth: '18px',
+      width: '18px',
+      height: '18px',
+      path: {
+        fill: '#455469 !important'
+      }
+    }
+  }),
   headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     borderRadius: '4px',
     path: {

package/lib/styles/themes/next-gen/variants/messages.js

@@ -1,36 +1,51 @@
 export var message = {
+  wrapper: {
+    gap: 'md'
+  },
   item: {
     maxWidth: 400,
     pointerEvents: 'all',
-    mb: 'md',
-    p: '1.25rem',
+    mb: '0',
+    p: '20px 16px 20px 20px',
     wordBreak: 'break-word',
     alignItems: 'center',
     backgroundColor: 'blue-100',
     borderLeftWidth: '5px',
     borderLeftStyle: 'solid',
-    borderLeftColor: 'teal-500',
-    color: 'text.message',
+    borderLeftColor: 'blue',
+    color: 'gray-700',
     fontSize: '15px !important',
+    lineHeight: '1.3',
     borderRadius: 4,
+    '& > svg': {
+      minWidth: '20px',
+      width: '20px',
+      height: '20px',
+      color: 'gray-700',
+      path: {
+        fill: 'gray-700',
+        transform: 'scale(0.96)',
+        transformOrigin: 'center'
+      },
+      alignSelf: 'start'
+    },
     '&.is-success': {
       bg: 'green-100',
       borderLeftColor: 'green-500',
-      color: 'text.message'
+      color: 'gray-700'
     },
     '&.is-warning': {
       bg: 'warning.light',
       borderLeftColor: 'yellow-500',
-      color: 'text.message'
+      color: 'gray-700 '
     },
     '&.is-error, > .is-error': {
-      bg: 'red-100',
-      color: 'text.message'
+      bg: 'red-100'
     },
     '&.is-error, > button > svg': {
-      color: 'text.message !important',
+      color: 'gray-700 !important',
       path: {
-        fill: 'text.message'
+        fill: 'gray-700'
       }
     },
     '&.is-error': {

package/lib/styles/themes/next-gen/variants/text.js

@@ -117,5 +117,15 @@ export var text = _objectSpread(_objectSpread({
     color: 'text.primary',
     fontSize: 'lg',
     fontWeight: 2
+  },
+  messagesText: {
+    '&.is-success, &.is-warning, &.is-error, &.is-default': {
+      color: 'gray-700',
+      '& > a': {
+        fontWeight: '600',
+        textDecoration: 'underline',
+        color: 'gray-700'
+      }
+    }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.138.0-alpha.3",
+  "version": "2.138.0-alpha.4",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",