@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.d.ts

@@ -8,6 +8,13 @@ export declare const baseBadge: {
     display: string;
     borderRadius: string;
     fontWeight: number;
+    '&:focus-visible, &.is-focus-visible, &.is-focused': {
+        outlineStyle: string;
+        outlineColor: string;
+        boxShadow: string;
+        outline: string;
+        outlineOffset: string;
+    };
     '& button': {
         backgroundColor: string;
         marginLeft: string;
@@ -102,6 +109,9 @@ declare const _default: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -111,6 +121,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -165,6 +182,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -194,6 +218,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -227,6 +258,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -261,6 +299,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -282,6 +327,9 @@ declare const _default: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -291,6 +339,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -318,6 +373,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -363,6 +425,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -379,6 +448,9 @@ declare const _default: {
     };
     errorCalloutBadge: {
         borderColor: string;
+        '& svg': {
+            color: string;
+        };
         backgroundColor: string;
         border: string;
         '& span': {
@@ -393,6 +465,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -409,6 +488,9 @@ declare const _default: {
     };
     infoCalloutBadge: {
         borderColor: string;
+        '& svg': {
+            color: string;
+        };
         backgroundColor: string;
         border: string;
         '& span': {
@@ -423,6 +505,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -464,6 +553,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -495,6 +591,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -528,6 +631,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -557,6 +667,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -597,6 +714,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -640,6 +764,9 @@ declare const _default: {
     };
     successCalloutBadge: {
         borderColor: string;
+        '& svg': {
+            color: string;
+        };
         backgroundColor: string;
         border: string;
         '& span': {
@@ -654,6 +781,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -670,6 +804,9 @@ declare const _default: {
     };
     warningCalloutBadge: {
         borderColor: string;
+        '& svg': {
+            color: string;
+        };
         backgroundColor: string;
         border: string;
         '& span': {
@@ -684,6 +821,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -705,6 +849,9 @@ declare const _default: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -714,6 +861,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -735,6 +889,9 @@ declare const _default: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -744,6 +901,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -765,6 +929,9 @@ declare const _default: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -774,6 +941,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
         '& button': {
             backgroundColor: string;
             marginLeft: string;
@@ -811,6 +985,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
     };
     invertedRemovableBadge: {
         '& span': {
@@ -832,6 +1013,13 @@ declare const _default: {
         display: string;
         borderRadius: string;
         fontWeight: number;
+        '&:focus-visible, &.is-focus-visible, &.is-focused': {
+            outlineStyle: string;
+            outlineColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        };
     };
     dataTable: {
         pending: {
@@ -852,6 +1040,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -884,6 +1079,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -916,6 +1118,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -948,6 +1157,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -966,6 +1182,9 @@ declare const _default: {
     tableBaseBadge: {
         active: {
             borderColor: string;
+            '& svg': {
+                color: string;
+            };
             backgroundColor: string;
             border: string;
             '& span': {
@@ -980,6 +1199,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -1001,6 +1227,9 @@ declare const _default: {
             '& span': {
                 color: string;
             };
+            '& svg': {
+                color: string;
+            };
             cursor: string;
             p: string;
             alignItems: string;
@@ -1010,6 +1239,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -1031,6 +1267,9 @@ declare const _default: {
             '& span': {
                 color: string;
             };
+            '& svg': {
+                color: string;
+            };
             cursor: string;
             p: string;
             alignItems: string;
@@ -1040,6 +1279,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -1061,6 +1307,9 @@ declare const _default: {
             '& span': {
                 color: string;
             };
+            '& svg': {
+                color: string;
+            };
             cursor: string;
             p: string;
             alignItems: string;
@@ -1070,6 +1319,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;
@@ -1091,6 +1347,9 @@ declare const _default: {
             '& span': {
                 color: string;
             };
+            '& svg': {
+                color: string;
+            };
             cursor: string;
             p: string;
             alignItems: string;
@@ -1100,6 +1359,13 @@ declare const _default: {
             display: string;
             borderRadius: string;
             fontWeight: number;
+            '&:focus-visible, &.is-focus-visible, &.is-focused': {
+                outlineStyle: string;
+                outlineColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+            };
             '& button': {
                 backgroundColor: string;
                 marginLeft: string;

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

@@ -27,6 +27,11 @@ var baseBadge = exports.baseBadge = {
   display: 'inline-flex !important',
   borderRadius: '5px',
   fontWeight: 1,
+  '&:focus-visible, &.is-focus-visible, &.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineStyle: 'solid',
+    outlineColor: 'focus',
+    boxShadow: '0 0 0 1px background'
+  }),
   '& button': {
     backgroundColor: 'transparent',
     marginLeft: 'xs',
@@ -176,21 +181,36 @@ var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   }
 });
 var errorCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
-  borderColor: 'critical.bright'
+  borderColor: 'critical.bright',
+  '& svg': {
+    color: 'critical.bright'
+  }
 });
 var warningCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
-  borderColor: '#E86900'
+  borderColor: 'warning.bright',
+  '& svg': {
+    color: 'warning.bright'
+  }
 });
 var successCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
-  borderColor: 'success.bright'
+  borderColor: 'success.bright',
+  '& svg': {
+    color: 'success.bright'
+  }
 });
 var infoCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
-  borderColor: 'text.secondary'
+  borderColor: 'text.secondary',
+  '& svg': {
+    color: 'text.secondary'
+  }
 });
 var statusBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   border: 'solid 1px',
   '& span': {
     color: 'text.primary'
+  },
+  '& svg': {
+    color: 'text.primary'
   }
 });
 var criticalStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {