@atlaskit/button 16.1.2

package/dist/cjs/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _standardButton.default;
+  }
+});
+Object.defineProperty(exports, "LoadingButton", {
+  enumerable: true,
+  get: function get() {
+    return _loadingButton.default;
+  }
+});
+Object.defineProperty(exports, "CustomThemeButton", {
+  enumerable: true,
+  get: function get() {
+    return _customThemeButton.default;
+  }
+});
+Object.defineProperty(exports, "Theme", {
+  enumerable: true,
+  get: function get() {
+    return _customThemeButton.Theme;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _buttonGroup.default;
+  }
+});
+
+var _standardButton = _interopRequireDefault(require("./entry-points/standard-button"));
+
+var _loadingButton = _interopRequireDefault(require("./entry-points/loading-button"));
+
+var _customThemeButton = _interopRequireWildcard(require("./entry-points/custom-theme-button"));
+
+var _buttonGroup = _interopRequireDefault(require("./entry-points/button-group"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/loading-button.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = _interopRequireDefault(require("./button"));
+
+var _loadingSpinner = _interopRequireDefault(require("./shared/loading-spinner"));
+
+var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButton(_ref, ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["isLoading"]);
+  // Button already has React.memo, so just leaning on that
+  return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, rest) : null
+  }));
+}); // Tools including enzyme rely on components having a display name
+
+
+LoadingButton.displayName = 'LoadingButton';
+var _default = LoadingButton;
+exports.default = _default;

package/dist/cjs/shared/block-events.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = blockEvents;
+
+function abort(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+var tabKeyCode = 9;
+
+function onKey(event) {
+  // Allowing tab so that a user can move focus away
+  if (event.keyCode === tabKeyCode) {
+    return;
+  }
+
+  abort(event);
+}
+
+var block = {
+  onMouseDownCapture: abort,
+  onMouseUpCapture: abort,
+  // because we have tabIndex = -1 when disabled,
+  // keyboard events can only occur when there is an overlay
+  onKeyDownCapture: onKey,
+  onKeyUpCapture: onKey,
+  onTouchStartCapture: abort,
+  onTouchEndCapture: abort,
+  onPointerDownCapture: abort,
+  onPointerUpCapture: abort,
+  onClickCapture: abort,
+  // Just smashing the existing onClick for good measure
+  onClick: abort
+};
+var doNotBlock = {};
+
+function blockEvents(_ref) {
+  var isInteractive = _ref.isInteractive;
+  return isInteractive ? doNotBlock : block;
+}

package/dist/cjs/shared/button-base.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
+
+var _blockEvents = _interopRequireDefault(require("./block-events"));
+
+var _css = require("./css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+function noop() {} // Disabled buttons will still publish events for nested elements in webkit.
+// We are disabling pointer events on child elements so that
+// the button will always be the target of events
+// Note: firefox does not have this behaviour for child elements
+
+
+var noPointerEventsOnChildrenCss = {
+  '> *': {
+    pointerEvents: 'none'
+  }
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      buttonCss = props.buttonCss,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$shouldFitConta = props.shouldFitContainer,
+      shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
+      _props$isSelected = props.isSelected,
+      isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
+      iconBefore = props.iconBefore,
+      iconAfter = props.iconAfter,
+      children = props.children,
+      className = props.className,
+      href = props.href,
+      overlay = props.overlay,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      _props$type = props.type,
+      type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
+      _props$onMouseDown = props.onMouseDown,
+      providedOnMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
+      _props$onClick = props.onClick,
+      providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? href ? 'a' : 'button' : _props$component,
+      testId = props.testId,
+      analyticsContext = props.analyticsContext,
+      rest = (0, _objectWithoutProperties2.default)(props, ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled", "shouldFitContainer", "isSelected", "iconBefore", "iconAfter", "children", "className", "href", "overlay", "tabIndex", "type", "onMouseDown", "onClick", "component", "testId", "analyticsContext"]);
+  var ourRef = (0, _react.useRef)();
+  var setRef = (0, _react.useCallback)(function (node) {
+    ourRef.current = node;
+
+    if (ref == null) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    } // @ts-ignore
+
+
+    ref.current = node;
+  }, [ourRef, ref]); // Cross browser auto focusing is pretty broken, so we are doing it ourselves
+
+  (0, _useAutoFocus.default)(ourRef, autoFocus);
+  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: providedOnClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.1.2",
+    analyticsData: analyticsContext
+  }); // Button currently calls preventDefault, which is not standard button behaviour
+
+  var onMouseDown = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    providedOnMouseDown(event);
+  }, [providedOnMouseDown]); // Lose focus when becoming disabled (standard button behaviour)
+
+  (0, _react.useEffect)(function () {
+    var el = ourRef.current;
+
+    if (isDisabled && el && el === document.activeElement) {
+      el.blur();
+    }
+  }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
+
+  var hasOverlay = Boolean(overlay);
+  var fadeCss = (0, _css.getFadingCss)({
+    hasOverlay: hasOverlay
+  });
+  var isInteractive = !isDisabled && !hasOverlay;
+  return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, {
+    css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
+    className: className,
+    ref: setRef,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    disabled: isDisabled,
+    href: isInteractive ? href : undefined // using undefined so that the property doesn't exist when false
+    ,
+    "data-has-overlay": hasOverlay ? true : undefined,
+    "data-testid": testId,
+    type: type // Adding a tab index so element is always focusable, even when not a <button> or <a>
+    // Disabling focus via keyboard navigation when disabled
+    // as this is standard button behaviour
+    ,
+    tabIndex: isDisabled ? -1 : tabIndex
+  }, (0, _blockEvents.default)({
+    isInteractive: isInteractive
+  })), iconBefore ? (0, _core.jsx)("span", {
+    css: [fadeCss, (0, _css.getIconStyle)({
+      spacing: spacing
+    })]
+  }, iconBefore) : null, children ? (0, _core.jsx)("span", {
+    css: [fadeCss, (0, _css.getContentStyle)({
+      spacing: spacing
+    })]
+  }, children) : null, iconAfter ? (0, _core.jsx)("span", {
+    css: [fadeCss, (0, _css.getIconStyle)({
+      spacing: spacing
+    })]
+  }, iconAfter) : null, overlay ? (0, _core.jsx)("span", {
+    css: _css.overlayCss
+  }, overlay) : null);
+});
+
+exports.default = _default;

