@livepeer/design-system 1.0.14 → 1.0.16

package/dist/components/AlertDialog.d.ts

@@ -11,5 +11,6 @@ declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogPrimi
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogOverlay, };

package/dist/index.es.js

@@ -68,28 +68,6 @@ var styled = (_a$8 = createStitches({
             8: "65px",
             9: "80px",
         },
-        // space: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
-        // sizes: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
         fontSizes: {
             1: "12px",
             2: "13px",
@@ -101,17 +79,6 @@ var styled = (_a$8 = createStitches({
             8: "35px",
             9: "59px",
         },
-        // fontSizes: {
-        //   1: '11px',
-        //   2: '12px',
-        //   3: '15px',
-        //   4: '17px',
-        //   5: '20px',
-        //   6: '22px',
-        //   7: '28px',
-        //   8: '36px',
-        //   9: '60px',
-        // },
         radii: {
             1: "4px",
             2: "6px",
@@ -544,7 +511,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles,
 });
 var AlertDialogContent = function (_a) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
-    return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: 'auto' } }), children));
+    return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
 };
 var AlertDialogTitle = AlertDialogPrimitive.Title;
 var AlertDialogDescription = AlertDialogPrimitive.Description;
@@ -2544,7 +2511,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
     colorVariants[color] = {
         "&:focus": {
             outline: "none",
-            backgroundColor: "$".concat(color, "4"),
+            backgroundColor: "$neutral4",
             color: "$hiContrast",
         },
     };
@@ -2592,6 +2559,9 @@ var DropdownMenuRadioItemBase = React.forwardRef(function (_a, forwardedRef) {
 });
 DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
 var DropdownMenuItem = styled(DropdownMenuItemBase, {
+    "&:focus": {
+        backgroundColor: "$neutral4",
+    },
     variants: {
         color: __assign({ primary: {
                 "&:focus": {
@@ -2601,9 +2571,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
                 },
             } }, colorVariants),
     },
-    defaultVariants: {
-        color: "primary",
-    },
 });
 var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     variants: {
@@ -2620,6 +2587,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     },
 });
 var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
+    backgroundColor: "$neutral4",
     variants: {
         color: __assign({ primary: {
                 "&:focus": {
@@ -4154,7 +4122,7 @@ var SnackbarProvider = function (_a) {
                             minWidth: "334px",
                             maxWidth: "672px",
                             zIndex: 1000000,
-                            backgroundColor: "$panel",
+                            backgroundColor: "$neutral4",
                             boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
                             WebkitFontSmoothing: "antialiased",
                             MozOsxFontSmoothing: "grayscale",

package/dist/index.js

@@ -112,28 +112,6 @@ var styled = (_a$8 = react.createStitches({
             8: "65px",
             9: "80px",
         },
-        // space: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
-        // sizes: {
-        //   1: '4px',
-        //   2: '8px',
-        //   3: '16px',
-        //   4: '20px',
-        //   5: '24px',
-        //   6: '32px',
-        //   7: '48px',
-        //   8: '64px',
-        //   9: '80px',
-        // },
         fontSizes: {
             1: "12px",
             2: "13px",
@@ -145,17 +123,6 @@ var styled = (_a$8 = react.createStitches({
             8: "35px",
             9: "59px",
         },
-        // fontSizes: {
-        //   1: '11px',
-        //   2: '12px',
-        //   3: '15px',
-        //   4: '17px',
-        //   5: '20px',
-        //   6: '22px',
-        //   7: '28px',
-        //   8: '36px',
-        //   9: '60px',
-        // },
         radii: {
             1: "4px",
             2: "6px",
@@ -588,7 +555,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive__namespace.Content, p
 });
 var AlertDialogContent = function (_a) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = tslib.__rest(_a, ["children", "animation"]);
-    return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow: 'auto' } }), children));
+    return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
 };
 var AlertDialogTitle = AlertDialogPrimitive__namespace.Title;
 var AlertDialogDescription = AlertDialogPrimitive__namespace.Description;
@@ -2588,7 +2555,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
     colorVariants[color] = {
         "&:focus": {
             outline: "none",
-            backgroundColor: "$".concat(color, "4"),
+            backgroundColor: "$neutral4",
             color: "$hiContrast",
         },
     };
@@ -2636,6 +2603,9 @@ var DropdownMenuRadioItemBase = React__default["default"].forwardRef(function (_
 });
 DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
 var DropdownMenuItem = styled(DropdownMenuItemBase, {
+    "&:focus": {
+        backgroundColor: "$neutral4",
+    },
     variants: {
         color: tslib.__assign({ primary: {
                 "&:focus": {
@@ -2645,9 +2615,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
                 },
             } }, colorVariants),
     },
-    defaultVariants: {
-        color: "primary",
-    },
 });
 var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     variants: {
@@ -2664,6 +2631,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
     },
 });
 var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
+    backgroundColor: "$neutral4",
     variants: {
         color: tslib.__assign({ primary: {
                 "&:focus": {
@@ -4198,7 +4166,7 @@ var SnackbarProvider = function (_a) {
                             minWidth: "334px",
                             maxWidth: "672px",
                             zIndex: 1000000,
-                            backgroundColor: "$panel",
+                            backgroundColor: "$neutral4",
                             boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
                             WebkitFontSmoothing: "antialiased",
                             MozOsxFontSmoothing: "grayscale",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer/design-system",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.es.js",