@superdispatch/ui-lab 0.24.4 → 0.24.6

package/dist-node/index.js

@@ -366,12 +366,12 @@ function createButtonVariables(size, _ref) {
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
     textColor: ui.Color.White,
-    outlineColor: ui.Color.Blue100,
+    outlineColor: ui.Color.Blue30,
     backgroundColor: ui.Color.Blue300,
     textColorHovered: ui.Color.White,
     backgroundColorHovered: ui.Color.Blue500,
     backgroundColorActive: ui.Color.Blue400,
-    backgroundColorDisabled: ui.Color.Blue100
+    backgroundColorDisabled: ui.Color.Blue30
   });
 }
 
@@ -383,10 +383,10 @@ function getNeutralVariables(size) {
   return createButtonVariables(size, {
     textColor: ui.Color.Dark500,
     borderColor: ui.Color.Silver500,
-    outlineColor: ui.Color.Blue100,
+    outlineColor: ui.Color.Blue30,
     backgroundColor: ui.Color.White,
-    textColorHovered: ui.Color.Blue300,
-    borderColorHovered: ui.Color.Blue300,
+    textColorHovered: ui.Color.Blue500,
+    borderColorHovered: ui.Color.Blue500,
     backgroundColorHovered: ui.Color.Blue50,
     backgroundColorActive: ui.Color.Blue75,
     textColorDisabled: ui.Color.Silver500
@@ -395,26 +395,26 @@ function getNeutralVariables(size) {
 
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Red300,
-    borderColor: ui.Color.Red300,
-    outlineColor: ui.Color.Red75,
+    textColor: ui.Color.Red500,
+    borderColor: ui.Color.Red500,
+    outlineColor: ui.Color.Red30,
     backgroundColor: ui.Color.Red50,
     backgroundColorHovered: ui.Color.Red75,
-    backgroundColorActive: ui.Color.Red100,
-    textColorDisabled: ui.Color.Red100,
-    borderColorDisabled: ui.Color.Red100,
+    backgroundColorActive: ui.Color.Red10,
+    textColorDisabled: ui.Color.Red30,
+    borderColorDisabled: ui.Color.Red30,
     backgroundColorDisabled: ui.Color.Red50
   });
 }
 
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: ui.Color.Blue400,
-    outlineColor: ui.Color.Blue100,
+    textColor: ui.Color.Blue500,
+    outlineColor: ui.Color.Blue30,
     textColorHovered: ui.Color.Blue500,
     backgroundColorHovered: ui.Color.Blue50,
     backgroundColorActive: ui.Color.Blue75,
-    textColorDisabled: ui.Color.Blue100
+    textColorDisabled: ui.Color.Blue30
   });
 }
 
@@ -431,6 +431,18 @@ function getInvertedVariables(size) {
   });
 }
 
+function getSuccessVariables(size) {
+  return createButtonVariables(size, {
+    textColor: ui.Color.White,
+    outlineColor: ui.Color.Green30,
+    backgroundColor: ui.Color.Green300,
+    backgroundColorHovered: ui.Color.Green500,
+    backgroundColorActive: ui.Color.Green500,
+    textColorDisabled: ui.Color.White,
+    backgroundColorDisabled: ui.Color.Green30
+  });
+}
+
 var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Button__ButtonRoot",
   componentId: "SD__sc-1pwdpe3-0"
@@ -441,7 +453,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
     variant,
     fullWidth
   } = _ref2;
-  var variables = variant === 'primary' ? getPrimaryVariables(size) : variant === 'neutral' ? getNeutralVariables(size) : variant === 'critical' ? getCriticalVariables(size) : variant === 'text' ? getTextVariables(size) : variant === 'inverted' ? getInvertedVariables(size) : getDefaultVariables(size);
+  var variables = variant === 'primary' ? getPrimaryVariables(size) : variant === 'neutral' ? getNeutralVariables(size) : variant === 'critical' ? getCriticalVariables(size) : variant === 'text' ? getTextVariables(size) : variant === 'inverted' ? getInvertedVariables(size) : variant === 'success' ? getSuccessVariables(size) : getDefaultVariables(size);
   return styled.css(JSON.parse('["border:0;margin:0;outline:0;position:relative;vertical-align:middle;cursor:pointer;text-decoration:none;&[aria-disabled=\'true\']{cursor:default;pointer-events:none;}-moz-appearance:none;&::-moz-focus-inner{border-style:none;}-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;@media print{-webkit-print-color-adjust:exact;}--button-visibility:visible;--button-text-color:",";--button-border-color:",";--button-outline-color:",";--button-background-color:",";--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;","{--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;}&[aria-disabled=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";}}&:active{--button-background-color:",";}}}display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:",";border-radius:4px;font-family:",";font-weight:",";color:var(--button-text-color);background-color:var(--button-background-color);font-size:var(--button-font-size);line-height:var(--button-line-height);padding:var(--button-padding-y) var(--button-padding-x);box-shadow:inset 0 0 0 1px var(--button-border-color),0 0 0 2px var(--button-outline-color);transition:",";"]'), variables.textColor, variables.borderColor, ui.Color.Transparent, variables.backgroundColor, variables.paddingXMobile, variables.paddingYMobile, variables.fontSizeMobile, variables.lineHeightMobile, theme.breakpoints.up('sm'), variables.paddingX, variables.paddingY, variables.fontSize, variables.lineHeight, variables.textColorDisabled, variables.borderColorDisabled, variables.backgroundColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
 });
 var ButtonLabel = /*#__PURE__*/styled__default.span.withConfig({