@superdispatch/ui-lab 0.24.9 → 0.25.1

package/dist-src/button/Button.js

@@ -23,6 +23,7 @@ function createButtonVariables(size, _ref) {
     textColor = Color.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
+    iconColor = textColor,
     outlineColor = Color.Transparent,
     borderColor = Color.Transparent,
     borderColorHovered = borderColor,
@@ -51,7 +52,8 @@ function createButtonVariables(size, _ref) {
     backgroundColorActive,
     textColorDisabled,
     borderColorDisabled,
-    backgroundColorDisabled
+    backgroundColorDisabled,
+    iconColor
   };
 }
 
@@ -81,7 +83,8 @@ function getNeutralVariables(size) {
     borderColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Silver500
+    textColorDisabled: Color.Silver500,
+    iconColor: Color.Dark100
   });
 }
 
@@ -146,7 +149,7 @@ var ButtonRoot = /*#__PURE__*/styled.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 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, 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 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, 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.span.withConfig({
   displayName: "Button__ButtonLabel",
@@ -155,11 +158,11 @@ var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
 var ButtonStartIcon = /*#__PURE__*/styled.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.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.span.withConfig({
   displayName: "Button__ButtonPendingIndicator",
   componentId: "SD__sc-1pwdpe3-4"

package/dist-src/text-box/TextBox.js

@@ -12,12 +12,12 @@ var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   primary: Color.Dark500,
   secondary: Color.Dark300,
   white: Color.White,
-  blue: Color.Blue300,
-  green: Color.Green300,
+  blue: Color.Blue500,
+  green: Color.Green500,
   purple: Color.Purple500,
-  red: Color.Red300,
-  teal: Color.Teal300,
-  yellow: Color.Yellow300
+  red: Color.Red500,
+  teal: Color.Teal500,
+  yellow: Color.Yellow500
 });
 var VARIANT_TYPE_MAPPING = {
   'heading-1': 'h1',

package/dist-web/index.js

@@ -324,6 +324,7 @@ function createButtonVariables(size, _ref) {
     textColor = Color.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
+    iconColor = textColor,
     outlineColor = Color.Transparent,
     borderColor = Color.Transparent,
     borderColorHovered = borderColor,
@@ -352,7 +353,8 @@ function createButtonVariables(size, _ref) {
     backgroundColorActive,
     textColorDisabled,
     borderColorDisabled,
-    backgroundColorDisabled
+    backgroundColorDisabled,
+    iconColor
   };
 }
 
@@ -382,7 +384,8 @@ function getNeutralVariables(size) {
     borderColorHovered: Color.Blue500,
     backgroundColorHovered: Color.Blue50,
     backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Silver500
+    textColorDisabled: Color.Silver500,
+    iconColor: Color.Dark100
   });
 }
 
@@ -447,7 +450,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled.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 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, 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 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, 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.span.withConfig({
   displayName: "Button__ButtonLabel",
@@ -456,11 +459,11 @@ var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
 var ButtonStartIcon = /*#__PURE__*/styled.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.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.span.withConfig({
   displayName: "Button__ButtonPendingIndicator",
   componentId: "SD__sc-1pwdpe3-4"
@@ -692,12 +695,12 @@ var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   primary: Color.Dark500,
   secondary: Color.Dark300,
   white: Color.White,
-  blue: Color.Blue300,
-  green: Color.Green300,
+  blue: Color.Blue500,
+  green: Color.Green500,
   purple: Color.Purple500,
-  red: Color.Red300,
-  teal: Color.Teal300,
-  yellow: Color.Yellow300
+  red: Color.Red500,
+  teal: Color.Teal500,
+  yellow: Color.Yellow500
 });
 var VARIANT_TYPE_MAPPING = {
   'heading-1': 'h1',