package/dist/cjs/shared/colors.js

@@ -0,0 +1,409 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _tokens = require("@atlaskit/tokens");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// 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)
+var fadedB75 = 'rgba(179, 212, 255, 0.6)';
+var values = {
+  // Default appearance
+  background: {
+    default: {
+      default: {
+        light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20A),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN70)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.N30A),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: (0, _tokens.token)('color.background.subtleNeutral.pressed', fadedB75),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      }
+    },
+    primary: {
+      default: {
+        light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B400),
+        dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.background.boldBrand.hover', colors.B300),
+        dark: (0, _tokens.token)('color.background.boldBrand.hover', colors.B75)
+      },
+      active: {
+        light: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B500),
+        dark: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B200)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      }
+    },
+    warning: {
+      default: {
+        light: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300),
+        dark: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200),
+        dark: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200)
+      },
+      active: {
+        light: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400),
+        dark: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
+      }
+    },
+    danger: {
+      default: {
+        light: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400),
+        dark: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300),
+        dark: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300)
+      },
+      active: {
+        light: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500),
+        dark: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
+      }
+    },
+    link: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
+      }
+    },
+    subtle: {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      hover: {
+        light: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.N30A),
+        dark: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.DN60)
+      },
+      active: {
+        light: (0, _tokens.token)('color.background.transparentNeutral.pressed', fadedB75),
+        dark: (0, _tokens.token)('color.background.transparentNeutral.pressed', colors.B75)
+      },
+      disabled: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: 'none',
+        dark: 'none'
+      },
+      selected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
+      }
+    }
+  },
+  boxShadowColor: {
+    default: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      }
+    },
+    primary: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      }
+    },
+    warning: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.Y500),
+        dark: (0, _tokens.token)('color.border.focus', colors.Y500)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.Y500),
+        dark: (0, _tokens.token)('color.border.focus', colors.Y500)
+      }
+    },
+    danger: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.R100),
+        dark: (0, _tokens.token)('color.border.focus', colors.R100)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.R100),
+        dark: (0, _tokens.token)('color.border.focus', colors.R100)
+      }
+    },
+    link: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      }
+    },
+    subtle: {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      }
+    },
+    'subtle-link': {
+      focus: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
+      }
+    }
+  },
+  color: {
+    default: {
+      default: {
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      }
+    },
+    primary: {
+      default: {
+        light: (0, _tokens.token)('color.text.onBold', colors.N0),
+        dark: (0, _tokens.token)('color.text.onBold', colors.DN30)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      }
+    },
+    warning: {
+      default: {
+        light: (0, _tokens.token)('color.text.onBoldWarning', colors.N800),
+        dark: (0, _tokens.token)('color.text.onBoldWarning', colors.N800)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N800),
+        dark: (0, _tokens.token)('color.text.selected', colors.N800)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N800),
+        dark: (0, _tokens.token)('color.text.selected', colors.N800)
+      }
+    },
+    danger: {
+      default: {
+        light: (0, _tokens.token)('color.text.onBold', colors.N0),
+        dark: (0, _tokens.token)('color.text.onBold', colors.N0)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N0),
+        dark: (0, _tokens.token)('color.text.selected', colors.N0)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N0),
+        dark: (0, _tokens.token)('color.text.selected', colors.N0)
+      }
+    },
+    link: {
+      default: {
+        light: (0, _tokens.token)('color.text.link.resting', colors.B400),
+        dark: (0, _tokens.token)('color.text.link.resting', colors.B100)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.text.link.resting', colors.B300),
+        dark: (0, _tokens.token)('color.text.link.resting', colors.B75)
+      },
+      active: {
+        light: (0, _tokens.token)('color.text.link.pressed', colors.B500),
+        dark: (0, _tokens.token)('color.text.link.pressed', colors.B200)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.N700)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.N700)
+      }
+    },
+    subtle: {
+      default: {
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
+      },
+      active: {
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      }
+    },
+    'subtle-link': {
+      default: {
+        light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
+        dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.DN400)
+      },
+      hover: {
+        light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N90),
+        dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.B50)
+      },
+      active: {
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN300)
+      },
+      disabled: {
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
+      },
+      selected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      },
+      focusSelected: {
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
+      }
+    }
+  }
+};
+var _default = values;
+exports.default = _default;