@superdispatch/ui-lab 0.24.3 → 0.24.5

package/dist-src/button/Button.js

@@ -58,12 +58,12 @@ function createButtonVariables(size, _ref) {
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.White,
-    outlineColor: Color.Blue100,
+    outlineColor: Color.Blue30,
     backgroundColor: Color.Blue300,
     textColorHovered: Color.White,
     backgroundColorHovered: Color.Blue500,
     backgroundColorActive: Color.Blue400,
-    backgroundColorDisabled: Color.Blue100
+    backgroundColorDisabled: Color.Blue30
   });
 }
 
@@ -75,10 +75,10 @@ function getNeutralVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.Dark500,
     borderColor: Color.Silver500,
-    outlineColor: Color.Blue100,
+    outlineColor: Color.Blue30,
     backgroundColor: Color.White,
-    textColorHovered: Color.Blue300,
-    borderColorHovered: Color.Blue300,
+    textColorHovered: Color.Blue500,
+    borderColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
     textColorDisabled: Color.Silver500
@@ -87,26 +87,26 @@ function getNeutralVariables(size) {
 
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Red300,
-    borderColor: Color.Red300,
-    outlineColor: Color.Red75,
+    textColor: Color.Red500,
+    borderColor: Color.Red500,
+    outlineColor: Color.Red30,
     backgroundColor: Color.Red50,
     backgroundColorHovered: Color.Red75,
-    backgroundColorActive: Color.Red100,
-    textColorDisabled: Color.Red100,
-    borderColorDisabled: Color.Red100,
+    backgroundColorActive: Color.Red10,
+    textColorDisabled: Color.Red30,
+    borderColorDisabled: Color.Red30,
     backgroundColorDisabled: Color.Red50
   });
 }
 
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Blue400,
-    outlineColor: Color.Blue100,
+    textColor: Color.Blue500,
+    outlineColor: Color.Blue30,
     textColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Blue100
+    textColorDisabled: Color.Blue30
   });
 }
 
@@ -123,6 +123,18 @@ function getInvertedVariables(size) {
   });
 }
 
+function getSuccessVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.White,
+    outlineColor: Color.Green30,
+    backgroundColor: Color.Green300,
+    backgroundColorHovered: Color.Green500,
+    backgroundColorActive: Color.Green500,
+    textColorDisabled: Color.White,
+    backgroundColorDisabled: Color.Green30
+  });
+}
+
 var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
   displayName: "Button__ButtonRoot",
   componentId: "SD__sc-1pwdpe3-0"
@@ -133,7 +145,7 @@ var ButtonRoot = /*#__PURE__*/styled.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 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, 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.span.withConfig({

package/dist-types/index.d.ts

@@ -93,7 +93,7 @@ interface ButtonAreaProps extends ButtonBaseProps {
 declare const ButtonArea: ForwardRefExoticComponent<Pick<ButtonAreaProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "fullWidth" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "icon" | "active"> & RefAttributes<HTMLButtonElement>>;
 
 declare type ButtonSizeProp = 'small' | 'medium' | 'large';
-declare type ButtonVariantProp = 'critical' | 'default' | 'inverted' | 'neutral' | 'primary' | 'text';
+declare type ButtonVariantProp = 'critical' | 'default' | 'inverted' | 'neutral' | 'primary' | 'text' | 'success';
 interface BaseButtonProps<T extends HTMLElement> extends Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-haspopup' | 'aria-labelledby'> {
     active?: boolean;
     pending?: boolean;

package/dist-web/index.js

@@ -359,12 +359,12 @@ function createButtonVariables(size, _ref) {
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.White,
-    outlineColor: Color.Blue100,
+    outlineColor: Color.Blue30,
     backgroundColor: Color.Blue300,
     textColorHovered: Color.White,
     backgroundColorHovered: Color.Blue500,
     backgroundColorActive: Color.Blue400,
-    backgroundColorDisabled: Color.Blue100
+    backgroundColorDisabled: Color.Blue30
   });
 }
 
@@ -376,10 +376,10 @@ function getNeutralVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.Dark500,
     borderColor: Color.Silver500,
-    outlineColor: Color.Blue100,
+    outlineColor: Color.Blue30,
     backgroundColor: Color.White,
-    textColorHovered: Color.Blue300,
-    borderColorHovered: Color.Blue300,
+    textColorHovered: Color.Blue500,
+    borderColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
     textColorDisabled: Color.Silver500
@@ -388,26 +388,26 @@ function getNeutralVariables(size) {
 
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Red300,
-    borderColor: Color.Red300,
-    outlineColor: Color.Red75,
+    textColor: Color.Red500,
+    borderColor: Color.Red500,
+    outlineColor: Color.Red30,
     backgroundColor: Color.Red50,
     backgroundColorHovered: Color.Red75,
-    backgroundColorActive: Color.Red100,
-    textColorDisabled: Color.Red100,
-    borderColorDisabled: Color.Red100,
+    backgroundColorActive: Color.Red10,
+    textColorDisabled: Color.Red30,
+    borderColorDisabled: Color.Red30,
     backgroundColorDisabled: Color.Red50
   });
 }
 
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Blue400,
-    outlineColor: Color.Blue100,
+    textColor: Color.Blue500,
+    outlineColor: Color.Blue30,
     textColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Blue100
+    textColorDisabled: Color.Blue30
   });
 }
 
@@ -424,6 +424,18 @@ function getInvertedVariables(size) {
   });
 }
 
+function getSuccessVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.White,
+    outlineColor: Color.Green30,
+    backgroundColor: Color.Green300,
+    backgroundColorHovered: Color.Green500,
+    backgroundColorActive: Color.Green500,
+    textColorDisabled: Color.White,
+    backgroundColorDisabled: Color.Green30
+  });
+}
+
 var ButtonRoot$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Button__ButtonRoot",
   componentId: "SD__sc-1pwdpe3-0"
@@ -434,7 +446,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled.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 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, 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.span.withConfig({