@pingux/astro 2.123.0 → 2.124.0-alpha.0

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

@@ -51,7 +51,14 @@ declare const buttons: {
             borderColor: string;
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            backgroundColor: string;
+            borderColor: string;
+            outline: string;
         };
         alignItems: string;
         justifyContent: string;
@@ -74,11 +81,6 @@ declare const buttons: {
         '&.is-disabled': {
             opacity: number;
         };
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
         transition: string;
     };
     default: {
@@ -89,10 +91,18 @@ declare const buttons: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         alignItems: string;
         justifyContent: string;
@@ -126,6 +136,9 @@ declare const buttons: {
         backgroundColor: string;
         borderColor: string;
         color: string;
+        '&.is-hovered': {
+            boxShadow: string;
+        };
         alignItems: string;
         justifyContent: string;
         minWidth: string;
@@ -184,6 +197,9 @@ declare const buttons: {
             outlineColor: string;
             outlineOffset: string;
         };
+        '&.is-hovered': {
+            boxShadow: string;
+        };
         transition: string;
     };
     critical: {
@@ -201,7 +217,9 @@ declare const buttons: {
             borderColor: string;
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
             color: string;
         };
         alignItems: string;
@@ -227,6 +245,99 @@ declare const buttons: {
         };
         transition: string;
     };
+    inline: {
+        display: string;
+        height: string;
+        lineHeight: number;
+        fontSize: string;
+        borderRadius: string;
+        border: string;
+        alignSelf: string;
+        paddingTop: string;
+        paddingBottom: string;
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        maxWidth: string;
+        fontFamily: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        px: string;
+        py: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        transition: string;
+    };
+    inlinePrimary: {
+        display: string;
+        height: string;
+        lineHeight: number;
+        fontSize: string;
+        borderRadius: string;
+        border: string;
+        alignSelf: string;
+        paddingTop: string;
+        paddingBottom: string;
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            backgroundColor: string;
+            borderColor: string;
+            outline: string;
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        maxWidth: string;
+        fontFamily: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        px: string;
+        py: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        transition: string;
+    };
     checkboxButton: {
         backgroundColor: string;
         borderColor: string;
@@ -257,6 +368,9 @@ declare const buttons: {
             outlineColor: string;
             outlineOffset: string;
         };
+        '&.is-hovered': {
+            boxShadow: string;
+        };
         transition: string;
     };
     checkboxActiveButton: {
@@ -289,6 +403,9 @@ declare const buttons: {
             outlineColor: string;
             outlineOffset: string;
         };
+        '&.is-hovered': {
+            boxShadow: string;
+        };
         transition: string;
     };
     outlineCritical: {
@@ -322,6 +439,9 @@ declare const buttons: {
         '&.is-disabled': {
             opacity: number;
         };
+        '&.is-hovered': {
+            boxShadow: string;
+        };
         transition: string;
     };
     link: {
@@ -343,6 +463,9 @@ declare const buttons: {
     };
     withIcon: {
         display: string;
+        path: {
+            fill: string;
+        };
         backgroundColor: string;
         borderColor: string;
         color: string;
@@ -350,10 +473,18 @@ declare const buttons: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         alignItems: string;
         justifyContent: string;
@@ -392,7 +523,14 @@ declare const buttons: {
             borderColor: string;
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            backgroundColor: string;
+            borderColor: string;
+            outline: string;
         };
         alignItems: string;
         justifyContent: string;
@@ -414,6 +552,53 @@ declare const buttons: {
         '&.is-disabled': {
             opacity: number;
         };
+        transition: string;
+    };
+    inlineWithIcon: {
+        display: string;
+        path: {
+            fill: string;
+        };
+        height: string;
+        lineHeight: number;
+        fontSize: string;
+        borderRadius: string;
+        border: string;
+        alignSelf: string;
+        paddingTop: string;
+        paddingBottom: string;
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        maxWidth: string;
+        fontFamily: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        px: string;
+        py: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
         '&.is-focused': {
             outline: string;
             outlineColor: string;
@@ -421,6 +606,107 @@ declare const buttons: {
         };
         transition: string;
     };
+    inlinePrimaryWithIcon: {
+        display: string;
+        color: string;
+        height: string;
+        lineHeight: number;
+        fontSize: string;
+        borderRadius: string;
+        border: string;
+        alignSelf: string;
+        paddingTop: string;
+        paddingBottom: string;
+        backgroundColor: string;
+        borderColor: string;
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            backgroundColor: string;
+            borderColor: string;
+            outline: string;
+        };
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        maxWidth: string;
+        fontFamily: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        px: string;
+        py: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        transition: string;
+    };
+    colorBlock: {
+        bg: string;
+        borderColor: string;
+        borderRadius: string;
+        width: number;
+        height: number;
+        p: string;
+        '&.is-hovered': {
+            boxShadow: string;
+            bg: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            borderColor: string;
+        };
+        '&>svg': {
+            color: string;
+            fill: string;
+        };
+    };
+    colorBlockPrimary: {
+        bg: string;
+        borderColor: string;
+        '& span': {
+            color: string;
+            textAlign: string;
+        };
+        '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            backgroundColor: string;
+            borderColor: string;
+            outline: string;
+        };
+        borderRadius: string;
+        width: number;
+        height: number;
+        p: string;
+        '&>svg': {
+            color: string;
+            fill: string;
+        };
+    };
     iconButtons: {
         base: {
             cursor: string;
@@ -766,9 +1052,9 @@ declare const buttons: {
             };
             '&.is-hovered': {
                 border: string;
-                boxShadow: string;
                 borderColor: string;
                 backgroundColor: string;
+                boxShadow: string;
             };
             '&.is-disabled': {
                 backgroundColor: string;

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

@@ -20,14 +20,20 @@ var _colors = _interopRequireDefault(require("../colors/colors"));
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var primaryBlue = _colors["default"].primary,
-  criticalRed = _colors["default"].critical;
+  primaryBlueHover = _colors["default"].active_hover,
+  primaryBluePress = _colors["default"].active_pressed,
+  criticalRedHover = _colors["default"].critical_hover,
+  criticalRedPress = _colors["default"].critical_pressed;
 var transitions = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out'
 };
+var boxShadowNone = {
+  boxShadow: 'none !important'
+};
 var defaultFocus = {
   outline: '2px solid',
   outlineColor: 'active',
-  outlineOffset: '3px'
+  outlineOffset: '2px'
 };
 exports.defaultFocus = defaultFocus;
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
@@ -54,7 +60,8 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   '&.is-disabled': {
     opacity: 0.65
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': boxShadowNone
 });
 var neutral = _objectSpread(_objectSpread(_objectSpread({
   color: 'gray-600'
@@ -71,11 +78,17 @@ var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'primary',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
   },
-  '&.is-hovered': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover
+  }, boxShadowNone),
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
   }
 });
 var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -83,19 +96,27 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   borderColor: 'primary',
   color: 'primary',
   '&.is-pressed': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    color: 'white'
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
   },
-  '&.is-hovered': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
-    color: 'white'
-  }
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlue,
+    borderColor: primaryBlue,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
+  }, boxShadowNone)
 });
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'text.secondary'
+  color: 'text.secondary',
+  '&.is-hovered': _objectSpread({}, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
@@ -113,19 +134,74 @@ var inverse = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'critical.bright',
-  borderColor: 'critical',
+  borderColor: 'critical.bright',
   color: 'white',
   '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     outlineColor: 'critical.bright',
     backgroundColor: 'critical.dark'
   }),
   '&.is-pressed': {
-    backgroundColor: _chromaJs["default"].mix(criticalRed.bright, 'black', 0.125, 'rgb').hex(),
-    borderColor: _chromaJs["default"].mix(criticalRed.bright, 'black', 0.125, 'rgb').hex()
+    backgroundColor: criticalRedPress,
+    borderColor: criticalRedPress
   },
-  '&.is-hovered': {
-    backgroundColor: _chromaJs["default"].mix(criticalRed.bright, 'black', 0.075, 'rgb').hex(),
+  '&.is-hovered': _objectSpread({
+    backgroundColor: criticalRedHover,
+    borderColor: criticalRedHover,
+    color: 'white'
+  }, boxShadowNone)
+});
+var inline = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  display: 'inline-flex',
+  height: '29px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  backgroundColor: 'transparent',
+  color: primaryBlue,
+  borderColor: primaryBlue,
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
     color: 'white'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlue,
+    borderColor: primaryBlue,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
+  }, boxShadowNone)
+});
+var inlinePrimary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  display: 'inline-flex',
+  height: '29px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  backgroundColor: 'primary',
+  color: 'white',
+  borderColor: 'primary',
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover
+  }, boxShadowNone),
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
   }
 });
 var checkboxButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -160,12 +236,68 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   color: 'text.primary'
 });
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
-  display: 'inline-flex'
+  display: 'inline-flex',
+  path: {
+    fill: primaryBlue
+  }
 });
 var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var inlineWithIcon = _objectSpread(_objectSpread({}, inline), {}, {
+  display: 'inline-flex',
+  path: {
+    fill: primaryBlue
+  }
+});
+var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {}, {
+  display: 'inline-flex',
+  color: 'white'
+});
+var colorBlock = {
+  bg: 'gray-200',
+  borderColor: 'gray-200',
+  borderRadius: '1.75rem',
+  width: 150,
+  height: 50,
+  p: '5px 15px 5px 20px',
+  '&.is-hovered': _objectSpread({
+    bg: 'blue-100',
+    borderColor: 'blue-100'
+  }, boxShadowNone),
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'blue-100',
+    borderColor: 'blue-100'
+  },
+  '&>svg': {
+    color: 'text.primary',
+    fill: 'text.primary'
+  }
+};
+var colorBlockPrimary = _objectSpread(_objectSpread({}, colorBlock), {}, {
+  bg: primaryBlue,
+  borderColor: primaryBlue,
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover,
+    color: 'white'
+  }, boxShadowNone),
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
+  },
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
+  }
+});
 var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
   maxWidth: 'fit-content',
   gap: 'sm',
@@ -333,12 +465,11 @@ var iconButtons = {
       backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
       borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
     },
-    '&.is-hovered': {
+    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
       border: 'none !important',
-      boxShadow: 'none !important',
       borderColor: 'none !important',
       backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
-    },
+    }),
     '&.is-disabled': {
       backgroundColor: 'gray-300'
     }
@@ -362,12 +493,18 @@ var buttons = {
   tertiary: tertiary,
   inverse: inverse,
   critical: critical,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
   checkboxButton: checkboxButton,
   checkboxActiveButton: checkboxActiveButton,
   outlineCritical: outlineCritical,
   link: link,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
+  inlineWithIcon: inlineWithIcon,
+  inlinePrimaryWithIcon: inlinePrimaryWithIcon,
+  colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,