@superdispatch/ui-lab 0.25.0 → 0.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist-node/index.js +8 -5
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/button/Button.js +8 -5
  4. package/dist-web/index.js +8 -5
  5. package/dist-web/index.js.map +1 -1
  6. package/package.json +2 -2
package/dist-src/button/Button.js CHANGED
@@ -23,6 +23,7 @@ function createButtonVariables(size, _ref) {
23
23
  textColor = Color.Transparent,
24
24
  textColorHovered = textColor,
25
25
  textColorDisabled = textColor,
26
+ iconColor = textColor,
26
27
  outlineColor = Color.Transparent,
27
28
  borderColor = Color.Transparent,
28
29
  borderColorHovered = borderColor,
@@ -51,7 +52,8 @@ function createButtonVariables(size, _ref) {
51
52
  backgroundColorActive,
52
53
  textColorDisabled,
53
54
  borderColorDisabled,
54
- backgroundColorDisabled
55
+ backgroundColorDisabled,
56
+ iconColor
55
57
  };
56
58
  }
57
59
 
@@ -81,7 +83,8 @@ function getNeutralVariables(size) {
81
83
  borderColorHovered: Color.Blue500,
82
84
  backgroundColorHovered: Color.Blue50,
83
85
  backgroundColorActive: Color.Blue75,
84
- textColorDisabled: Color.Silver500
86
+ textColorDisabled: Color.Silver500,
87
+ iconColor: Color.Dark100
85
88
  });
86
89
  }
87
90
 
@@ -146,7 +149,7 @@ var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
146
149
  fullWidth
147
150
  } = _ref2;
148
151
  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);
149
- 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']));
152
+ 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']));
150
153
  });
151
154
  var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
152
155
  displayName: "Button__ButtonLabel",
@@ -155,11 +158,11 @@ var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
155
158
  var ButtonStartIcon = /*#__PURE__*/styled.span.withConfig({
156
159
  displayName: "Button__ButtonStartIcon",
157
160
  componentId: "SD__sc-1pwdpe3-2"
158
- })(["margin-right:4px;"]);
161
+ })(["margin-right:4px;color:var(--button-icon-color);"]);
159
162
  var ButtonEndIcon = /*#__PURE__*/styled.span.withConfig({
160
163
  displayName: "Button__ButtonEndIcon",
161
164
  componentId: "SD__sc-1pwdpe3-3"
162
- })(["margin-left:4px;"]);
165
+ })(["margin-left:4px;color:var(--button-icon-color);"]);
163
166
  var ButtonPendingIndicator = /*#__PURE__*/styled.span.withConfig({
164
167
  displayName: "Button__ButtonPendingIndicator",
165
168
  componentId: "SD__sc-1pwdpe3-4"
package/dist-web/index.js CHANGED
@@ -324,6 +324,7 @@ function createButtonVariables(size, _ref) {
324
324
  textColor = Color.Transparent,
325
325
  textColorHovered = textColor,
326
326
  textColorDisabled = textColor,
327
+ iconColor = textColor,
327
328
  outlineColor = Color.Transparent,
328
329
  borderColor = Color.Transparent,
329
330
  borderColorHovered = borderColor,
@@ -352,7 +353,8 @@ function createButtonVariables(size, _ref) {
352
353
  backgroundColorActive,
353
354
  textColorDisabled,
354
355
  borderColorDisabled,
355
- backgroundColorDisabled
356
+ backgroundColorDisabled,
357
+ iconColor
356
358
  };
357
359
  }
358
360
 
@@ -382,7 +384,8 @@ function getNeutralVariables(size) {
382
384
  borderColorHovered: Color.Blue500,
383
385
  backgroundColorHovered: Color.Blue50,
384
386
  backgroundColorActive: Color.Blue75,
385
- textColorDisabled: Color.Silver500
387
+ textColorDisabled: Color.Silver500,
388
+ iconColor: Color.Dark100
386
389
  });
387
390
  }
388
391
 
@@ -447,7 +450,7 @@ var ButtonRoot$1 = /*#__PURE__*/styled.button.withConfig({
447
450
  fullWidth
448
451
  } = _ref2;
449
452
  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);
450
- 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']));
453
+ 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']));
451
454
  });
452
455
  var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
453
456
  displayName: "Button__ButtonLabel",
@@ -456,11 +459,11 @@ var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
456
459
  var ButtonStartIcon = /*#__PURE__*/styled.span.withConfig({
457
460
  displayName: "Button__ButtonStartIcon",
458
461
  componentId: "SD__sc-1pwdpe3-2"
459
- })(["margin-right:4px;"]);
462
+ })(["margin-right:4px;color:var(--button-icon-color);"]);
460
463
  var ButtonEndIcon = /*#__PURE__*/styled.span.withConfig({
461
464
  displayName: "Button__ButtonEndIcon",
462
465
  componentId: "SD__sc-1pwdpe3-3"
463
- })(["margin-left:4px;"]);
466
+ })(["margin-left:4px;color:var(--button-icon-color);"]);
464
467
  var ButtonPendingIndicator = /*#__PURE__*/styled.span.withConfig({
465
468
  displayName: "Button__ButtonPendingIndicator",
466
469
  componentId: "SD__sc-1pwdpe3-4"