npm - @pingux/astro - Versions diffs - 2.143.0-alpha.0 → 2.143.0-alpha.2 - Mend

@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

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

@@ -14,13 +14,13 @@ declare const buttons: {
         transition: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -31,6 +31,7 @@ declare const buttons: {
         borderColor: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -62,13 +63,13 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -77,6 +78,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -106,13 +108,13 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -121,6 +123,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -141,13 +144,13 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -156,6 +159,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -173,13 +177,13 @@ declare const buttons: {
         color: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -188,6 +192,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -224,13 +229,13 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -239,6 +244,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -274,16 +280,17 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
         px: string;
         py: string;
+        maxHeight: string;
         '&.is-disabled': {
             opacity: number;
         };
@@ -323,16 +330,17 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
         px: string;
         py: string;
+        maxHeight: string;
         '&.is-disabled': {
             opacity: number;
         };
@@ -344,13 +352,13 @@ declare const buttons: {
         color: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -359,6 +367,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -378,13 +387,13 @@ declare const buttons: {
         color: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -394,6 +403,7 @@ declare const buttons: {
         borderColor: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -420,13 +430,13 @@ declare const buttons: {
         outlineColor: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         display: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -435,6 +445,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -461,6 +472,119 @@ declare const buttons: {
             outline: string;
         };
     };
+    listBoxLink: {
+        color: string;
+        transition: string;
+        fontSize: string;
+        textDecoration: string;
+        px: string;
+        pt: string;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+        };
+        badgeDeleteButton: {
+            transition: string;
+            height: number;
+            p: number;
+            width: number;
+            border: string;
+            '&.is-focused': {
+                backgroundColor: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            cursor: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        invertedBadgeDeleteButton: {
+            transition: string;
+            height: number;
+            p: number;
+            width: number;
+            border: string;
+            '&.is-focused': {
+                backgroundColor: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            cursor: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        clearSelectionButton: {
+            top: string;
+            right: string;
+            bg: string;
+            '.is-float-label &': {
+                top: string;
+            };
+            width: string;
+            height: string;
+            border: string;
+            position: string;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-pressed': {
+                bg: string;
+            };
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
+    };
     withIcon: {
         display: string;
         path: {
@@ -488,12 +612,12 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -502,6 +626,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -534,12 +659,12 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -548,6 +673,7 @@ declare const buttons: {
         border: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;
@@ -586,16 +712,17 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
         px: string;
         py: string;
+        maxHeight: string;
         '&.is-disabled': {
             opacity: number;
         };
@@ -635,16 +762,17 @@ declare const buttons: {
         };
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         maxWidth: string;
         fontFamily: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
         px: string;
         py: string;
+        maxHeight: string;
         '&.is-disabled': {
             opacity: number;
         };
@@ -764,11 +892,11 @@ declare const buttons: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            flexShrink: number;
             minWidth: string;
             cursor: string;
             fontFamily: string;
             fontSize: string;
-            flexGrow: string;
             fontWeight: number;
             textAlign: string;
             verticalAlign: string;
@@ -816,11 +944,11 @@ declare const buttons: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            flexShrink: number;
             minWidth: string;
             cursor: string;
             fontFamily: string;
             fontSize: string;
-            flexGrow: string;
             fontWeight: number;
             textAlign: string;
             verticalAlign: string;
@@ -1012,9 +1140,11 @@ declare const buttons: {
             borderColor: string;
         };
         copyButton: {
+            mx: string;
             path: {
                 fill: string;
             };
+            border: string;
         };
         deleteAttachment: {
             backgroundColor: string;
@@ -1137,106 +1267,21 @@ declare const buttons: {
             };
         };
         hintButton: {
-            bg: string;
-            '&.is-hovered': {
-                bg: string;
-            };
-        };
-        badgeDeleteButton: {
-            transition: string;
-            height: number;
-            p: number;
-            width: number;
-            border: string;
-            '&.is-focused': {
-                backgroundColor: string;
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
-            '&.is-pressed': {
-                backgroundColor: string;
-                borderColor: string;
-                path: {
-                    fill: string;
-                };
-            };
-            '&.is-hovered': {
-                bg: string;
-            };
-            cursor: string;
-            outline: string;
-            borderRadius: string;
-            borderColor: string;
+            backgroundColor: string;
             path: {
                 fill: string;
             };
-        };
-        invertedBadgeDeleteButton: {
-            transition: string;
-            height: number;
-            p: number;
-            width: number;
-            border: string;
             '&.is-focused': {
-                backgroundColor: string;
                 outline: string;
                 outlineColor: string;
                 outlineOffset: string;
             };
-            '&.is-pressed': {
+            '&.is-hovered': {
                 backgroundColor: string;
-                borderColor: string;
                 path: {
                     fill: string;
                 };
             };
-            '&.is-hovered': {
-                bg: string;
-            };
-            cursor: string;
-            outline: string;
-            borderRadius: string;
-            borderColor: string;
-            path: {
-                fill: string;
-            };
-        };
-        clearSelectionButton: {
-            top: string;
-            right: string;
-            bg: string;
-            '.is-float-label &': {
-                top: string;
-            };
-            width: string;
-            height: string;
-            border: string;
-            position: string;
-            '& > svg': {
-                minWidth: string;
-                width: string;
-                height: string;
-            };
-            '&.is-hovered': {
-                bg: string;
-            };
-            '&.is-pressed': {
-                bg: string;
-            };
-            cursor: string;
-            transition: string;
-            outline: string;
-            borderRadius: string;
-            borderColor: string;
-            path: {
-                fill: string;
-            };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
         };
     };
     modalCloseButton: {
@@ -1301,11 +1346,11 @@ declare const buttons: {
         borderColor: string;
         alignItems: string;
         justifyContent: string;
+        flexShrink: number;
         minWidth: string;
         cursor: string;
         fontFamily: string;
         fontSize: string;
-        flexGrow: string;
         fontWeight: number;
         textAlign: string;
         verticalAlign: string;
@@ -1313,6 +1358,7 @@ declare const buttons: {
         borderRadius: string;
         px: string;
         py: string;
+        maxHeight: string;
         height: string;
         '&.is-disabled': {
             opacity: number;

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

@@ -40,13 +40,13 @@ exports.defaultFocus = defaultFocus;
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
   justifyContent: 'center',
+  flexShrink: 0,
   minWidth: 'min-content',
   cursor: 'pointer',
   display: 'block',
   maxWidth: '100%',
   fontFamily: 'standard',
   fontSize: '.9375rem',
-  flexGrow: '1',
   fontWeight: 400,
   textAlign: 'center',
   verticalAlign: 'middle',
@@ -57,6 +57,7 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   borderColor: 'border.base',
   px: '20px',
   py: '12px',
+  maxHeight: '48.5px',
   height: '48.5px',
   '&.is-disabled': {
     opacity: 0.65
@@ -331,7 +332,7 @@ var baseIconButton = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '2px solid',
+  border: '1px solid',
   borderColor: 'transparent',
   path: {
     fill: 'dark'
@@ -385,6 +386,23 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var hintButton = {
+  backgroundColor: 'transparent',
+  path: {
+    fill: 'dark'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  }
+};
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   height: 14,
   p: 0,
@@ -547,11 +565,23 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: {
-    bg: 'gray-100',
-    '&.is-hovered': {
-      bg: 'gray-900'
-    }
+  hintButton: _objectSpread({}, hintButton)
+};
+var listBoxLink = {
+  color: 'active',
+  transition: 'color, .15s, ease-in-and-out',
+  fontSize: 'md',
+  textDecoration: 'none',
+  px: 'md',
+  pt: 'md',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none',
+    color: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-focused': {
+    textDecoration: 'underline',
+    outline: 'none'
   },
   badgeDeleteButton: badgeDeleteButton,
   invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
@@ -577,6 +607,7 @@ var buttons = {
   checkboxActiveButton: checkboxActiveButton,
   outlineCritical: outlineCritical,
   link: link,
+  listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   inlineWithIcon: inlineWithIcon,

package/lib/cjs/styles/themes/next-gen/variants/cards.js CHANGED Viewed

@@ -32,7 +32,7 @@ var interactive = {
   },
   '&.is-hovered': {
     outline: 'none',
-    borderColor: 'blue',
+    borderColor: 'focus',
     bg: 'default'
   }
 };