@atlaskit/button 16.1.2

package/dist/es2019/shared/colors.js

@@ -0,0 +1,393 @@
+import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+// Hard coding the active rgba color value rather than using a helper to convert it
+// With helper it would be: hex2rgba(colors.B75, 0.6)
+const fadedB75 = 'rgba(179, 212, 255, 0.6)';
+const values = {
+  // Default appearance
+  background: {
+    default: {
+      default: {
+        light: token('color.background.subtleNeutral.resting', colors.N20A),
+        dark: token('color.background.subtleNeutral.resting', colors.DN70)
+      },
+      hover: {
+        light: token('color.background.subtleNeutral.hover', colors.N30A),
+        dark: token('color.background.subtleNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: token('color.background.subtleNeutral.pressed', fadedB75),
+        dark: token('color.background.subtleNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    primary: {
+      default: {
+        light: token('color.background.boldBrand.resting', colors.B400),
+        dark: token('color.background.boldBrand.resting', colors.B100)
+      },
+      hover: {
+        light: token('color.background.boldBrand.hover', colors.B300),
+        dark: token('color.background.boldBrand.hover', colors.B75)
+      },
+      active: {
+        light: token('color.background.boldBrand.pressed', colors.B500),
+        dark: token('color.background.boldBrand.pressed', colors.B200)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    warning: {
+      default: {
+        light: token('color.background.boldWarning.resting', colors.Y300),
+        dark: token('color.background.boldWarning.resting', colors.Y300)
+      },
+      hover: {
+        light: token('color.background.boldWarning.hover', colors.Y200),
+        dark: token('color.background.boldWarning.hover', colors.Y200)
+      },
+      active: {
+        light: token('color.background.boldWarning.pressed', colors.Y400),
+        dark: token('color.background.boldWarning.pressed', colors.Y400)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
+      }
+    },
+    danger: {
+      default: {
+        light: token('color.background.boldDanger.resting', colors.R400),
+        dark: token('color.background.boldDanger.resting', colors.R400)
+      },
+      hover: {
+        light: token('color.background.boldDanger.hover', colors.R300),
+        dark: token('color.background.boldDanger.hover', colors.R300)
+      },
+      active: {
+        light: token('color.background.boldDanger.pressed', colors.R500),
+        dark: token('color.background.boldDanger.pressed', colors.R500)
+      },
+      disabled: {
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
+      }
+    },
+    link: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      }
+    },
+    subtle: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      hover: {
+        light: token('color.background.transparentNeutral.hover', colors.N30A),
+        dark: token('color.background.transparentNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: token('color.background.transparentNeutral.pressed', fadedB75),
+        dark: token('color.background.transparentNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
+      }
+    }
+  },
+  boxShadowColor: {
+    default: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    primary: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    warning: {
+      focus: {
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
+      }
+    },
+    danger: {
+      focus: {
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
+      }
+    },
+    link: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    subtle: {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    },
+    'subtle-link': {
+      focus: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
+      }
+    }
+  },
+  color: {
+    default: {
+      default: {
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    primary: {
+      default: {
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.DN30)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    warning: {
+      default: {
+        light: token('color.text.onBoldWarning', colors.N800),
+        dark: token('color.text.onBoldWarning', colors.N800)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
+      }
+    },
+    danger: {
+      default: {
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.N0)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
+      }
+    },
+    link: {
+      default: {
+        light: token('color.text.link.resting', colors.B400),
+        dark: token('color.text.link.resting', colors.B100)
+      },
+      hover: {
+        light: token('color.text.link.resting', colors.B300),
+        dark: token('color.text.link.resting', colors.B75)
+      },
+      active: {
+        light: token('color.text.link.pressed', colors.B500),
+        dark: token('color.text.link.pressed', colors.B200)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
+      }
+    },
+    subtle: {
+      default: {
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: token('color.text.mediumEmphasis', colors.N200),
+        dark: token('color.text.mediumEmphasis', colors.DN400)
+      },
+      hover: {
+        light: token('color.text.mediumEmphasis', colors.N90),
+        dark: token('color.text.mediumEmphasis', colors.B50)
+      },
+      active: {
+        light: token('color.text.highEmphasis', colors.N400),
+        dark: token('color.text.highEmphasis', colors.DN300)
+      },
+      disabled: {
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
+      }
+    }
+  }
+};
+export default values;

package/dist/es2019/shared/css.js

@@ -0,0 +1,249 @@
+import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import colors from './colors';
+const borderRadius = getBorderRadius();
+const gridSize = getGridSize();
+const fontSize = getFontSize(); // ## Button layout
+//
+// /------------------------------------------------------------------------------------------------------------------\
+// |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
+// |  10px →  |  ← 2px  |   icon   |  2px →  |  ← 2px  |           |  2px →  |  ← 2px  |  icon   |  2px →  |  ← 10px  |
+// |  padding |  margin |  before  |  margin |  margin |  content  |  margin |  margin |  after  |  margin |  padding |
+// |    (12px total)    |          |    (4px total)    |           |    (4px total)    |         |    (12px total)    |
+// |       →  |  ←      |          |      →  |  ←      |           |      →  |  ←      |         |      →  |  ←       |
+// \------------------------------------------------------------------------------------------------------------------/
+//                                           ↑                               ↑
+//                                        Margins don't collapse with inline-flex
+//
+
+const heights = {
+  default: `${gridSize * 4 / fontSize}em`,
+  // 32px
+  compact: `${gridSize * 3 / fontSize}em`,
+  none: 'auto'
+};
+const lineHeights = {
+  default: heights.default,
+  compact: heights.compact,
+  none: 'inherit'
+};
+const padding = {
+  // 10px gutter
+  default: `0 ${gridSize + gridSize / 4}px`,
+  compact: `0 ${gridSize + gridSize / 4}px`,
+  none: '0'
+};
+const singleIconPadding = {
+  // 2px gutter
+  compact: `0 ${gridSize / 4}px`,
+  default: `0 ${gridSize / 4}px`,
+  none: '0'
+};
+const verticalAlign = {
+  default: 'middle',
+  compact: 'middle',
+  none: 'baseline'
+};
+const innerMargin = {
+  content: `0 ${gridSize / 4}px`,
+  icon: `0 ${gridSize / 4}px`
+};
+
+function getColor({
+  group,
+  key,
+  mode
+}) {
+  const rule = group[key] || group.default;
+  return rule[mode];
+}
+
+function getColors({
+  appearance,
+  key,
+  mode
+}) {
+  return {
+    background: getColor({
+      group: colors.background[appearance],
+      key,
+      mode
+    }),
+    // Needing to add !important to overcome specificity issue caused by deprecated AtlaskitThemeProvider
+    color: `${getColor({
+      group: colors.color[appearance],
+      key,
+      mode
+    })} !important`
+  };
+}
+
+export function getCss({
+  appearance,
+  spacing,
+  mode,
+  isSelected,
+  shouldFitContainer,
+  isOnlySingleIcon
+}) {
+  const baseColors = getColors({
+    appearance,
+    key: isSelected ? 'selected' : 'default',
+    mode
+  });
+  return {
+    // 0px margin added to css-reset
+    alignItems: 'baseline',
+    borderWidth: 0,
+    borderRadius,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: 'inherit',
+    fontStyle: 'normal',
+    // Chrome recently changed button so that they use 'arial' as the font family
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    // margin for button has been applied to css reset
+    maxWidth: '100%',
+    // Needed to position overlay
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+    whiteSpace: 'nowrap',
+    // dynamic styles
+    ...baseColors,
+    cursor: 'pointer',
+    height: heights[spacing],
+    lineHeight: lineHeights[spacing],
+    padding: isOnlySingleIcon ? singleIconPadding[spacing] : padding[spacing],
+    verticalAlign: verticalAlign[spacing],
+    width: shouldFitContainer ? '100%' : 'auto',
+    // justifyContent required for shouldFitContainer buttons with an icon inside
+    justifyContent: 'center',
+    // Note: we cannot disable pointer events when there is an overlay.
+    // That would be easy for styling, but it would start letting events through on disabled buttons
+    // Disabling visited styles (just using the base colors)
+    '&:visited': { ...baseColors
+    },
+    '&:hover': { ...getColors({
+        appearance,
+        key: isSelected ? 'selected' : 'hover',
+        mode
+      }),
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'inherit',
+      // background, box-shadow
+      transitionDuration: '0s, 0.15s'
+    },
+    '&:focus': { ...getColors({
+        appearance,
+        key: isSelected ? 'focusSelected' : 'focus',
+        mode
+      }),
+      boxShadow: `0 0 0 2px ${colors.boxShadowColor[appearance].focus[mode]}`,
+      // background, box-shadow
+      transitionDuration: '0s, 0.2s',
+      // disabling browser focus outline
+      outline: 'none'
+    },
+    // giving active styles preference by listing them after focus
+    '&:active': { ...getColors({
+        appearance,
+        key: isSelected ? 'selected' : 'active',
+        mode
+      }),
+      // background, box-shadow
+      transitionDuration: '0s, 0s'
+    },
+    // preventDefault prevents regular active styles from applying in Firefox
+    '&[data-firefox-is-active="true"]': { ...getColors({
+        appearance,
+        key: isSelected ? 'selected' : 'active',
+        mode
+      }),
+      // background, box-shadow
+      transitionDuration: '0s, 0s'
+    },
+    // Giving disabled styles preference over active by listing them after.
+    // Not using '&:disabled' because :disabled is not a valid state for all element types
+    // so we are targeting the attribute
+    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
+    '&[disabled]': { // always using 'disabled' even when selected
+      ...getColors({
+        appearance,
+        key: 'disabled',
+        mode
+      }),
+      cursor: 'not-allowed',
+      textDecoration: 'none'
+    },
+    '&[data-has-overlay="true"]': {
+      cursor: 'default',
+      textDecoration: 'none'
+    },
+    // disabling hover and active color changes when there is an overlay, but the button is not disabled
+    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': { ...getColors({
+        appearance,
+        key: isSelected ? 'selected' : 'default',
+        mode
+      })
+    },
+    '&::-moz-focus-inner': {
+      border: 0,
+      margin: 0,
+      padding: 0
+    }
+  };
+} // inline-flex child
+
+export function getIconStyle({
+  spacing
+}) {
+  return {
+    alignSelf: 'center',
+    display: 'flex',
+    // icon size cannot grow and shrink
+    flexGrow: 0,
+    flexShrink: 0,
+    lineHeight: 0,
+    fontSize: 0,
+    userSelect: 'none',
+    margin: spacing === 'none' ? 0 : innerMargin.icon
+  };
+} // inline-flex child
+
+export function getContentStyle({
+  spacing
+}) {
+  return {
+    margin: spacing === 'none' ? 0 : innerMargin.content,
+    // content can grow and shrink
+    flexGrow: 1,
+    flexShrink: 1,
+    // ellipsis for overflow text
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+export function getFadingCss({
+  hasOverlay
+}) {
+  return {
+    transition: 'opacity 0.3s',
+    opacity: hasOverlay ? 0 : 1
+  };
+}
+export const overlayCss = {
+  // stretching to full width / height of button
+  // this is important as we need it to still block
+  // event if clicking in the button's own padding
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  // Putting all children in the center
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+};