@livepeer/design-system 1.0.14 → 1.0.16

Sign up to get free protection for your applications and to get access to all the features.
@@ -11,5 +11,6 @@ declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogPrimi
11
11
  declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
12
12
  declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
13
13
  declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
14
+ declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
14
15
  declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
15
- export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
16
+ export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogOverlay, };
package/dist/index.es.js CHANGED
@@ -68,28 +68,6 @@ var styled = (_a$8 = createStitches({
68
68
  8: "65px",
69
69
  9: "80px",
70
70
  },
71
- // space: {
72
- // 1: '4px',
73
- // 2: '8px',
74
- // 3: '16px',
75
- // 4: '20px',
76
- // 5: '24px',
77
- // 6: '32px',
78
- // 7: '48px',
79
- // 8: '64px',
80
- // 9: '80px',
81
- // },
82
- // sizes: {
83
- // 1: '4px',
84
- // 2: '8px',
85
- // 3: '16px',
86
- // 4: '20px',
87
- // 5: '24px',
88
- // 6: '32px',
89
- // 7: '48px',
90
- // 8: '64px',
91
- // 9: '80px',
92
- // },
93
71
  fontSizes: {
94
72
  1: "12px",
95
73
  2: "13px",
@@ -101,17 +79,6 @@ var styled = (_a$8 = createStitches({
101
79
  8: "35px",
102
80
  9: "59px",
103
81
  },
104
- // fontSizes: {
105
- // 1: '11px',
106
- // 2: '12px',
107
- // 3: '15px',
108
- // 4: '17px',
109
- // 5: '20px',
110
- // 6: '22px',
111
- // 7: '28px',
112
- // 8: '36px',
113
- // 9: '60px',
114
- // },
115
82
  radii: {
116
83
  1: "4px",
117
84
  2: "6px",
@@ -544,7 +511,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles,
544
511
  });
545
512
  var AlertDialogContent = function (_a) {
546
513
  var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
547
- return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: 'auto' } }), children));
514
+ return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
548
515
  };
549
516
  var AlertDialogTitle = AlertDialogPrimitive.Title;
550
517
  var AlertDialogDescription = AlertDialogPrimitive.Description;
@@ -2544,7 +2511,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
2544
2511
  colorVariants[color] = {
2545
2512
  "&:focus": {
2546
2513
  outline: "none",
2547
- backgroundColor: "$".concat(color, "4"),
2514
+ backgroundColor: "$neutral4",
2548
2515
  color: "$hiContrast",
2549
2516
  },
2550
2517
  };
@@ -2592,6 +2559,9 @@ var DropdownMenuRadioItemBase = React.forwardRef(function (_a, forwardedRef) {
2592
2559
  });
2593
2560
  DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
2594
2561
  var DropdownMenuItem = styled(DropdownMenuItemBase, {
2562
+ "&:focus": {
2563
+ backgroundColor: "$neutral4",
2564
+ },
2595
2565
  variants: {
2596
2566
  color: __assign({ primary: {
2597
2567
  "&:focus": {
@@ -2601,9 +2571,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
2601
2571
  },
2602
2572
  } }, colorVariants),
2603
2573
  },
2604
- defaultVariants: {
2605
- color: "primary",
2606
- },
2607
2574
  });
2608
2575
  var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
2609
2576
  variants: {
@@ -2620,6 +2587,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
2620
2587
  },
2621
2588
  });
2622
2589
  var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
