@superdispatch/ui-lab 0.25.0 → 0.25.2

package/dist-node/index.js

@@ -331,6 +331,7 @@ function createButtonVariables(size, _ref) {
     textColor = ui.Color.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
+    iconColor = textColor,
     outlineColor = ui.Color.Transparent,
     borderColor = ui.Color.Transparent,
     borderColorHovered = borderColor,
@@ -359,7 +360,8 @@ function createButtonVariables(size, _ref) {
     backgroundColorActive,
     textColorDisabled,
     borderColorDisabled,
-    backgroundColorDisabled
+    backgroundColorDisabled,
+    iconColor
   };
 }
 
@@ -389,7 +391,8 @@ function getNeutralVariables(size) {
     borderColorHovered: ui.Color.Blue500,
     backgroundColorHovered: ui.Color.Blue50,
     backgroundColorActive: ui.Color.Blue75,
-    textColorDisabled: ui.Color.Silver500
+    textColorDisabled: ui.Color.Silver500,
+    iconColor: ui.Color.Dark100
   });
 }
 
@@ -454,7 +457,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
     fullWidth
   } = _ref2;
   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:",";span{svg{fill:",";}}}}&: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.textColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
+  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-icon-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:",";--button-icon-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";--button-icon-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";span{svg{fill:",";}}}}&: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.iconColor, 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.textColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.textColorHovered, 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({
   displayName: "Button__ButtonLabel",
@@ -463,11 +466,11 @@ var ButtonLabel = /*#__PURE__*/styled__default.span.withConfig({
 var ButtonStartIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonStartIcon",
   componentId: "SD__sc-1pwdpe3-2"
-})(["margin-right:4px;"]);
+})(["margin-right:4px;color:var(--button-icon-color);"]);
 var ButtonEndIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonEndIcon",
   componentId: "SD__sc-1pwdpe3-3"
-})(["margin-left:4px;"]);
+})(["margin-left:4px;color:var(--button-icon-color);"]);
 var ButtonPendingIndicator = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonPendingIndicator",
   componentId: "SD__sc-1pwdpe3-4"