@atlaskit/range 5.1.4 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/range
 
+## 6.0.0
+
+### Major Changes
+
+- [`17d9edaa415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17d9edaa415) - In preparation for compiled adoption, internal styling has been rewritten to remove dynamic styles.
+  This includes custom theming using the `theme` prop, which has been removed.
+
+  If you are not using the `theme` prop, there should be no breaking changes.
+
 ## 5.1.4
 
 ### Patch Changes

package/dist/cjs/range.js

@@ -21,9 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styled = require("./styled");
 
-var _theme = require("./theme");
-
-var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"];
+var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
 
 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); }
 
@@ -69,7 +67,6 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
       propsValue = props.value,
-      theme = props.theme,
       testId = props.testId,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
@@ -93,18 +90,14 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
   }, [onChange]);
   var renderValue = propsValue !== undefined ? propsValue : value;
   var valuePercent = getRoundedPercentValue(renderValue, min, max, step);
-  return /*#__PURE__*/_react.default.createElement(_theme.Theme.Provider, {
-    value: theme
-  }, /*#__PURE__*/_react.default.createElement(_theme.Theme.Consumer, null, function (computedTheme) {
-    return /*#__PURE__*/_react.default.createElement(_styled.Input, (0, _extends2.default)({
-      type: "range",
-      disabled: isDisabled,
-      onChange: handleChange,
-      value: renderValue,
-      valuePercent: valuePercent,
-      "data-testid": testId
-    }, computedTheme, spreadProps));
-  }));
+  return /*#__PURE__*/_react.default.createElement(_styled.Input, (0, _extends2.default)({
+    type: "range",
+    disabled: isDisabled,
+    onChange: handleChange,
+    value: renderValue,
+    valuePercent: valuePercent,
+    "data-testid": testId
+  }, spreadProps));
 });
 
 exports.default = _default;

package/dist/cjs/styled.js

@@ -2,96 +2,138 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rangeInputStyle = exports.overallHeight = exports.Input = void 0;
+exports.Input = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _excluded = ["valuePercent", "thumb", "track", "style"];
-
-var _templateObject;
+var theme = _interopRequireWildcard(require("./theme"));
 
-var sliderThumbSize = 16;
-var sliderThumbBorderThickness = 2;
-var sliderLineThickness = 4;
-var transitionDuration = '0.2s';
-var sliderBorderRadius = sliderLineThickness / 2;
-var overallHeight = 40;
-exports.overallHeight = overallHeight;
+var _excluded = ["valuePercent", "style"];
 
-var getBackgroundGradient = function getBackgroundGradient(_ref) {
-  var lower = _ref.lower,
-      upper = _ref.upper;
-  return "\n    background: linear-gradient(".concat(lower, ", ").concat(lower, ") 0 / var(--range-inline-width) 100%\n      no-repeat ").concat(upper, ";\n    [dir='rtl'] & {\n      background-position: right;\n    }\n  ");
-};
-
-var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"); // Thumb style
+var _activeHover, _disabled, _css;
 
-var sliderThumbStyle = function sliderThumbStyle(_ref2) {
-  var thumb = _ref2.thumb;
-  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    box-shadow: ").concat(elevationStyle, "\n  ");
-}; // Track styles
+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; }
 
-var sliderTrackStyle = "\n  border-radius: ".concat(sliderBorderRadius, "px;\n  border: 0;\n  cursor: pointer;\n  height: ").concat(sliderLineThickness, "px;\n  width: 100%;\n  transition: background-color ").concat(transitionDuration, " ease-in-out;\n"); // Range input styles
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var chromeRangeInputStyle = function chromeRangeInputStyle(tokens) {
-  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
-};
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var firefoxRangeInputStyle = function firefoxRangeInputStyle(tokens) {
-  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+var VAR_THUMB_BORDER_COLOR = '--thumb-border';
+var VAR_THUMB_SHADOW = '--thumb-shadow';
+var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
+var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
+var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
+var sliderThumbStyles = {
+  boxSizing: 'border-box',
+  width: theme.thumb.size,
+  height: theme.thumb.size,
+  background: theme.thumb.background,
+  border: "".concat(theme.thumb.borderWidth, "px solid var(").concat(VAR_THUMB_BORDER_COLOR, ")"),
+  borderRadius: '50%',
+  boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
+  cursor: 'pointer',
+  // Different implicit behavior across browsers -> making it explicit
+  transition: "border-color ".concat(theme.transitionDuration, " ease-in-out")
 };
-
-var IERangeInputStyle = function IERangeInputStyle(tokens) {
-  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+var sliderTrackStyles = {
+  borderRadius: theme.track.borderRadius,
+  border: 0,
+  cursor: 'pointer',
+  height: theme.track.height,
+  width: '100%',
+  transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
 }; // Styles are split per browser as they are implemented differently
 // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
 // with CSS selectors they don't recognise, e.g. &::-ms-thumb
 
-
-var rangeInputStyle = function rangeInputStyle(tokens) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n    background: transparent; /* Otherwise white in Chrome */\n    height: ", "px; /* Otherwise thumb will collide with previous box element */\n    padding: 0; /* IE11 includes padding, this normalises it */\n    width: 100%; /* Specific width is required for Firefox. */\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    ", "\n    ", "\n    ", ";\n\n    font-family: ", ";\n\n    background-position: right;\n  "])), overallHeight, chromeRangeInputStyle(tokens), firefoxRangeInputStyle(tokens), IERangeInputStyle(tokens), (0, _constants.fontFamily)());
+var browserStyles = {
+  webkit: (0, _core.css)({
+    WebkitAppearance: 'none',
+    // Hides the slider so that custom slider can be made
+    '::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
+      marginTop: -(theme.thumb.size - theme.track.height) / 2,
+      WebkitAppearance: 'none'
+    }),
+    '::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
+      /**
+       * Webkit does not have separate properties for the background/foreground like firefox.
+       * Instead we use background layering:
+       * - The gray background is a simple background color.
+       * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
+       *
+       * Individual properties have been used over the `background` shorthand for readability.
+       */
+      backgroundColor: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")"),
+      backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      '[dir="rtl"] &': {
+        backgroundPosition: 'right'
+      }
+    }),
+    ':disabled': {
+      '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
+        cursor: 'not-allowed'
+      }
+    }
+  }),
+  firefox: (0, _core.css)({
+    '::-moz-range-thumb': sliderThumbStyles,
+    '::-moz-focus-outer': {
+      border: 0
+    },
+    '::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
+      background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
+    }),
+    '::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
+      background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
+    }),
+    ':disabled': {
+      '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
+        cursor: 'not-allowed'
+      }
+    }
+  })
 };
-
-exports.rangeInputStyle = rangeInputStyle;
+var baseStyles = (0, _core.css)({
+  width: '100%',
+  // Has a fixed width by default
+  height: theme.input.height,
+  // Otherwise thumb will collide with previous box element
+  background: 'transparent',
+  // Otherwise white
+  ':focus': {
+    outline: 'none'
+  },
+  ':disabled': {
+    cursor: 'not-allowed'
+  }
+});
+var themeStyles = (0, _core.css)((_css = {}, (0, _defineProperty2.default)(_css, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.default), (0, _defineProperty2.default)(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), (0, _defineProperty2.default)(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), (0, _defineProperty2.default)(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), (0, _defineProperty2.default)(_css, ':active, :hover', (_activeHover = {}, (0, _defineProperty2.default)(_activeHover, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), (0, _defineProperty2.default)(_activeHover, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _activeHover)), (0, _defineProperty2.default)(_css, ':focus', (0, _defineProperty2.default)({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), (0, _defineProperty2.default)(_css, ':disabled', (_disabled = {}, (0, _defineProperty2.default)(_disabled, VAR_THUMB_SHADOW, theme.thumb.boxShadow.disabled), (0, _defineProperty2.default)(_disabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.disabled), (0, _defineProperty2.default)(_disabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.disabled), _disabled)), _css));
 var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var valuePercent = props.valuePercent,
-      thumb = props.thumb,
-      track = props.track,
       style = props.style,
-      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // Note: emotion will cache unique outputs as their own this
-  // We are memoizing the creation of this string
-
-  var styles = (0, _react.useMemo)(function () {
-    return rangeInputStyle({
-      track: track,
-      thumb: thumb
-    });
-  }, [thumb, track]); // We are creating a css variable to control the "progress" portion of the range input
-  // This avoids us needing to create a new css class for each new percentage value
-
+      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _core.jsx)("input", (0, _extends2.default)({}, strippedProps, {
-    style: {
-      '--range-inline-width': "".concat(valuePercent, "%")
-    },
-    ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    ,
-    css: styles
+    style: (0, _defineProperty2.default)({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
+    ref: ref,
+    css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
   }));
 });
 exports.Input = Input;

package/dist/cjs/theme.js

@@ -5,48 +5,51 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.track = exports.thumb = exports.Theme = void 0;
+exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _components = require("@atlaskit/theme/components");
-
 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; }
 
+var transitionDuration = '0.2s';
+exports.transitionDuration = transitionDuration;
+var input = {
+  height: 40
+};
+exports.input = input;
 var thumb = {
-  default: {
-    background: "var(--ds-surface-raised, ".concat(colors.N0, ")")
-  },
-  disabled: {
-    boxShadow: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
+  size: 16,
+  borderWidth: 2,
+  background: "var(--ds-surface-raised, ".concat(colors.N0, ")"),
+  borderColor: {
+    default: 'transparent',
+    focused: "var(--ds-border-focused, ".concat(colors.B200, ")")
   },
-  focus: {
-    background: "var(--ds-background-neutral-bold, ".concat(colors.N0, ")"),
-    border: "var(--ds-border-focused, ".concat(colors.B200, ")")
+  boxShadow: {
+    default: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A), ")"),
+    disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
   }
 };
 exports.thumb = thumb;
 var track = {
-  default: {
-    lower: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
-    upper: "var(--ds-background-neutral, ".concat(colors.N30, ")")
-  },
-  disabled: {
-    lower: "var(--ds-text-disabled, ".concat(colors.N50, ")"),
-    upper: "var(--ds-background-disabled, ".concat(colors.N30, ")")
+  height: 4,
+
+  /**
+   * borderRadius >= height / 2 to create a pill shape.
+   * Using '50%' creates an ellipse.
+   */
+  borderRadius: 2,
+  background: {
+    default: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
+    hovered: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")"),
+    disabled: "var(--ds-background-disabled, ".concat(colors.N30, ")")
   },
-  hover: {
-    lower: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
-    upper: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")")
+  foreground: {
+    default: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
+    hovered: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
+    disabled: "var(--ds-text-disabled, ".concat(colors.N50, ")")
   }
 };
-exports.track = track;
-var Theme = (0, _components.createTheme)(function () {
-  return {
-    thumb: thumb,
-    track: track
-  };
-});
-exports.Theme = Theme;
+exports.track = track;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.1.4",
+	"version": "6.0.0",
 	"sideEffects": false
 }

package/dist/es2019/range.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
 import { Input } from './styled';
-import { Theme } from './theme';
 
 const snapToStep = (value, min, step) => {
   // Normalise the value to allow for division properly with different min values
@@ -34,7 +33,6 @@ export default /*#__PURE__*/forwardRef(function Range(props, ref) {
     onChange = noop,
     step = 1,
     value: propsValue,
-    theme,
     testId,
     ...rest
   } = props;
@@ -54,14 +52,12 @@ export default /*#__PURE__*/forwardRef(function Range(props, ref) {
   }, [onChange]);
   const renderValue = propsValue !== undefined ? propsValue : value;
   const valuePercent = getRoundedPercentValue(renderValue, min, max, step);
-  return /*#__PURE__*/React.createElement(Theme.Provider, {
-    value: theme
-  }, /*#__PURE__*/React.createElement(Theme.Consumer, null, computedTheme => /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/React.createElement(Input, _extends({
     type: "range",
     disabled: isDisabled,
     onChange: handleChange,
     value: renderValue,
     valuePercent: valuePercent,
     "data-testid": testId
-  }, computedTheme, spreadProps))));
+  }, spreadProps));
 });