2590
+ backgroundColor: "$neutral4",
2623
2591
  variants: {
2624
2592
  color: __assign({ primary: {
2625
2593
  "&:focus": {
@@ -4154,7 +4122,7 @@ var SnackbarProvider = function (_a) {
4154
4122
  minWidth: "334px",
4155
4123
  maxWidth: "672px",
4156
4124
  zIndex: 1000000,
4157
- backgroundColor: "$panel",
4125
+ backgroundColor: "$neutral4",
4158
4126
  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)",
4159
4127
  WebkitFontSmoothing: "antialiased",
4160
4128
  MozOsxFontSmoothing: "grayscale",
package/dist/index.js CHANGED
@@ -112,28 +112,6 @@ var styled = (_a$8 = react.createStitches({
112
112
  8: "65px",
113
113
  9: "80px",
114
114
  },
115
- // space: {
116
- // 1: '4px',
117
- // 2: '8px',
118
- // 3: '16px',
119
- // 4: '20px',
120
- // 5: '24px',
121
- // 6: '32px',
122
- // 7: '48px',
123
- // 8: '64px',
124
- // 9: '80px',
125
- // },
126
- // sizes: {
127
- // 1: '4px',
128
- // 2: '8px',
129
- // 3: '16px',
130
- // 4: '20px',
131
- // 5: '24px',
132
- // 6: '32px',
133
- // 7: '48px',
134
- // 8: '64px',
135
- // 9: '80px',
136
- // },
137
115
  fontSizes: {
138
116
  1: "12px",
139
117
  2: "13px",
@@ -145,17 +123,6 @@ var styled = (_a$8 = react.createStitches({
145
123
  8: "35px",
146
124
  9: "59px",
147
125
  },
148
- // fontSizes: {
149
- // 1: '11px',
150
- // 2: '12px',
151
- // 3: '15px',
152
- // 4: '17px',
153
- // 5: '20px',
154
- // 6: '22px',
155
- // 7: '28px',
156
- // 8: '36px',
157
- // 9: '60px',
158
- // },
159
126
  radii: {
160
127
  1: "4px",
161
128
  2: "6px",
@@ -588,7 +555,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive__namespace.Content, p
588
555
  });
589
556
  var AlertDialogContent = function (_a) {
590
557
  var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = tslib.__rest(_a, ["children", "animation"]);
591
- return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow: 'auto' } }), children));
558
+ return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
592
559
  };
593
560
  var AlertDialogTitle = AlertDialogPrimitive__namespace.Title;
594
561
  var AlertDialogDescription = AlertDialogPrimitive__namespace.Description;
@@ -2588,7 +2555,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
2588
2555
  colorVariants[color] = {
2589
2556
  "&:focus": {
2590
2557
  outline: "none",
2591
- backgroundColor: "$".concat(color, "4"),
2558
+ backgroundColor: "$neutral4",
2592
2559
  color: "$hiContrast",
2593
2560
  },
2594
2561
  };
@@ -2636,6 +2603,9 @@ var DropdownMenuRadioItemBase = React__default["default"].forwardRef(function (_
2636
2603
  });
2637
2604
  DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
2638
2605
  var DropdownMenuItem = styled(DropdownMenuItemBase, {
2606
+ "&:focus": {
2607
+ backgroundColor: "$neutral4",
2608
+ },
2639
2609
  variants: {
2640
2610
  color: tslib.__assign({ primary: {
2641
2611
  "&:focus": {
@@ -2645,9 +2615,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
2645
2615
  },
2646
2616
  } }, colorVariants),
2647
2617
  },
2648
- defaultVariants: {
2649
- color: "primary",
2650
- },
2651
2618
  });
2652
2619
  var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
2653
2620
  variants: {
@@ -2664,6 +2631,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
2664
2631
  },
2665
2632
  });
2666
2633
  var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
2634
+ backgroundColor: "$neutral4",
2667
2635
  variants: {
2668
2636
  color: tslib.__assign({ primary: {
2669
2637
  "&:focus": {
@@ -4198,7 +4166,7 @@ var SnackbarProvider = function (_a) {
4198
4166
  minWidth: "334px",
4199
4167
  maxWidth: "672px",
4200
4168
  zIndex: 1000000,
4201
- backgroundColor: "$panel",
4169
+ backgroundColor: "$neutral4",
4202
4170
  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)",
4203
4171
  WebkitFontSmoothing: "antialiased",
4204
4172
  MozOsxFontSmoothing: "grayscale",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@livepeer/design-system",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",