@atlaskit/range 6.1.0 → 7.0.0

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 (14) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/styled.js +12 -7
  3. package/dist/cjs/theme.js +13 -17
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/styled.js +16 -13
  6. package/dist/es2019/theme.js +13 -11
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/styled.js +12 -7
  9. package/dist/esm/theme.js +13 -11
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/theme.d.ts +21 -19
  12. package/dist/types-ts4.0/theme.d.ts +21 -19
  13. package/package.json +6 -4
  14. package/report.api.md +16 -34
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/range
2
2
 
3
+ ## 7.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`78741dd1644`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78741dd1644) - [ux] Breaking visual changes to range to afford better contrast:
8
+
9
+ - The scrubber now applies the same color as the foreground
10
+ - The disabled state has been altered; it's now a consistently applied opacity state overlay across the whole element
11
+ - The input now uses :focus-visible, rather than :focus and applies an offset focus ring
12
+
13
+ ## 6.1.1
14
+
15
+ ### Patch Changes
16
+
17
+ - [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
18
+
3
19
  ## 6.1.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/styled.js CHANGED
@@ -23,7 +23,7 @@ var theme = _interopRequireWildcard(require("./theme"));
23
23
 
24
24
  var _excluded = ["valuePercent", "style"];
25
25
 
26
- var _activeHover, _disabled, _css;
26
+ var _hoverNotDisabled, _css;
27
27
 
28
28
  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); }
29
29
 
@@ -35,6 +35,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
35
35
 
36
36
  var VAR_THUMB_BORDER_COLOR = '--thumb-border';
37
37
  var VAR_THUMB_SHADOW = '--thumb-shadow';
38
+ var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
38
39
  var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
39
40
  var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
40
41
  var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
@@ -42,13 +43,16 @@ var sliderThumbStyles = {
42
43
  boxSizing: 'border-box',
43
44
  width: theme.thumb.size,
44
45
  height: theme.thumb.size,
45
- background: theme.thumb.background,
46
- border: "".concat(theme.thumb.borderWidth, "px solid var(").concat(VAR_THUMB_BORDER_COLOR, ")"),
46
+ border: 'none',
47
+ background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
48
+ // adapted from @atlaskit/focus-ring
49
+ outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
50
+ outlineOffset: '2px',
47
51
  borderRadius: '50%',
48
52
  boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
49
53
  cursor: 'pointer',
50
- // Different implicit behavior across browsers -> making it explicit
51
- transition: "border-color ".concat(theme.transitionDuration, " ease-in-out")
54
+ // Different implicit behavior across browsers -> making it explicit.
55
+ transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
52
56
  };
53
57
  var sliderTrackStyles = {
54
58
  borderRadius: theme.track.borderRadius,
@@ -122,10 +126,11 @@ var baseStyles = (0, _react2.css)({
122
126
  outline: 'none'
123
127
  },
124
128
  ':disabled': {
125
- cursor: 'not-allowed'
129
+ cursor: 'not-allowed',
130
+ opacity: "var(--ds-opacity-disabled, 0.4)"
126
131
  }
127
132
  });
128
- var themeStyles = (0, _react2.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));
133
+ var themeStyles = (0, _react2.css)((_css = {}, (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, ':hover:not(:disabled)', (_hoverNotDisabled = {}, (0, _defineProperty2.default)(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), (0, _defineProperty2.default)(_css, ':active:not(:disabled)', (0, _defineProperty2.default)({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), (0, _defineProperty2.default)(_css, ':focus-visible', (0, _defineProperty2.default)({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
129
134
  /**
130
135
  * __Input__
131
136
  * Internal-only styled input component.
package/dist/cjs/theme.js CHANGED
@@ -1,17 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
9
7
 
10
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
11
-
12
- 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); }
13
-
14
- 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; }
8
+ var _colors = require("@atlaskit/theme/colors");
15
9
 
16
10
  var transitionDuration = '0.2s';
17
11
  exports.transitionDuration = transitionDuration;
@@ -22,14 +16,18 @@ exports.input = input;
22
16
  var thumb = {
23
17
  size: 16,
24
18
  borderWidth: 2,
25
- background: "var(--ds-surface-raised, ".concat(colors.N0, ")"),
19
+ background: {
20
+ default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
21
+ hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")"),
22
+ pressed: "var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")
23
+ },
26
24
  borderColor: {
27
25
  default: 'transparent',
28
- focused: "var(--ds-border-focused, ".concat(colors.B200, ")")
26
+ focused: "var(--ds-border-focused, ".concat(_colors.B200, ")")
29
27
  },
30
28
  boxShadow: {
31
- default: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A), ")"),
32
- disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
29
+ default: "var(--ds-UNSAFE_util-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
30
+ disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(_colors.N60A), ")")
33
31
  }
34
32
  };
35
33
  exports.thumb = thumb;
@@ -42,14 +40,12 @@ var track = {
42
40
  */
43
41
  borderRadius: 2,
44
42
  background: {
45
- default: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
46
- hovered: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")"),
47
- disabled: "var(--ds-background-disabled, ".concat(colors.N30, ")")
43
+ default: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
44
+ hovered: "var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")
48
45
  },
49
46
  foreground: {
50
- default: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
51
- hovered: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
52
- disabled: "var(--ds-text-disabled, ".concat(colors.N50, ")")
47
+ default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
48
+ hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")
53
49
  }
54
50
  };
55
51
  exports.track = track;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "6.1.0",
3
+ "version": "7.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/styled.js CHANGED
@@ -6,6 +6,7 @@ import { css, jsx } from '@emotion/react';
6
6
  import * as theme from './theme';
7
7
  const VAR_THUMB_BORDER_COLOR = '--thumb-border';
8
8
  const VAR_THUMB_SHADOW = '--thumb-shadow';
9
+ const VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
9
10
  const VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
10
11
  const VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
11
12
  const VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
@@ -13,13 +14,16 @@ const sliderThumbStyles = {
13
14
  boxSizing: 'border-box',
14
15
  width: theme.thumb.size,
15
16
  height: theme.thumb.size,
16
- background: theme.thumb.background,
17
- border: `${theme.thumb.borderWidth}px solid var(${VAR_THUMB_BORDER_COLOR})`,
17
+ border: 'none',
18
+ background: `var(${VAR_THUMB_BACKGROUND_COLOR}, ${theme.thumb.background.default})`,
19
+ // adapted from @atlaskit/focus-ring
20
+ outline: `solid 2px var(${VAR_THUMB_BORDER_COLOR})`,
21
+ outlineOffset: '2px',
18
22
  borderRadius: '50%',
19
23
  boxShadow: `var(${VAR_THUMB_SHADOW})`,
20
24
  cursor: 'pointer',
21
- // Different implicit behavior across browsers -> making it explicit
22
- transition: `border-color ${theme.transitionDuration} ease-in-out`
25
+ // Different implicit behavior across browsers -> making it explicit.
26
+ transition: `background-color ${theme.transitionDuration} ease-in-out`
23
27
  };
24
28
  const sliderTrackStyles = {
25
29
  borderRadius: theme.track.borderRadius,
@@ -94,25 +98,24 @@ const baseStyles = css({
94
98
  outline: 'none'
95
99
  },
96
100
  ':disabled': {
97
- cursor: 'not-allowed'
101
+ cursor: 'not-allowed',
102
+ opacity: "var(--ds-opacity-disabled, 0.4)"
98
103
  }
99
104
  });
100
105
  const themeStyles = css({
101
- [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.default,
102
106
  [VAR_THUMB_SHADOW]: theme.thumb.boxShadow.default,
103
107
  [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.default,
104
108
  [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.default,
105
- ':active, :hover': {
109
+ ':hover:not(:disabled)': {
110
+ [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.hovered,
106
111
  [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.hovered,
107
112
  [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.hovered
108
113
  },
109
- ':focus': {
110
- [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
114
+ ':active:not(:disabled)': {
115
+ [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.pressed
111
116
  },
112
- ':disabled': {
113
- [VAR_THUMB_SHADOW]: theme.thumb.boxShadow.disabled,
114
- [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.disabled,
115
- [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.disabled
117
+ ':focus-visible': {
118
+ [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
116
119
  }
117
120
  });
118
121
  /**
package/dist/es2019/theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import * as colors from '@atlaskit/theme/colors';
1
+ import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
2
2
  export const transitionDuration = '0.2s';
3
3
  export const input = {
4
4
  height: 40
@@ -6,14 +6,18 @@ export const input = {
6
6
  export const thumb = {
7
7
  size: 16,
8
8
  borderWidth: 2,
9
- background: `var(--ds-surface-raised, ${colors.N0})`,
9
+ background: {
10
+ default: `var(--ds-background-neutral-bold, ${B400})`,
11
+ hovered: `var(--ds-background-neutral-bold-hovered, ${B300})`,
12
+ pressed: `var(--ds-background-neutral-bold-pressed, ${B200})`
13
+ },
10
14
  borderColor: {
11
15
  default: 'transparent',
12
- focused: `var(--ds-border-focused, ${colors.B200})`
16
+ focused: `var(--ds-border-focused, ${B200})`
13
17
  },
14
18
  boxShadow: {
15
- default: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`})`,
16
- disabled: `var(--ds-shadow-raised, ${`0 0 1px ${colors.N60A}`})`
19
+ default: `var(--ds-UNSAFE_util-transparent, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
20
+ disabled: `var(--ds-shadow-raised, ${`0 0 1px ${N60A}`})`
17
21
  }
18
22
  };
19
23
  export const track = {
@@ -25,13 +29,11 @@ export const track = {
25
29
  */
26
30
  borderRadius: 2,
27
31
  background: {
28
- default: `var(--ds-background-neutral, ${colors.N30})`,
29
- hovered: `var(--ds-background-neutral-hovered, ${colors.N40})`,
30
- disabled: `var(--ds-background-disabled, ${colors.N30})`
32
+ default: `var(--ds-background-neutral, ${N30})`,
33
+ hovered: `var(--ds-background-neutral-hovered, ${N40})`
31
34
  },
32
35
  foreground: {
33
- default: `var(--ds-background-brand-bold, ${colors.B400})`,
34
- hovered: `var(--ds-background-brand-bold-hovered, ${colors.B300})`,
35
- disabled: `var(--ds-text-disabled, ${colors.N50})`
36
+ default: `var(--ds-background-neutral-bold, ${B400})`,
37
+ hovered: `var(--ds-background-neutral-bold-hovered, ${B300})`
36
38
  }
37
39
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "6.1.0",
3
+ "version": "7.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/styled.js CHANGED
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  var _excluded = ["valuePercent", "style"];
5
5
 
6
- var _activeHover, _disabled, _css;
6
+ var _hoverNotDisabled, _css;
7
7
 
8
8
  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; }
9
9
 
@@ -15,6 +15,7 @@ import { css, jsx } from '@emotion/react';
15
15
  import * as theme from './theme';
16
16
  var VAR_THUMB_BORDER_COLOR = '--thumb-border';
17
17
  var VAR_THUMB_SHADOW = '--thumb-shadow';
18
+ var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
18
19
  var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
19
20
  var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
20
21
  var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
@@ -22,13 +23,16 @@ var sliderThumbStyles = {
22
23
  boxSizing: 'border-box',
23
24
  width: theme.thumb.size,
24
25
  height: theme.thumb.size,
25
- background: theme.thumb.background,
26
- border: "".concat(theme.thumb.borderWidth, "px solid var(").concat(VAR_THUMB_BORDER_COLOR, ")"),
26
+ border: 'none',
27
+ background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
28
+ // adapted from @atlaskit/focus-ring
29
+ outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
30
+ outlineOffset: '2px',
27
31
  borderRadius: '50%',
28
32
  boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
29
33
  cursor: 'pointer',
30
- // Different implicit behavior across browsers -> making it explicit
31
- transition: "border-color ".concat(theme.transitionDuration, " ease-in-out")
34
+ // Different implicit behavior across browsers -> making it explicit.
35
+ transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
32
36
  };
33
37
  var sliderTrackStyles = {
34
38
  borderRadius: theme.track.borderRadius,
@@ -102,10 +106,11 @@ var baseStyles = css({
102
106
  outline: 'none'
103
107
  },
104
108
  ':disabled': {
105
- cursor: 'not-allowed'
109
+ cursor: 'not-allowed',
110
+ opacity: "var(--ds-opacity-disabled, 0.4)"
106
111
  }
107
112
  });
108
- var themeStyles = css((_css = {}, _defineProperty(_css, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.default), _defineProperty(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), _defineProperty(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), _defineProperty(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), _defineProperty(_css, ':active, :hover', (_activeHover = {}, _defineProperty(_activeHover, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), _defineProperty(_activeHover, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _activeHover)), _defineProperty(_css, ':focus', _defineProperty({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _defineProperty(_css, ':disabled', (_disabled = {}, _defineProperty(_disabled, VAR_THUMB_SHADOW, theme.thumb.boxShadow.disabled), _defineProperty(_disabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.disabled), _defineProperty(_disabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.disabled), _disabled)), _css));
113
+ var themeStyles = css((_css = {}, _defineProperty(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), _defineProperty(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), _defineProperty(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), _defineProperty(_css, ':hover:not(:disabled)', (_hoverNotDisabled = {}, _defineProperty(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), _defineProperty(_css, ':active:not(:disabled)', _defineProperty({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), _defineProperty(_css, ':focus-visible', _defineProperty({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
109
114
  /**
110
115
  * __Input__
111
116
  * Internal-only styled input component.
package/dist/esm/theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import * as colors from '@atlaskit/theme/colors';
1
+ import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
2
2
  export var transitionDuration = '0.2s';
3
3
  export var input = {
4
4
  height: 40
@@ -6,14 +6,18 @@ export var input = {
6
6
  export var thumb = {
7
7
  size: 16,
8
8
  borderWidth: 2,
9
- background: "var(--ds-surface-raised, ".concat(colors.N0, ")"),
9
+ background: {
10
+ default: "var(--ds-background-neutral-bold, ".concat(B400, ")"),
11
+ hovered: "var(--ds-background-neutral-bold-hovered, ".concat(B300, ")"),
12
+ pressed: "var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")
13
+ },
10
14
  borderColor: {
11
15
  default: 'transparent',
12
- focused: "var(--ds-border-focused, ".concat(colors.B200, ")")
16
+ focused: "var(--ds-border-focused, ".concat(B200, ")")
13
17
  },
14
18
  boxShadow: {
15
- default: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A), ")"),
16
- disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
19
+ default: "var(--ds-UNSAFE_util-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
20
+ disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(N60A), ")")
17
21
  }
18
22
  };
19
23
  export var track = {
@@ -25,13 +29,11 @@ export var track = {
25
29
  */
26
30
  borderRadius: 2,
27
31
  background: {
28
- default: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
29
- hovered: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")"),
30
- disabled: "var(--ds-background-disabled, ".concat(colors.N30, ")")
32
+ default: "var(--ds-background-neutral, ".concat(N30, ")"),
33
+ hovered: "var(--ds-background-neutral-hovered, ".concat(N40, ")")
31
34
  },
32
35
  foreground: {
33
- default: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
34
- hovered: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
35
- disabled: "var(--ds-text-disabled, ".concat(colors.N50, ")")
36
+ default: "var(--ds-background-neutral-bold, ".concat(B400, ")"),
37
+ hovered: "var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")
36
38
  }
37
39
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "6.1.0",
3
+ "version": "7.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/theme.d.ts CHANGED
@@ -3,33 +3,35 @@ export declare const input: {
3
3
  height: number;
4
4
  };
5
5
  export declare const thumb: {
6
- size: number;
7
- borderWidth: number;
8
- background: "var(--ds-surface-raised)";
9
- borderColor: {
10
- default: string;
11
- focused: "var(--ds-border-focused)";
6
+ readonly size: 16;
7
+ readonly borderWidth: 2;
8
+ readonly background: {
9
+ readonly default: "var(--ds-background-neutral-bold)";
10
+ readonly hovered: "var(--ds-background-neutral-bold-hovered)";
11
+ readonly pressed: "var(--ds-background-neutral-bold-pressed)";
12
12
  };
13
- boxShadow: {
14
- default: "var(--ds-shadow-overlay)";
15
- disabled: "var(--ds-shadow-raised)";
13
+ readonly borderColor: {
14
+ readonly default: "transparent";
15
+ readonly focused: "var(--ds-border-focused)";
16
+ };
17
+ readonly boxShadow: {
18
+ readonly default: "var(--ds-UNSAFE_util-transparent)";
19
+ readonly disabled: "var(--ds-shadow-raised)";
16
20
  };
17
21
  };
18
22
  export declare const track: {
19
- height: number;
23
+ readonly height: 4;
20
24
  /**
21
25
  * borderRadius >= height / 2 to create a pill shape.
22
26
  * Using '50%' creates an ellipse.
23
27
  */
24
- borderRadius: number;
25
- background: {
26
- default: "var(--ds-background-neutral)";
27
- hovered: "var(--ds-background-neutral-hovered)";
28
- disabled: "var(--ds-background-disabled)";
28
+ readonly borderRadius: 2;
29
+ readonly background: {
30
+ readonly default: "var(--ds-background-neutral)";
31
+ readonly hovered: "var(--ds-background-neutral-hovered)";
29
32
  };
30
- foreground: {
31
- default: "var(--ds-background-brand-bold)";
32
- hovered: "var(--ds-background-brand-bold-hovered)";
33
- disabled: "var(--ds-text-disabled)";
33
+ readonly foreground: {
34
+ readonly default: "var(--ds-background-neutral-bold)";
35
+ readonly hovered: "var(--ds-background-neutral-bold-hovered)";
34
36
  };
35
37
  };
package/dist/types-ts4.0/theme.d.ts CHANGED
@@ -3,33 +3,35 @@ export declare const input: {
3
3
  height: number;
4
4
  };
5
5
  export declare const thumb: {
6
- size: number;
7
- borderWidth: number;
8
- background: "var(--ds-surface-raised)";
9
- borderColor: {
10
- default: string;
11
- focused: "var(--ds-border-focused)";
6
+ readonly size: 16;
7
+ readonly borderWidth: 2;
8
+ readonly background: {
9
+ readonly default: "var(--ds-background-neutral-bold)";
10
+ readonly hovered: "var(--ds-background-neutral-bold-hovered)";
11
+ readonly pressed: "var(--ds-background-neutral-bold-pressed)";
12
12
  };
13
- boxShadow: {
14
- default: "var(--ds-shadow-overlay)";
15
- disabled: "var(--ds-shadow-raised)";
13
+ readonly borderColor: {
14
+ readonly default: "transparent";
15
+ readonly focused: "var(--ds-border-focused)";
16
+ };
17
+ readonly boxShadow: {
18
+ readonly default: "var(--ds-UNSAFE_util-transparent)";
19
+ readonly disabled: "var(--ds-shadow-raised)";
16
20
  };
17
21
  };
18
22
  export declare const track: {
19
- height: number;
23
+ readonly height: 4;
20
24
  /**
21
25
  * borderRadius >= height / 2 to create a pill shape.
22
26
  * Using '50%' creates an ellipse.
23
27
  */
24
- borderRadius: number;
25
- background: {
26
- default: "var(--ds-background-neutral)";
27
- hovered: "var(--ds-background-neutral-hovered)";
28
- disabled: "var(--ds-background-disabled)";
28
+ readonly borderRadius: 2;
29
+ readonly background: {
30
+ readonly default: "var(--ds-background-neutral)";
31
+ readonly hovered: "var(--ds-background-neutral-hovered)";
29
32
  };
30
- foreground: {
31
- default: "var(--ds-background-brand-bold)";
32
- hovered: "var(--ds-background-brand-bold-hovered)";
33
- disabled: "var(--ds-text-disabled)";
33
+ readonly foreground: {
34
+ readonly default: "var(--ds-background-neutral-bold)";
35
+ readonly hovered: "var(--ds-background-neutral-bold-hovered)";
34
36
  };
35
37
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "6.1.0",
3
+ "version": "7.0.0",
4
4
  "description": "A range lets users choose an approximate value on a slider.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
15
15
  "typesVersions": {
16
16
  ">=4.0 <4.5": {
17
17
  "*": [
18
- "dist/types-ts4.0/*"
18
+ "dist/types-ts4.0/*",
19
+ "dist/types-ts4.0/index.d.ts"
19
20
  ]
20
21
  }
21
22
  },
@@ -23,6 +24,7 @@
23
24
  "atlaskit:src": "src/index.tsx",
24
25
  "homepage": "https://atlassian.design/components/range/",
25
26
  "atlassian": {
27
+ "disableProductCI": true,
26
28
  "team": "Design System Team",
27
29
  "releaseModel": "scheduled",
28
30
  "website": {
@@ -47,10 +49,10 @@
47
49
  "react": "^16.8.0"
48
50
  },
49
51
  "devDependencies": {
50
- "@atlaskit/button": "^16.3.0",
52
+ "@atlaskit/button": "^16.4.0",
51
53
  "@atlaskit/checkbox": "^12.4.0",
52
54
  "@atlaskit/docs": "*",
53
- "@atlaskit/form": "^8.6.0",
55
+ "@atlaskit/form": "^8.7.0",
54
56
  "@atlaskit/section-message": "^6.3.0",
55
57
  "@atlaskit/ssr": "*",
56
58
  "@atlaskit/tooltip": "^17.6.0",
package/report.api.md CHANGED
@@ -1,19 +1,25 @@
1
- ## API Report File for "@atlaskit/range".
1
+ ## API Report File for "@atlaskit/range"
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ <!--
6
+ Generated API Report version: 2.0
7
+ -->
4
8
 
5
9
  [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
6
10
 
7
11
  ```ts
8
12
  import { default as React_2 } from 'react';
9
13
 
10
- declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
14
+ // @public (undocumented)
15
+ type Combine<First, Second> = Omit<First, keyof Second> & Second;
11
16
 
12
- declare const _default: React_2.ForwardRefExoticComponent<
17
+ // @public (undocumented)
18
+ const _default: React_2.ForwardRefExoticComponent<
13
19
  Omit<
14
20
  Omit<
15
21
  React_2.InputHTMLAttributes<HTMLInputElement>,
16
- 'checked' | 'disabled' | 'required'
22
+ 'disabled' | 'checked' | 'required'
17
23
  >,
18
24
  keyof OwnProps
19
25
  > &
@@ -22,44 +28,20 @@ declare const _default: React_2.ForwardRefExoticComponent<
22
28
  >;
23
29
  export default _default;
24
30
 
25
- declare type OwnProps = {
26
- /**
27
- * Sets the default value if range is not set.
28
- */
31
+ // @public (undocumented)
32
+ type OwnProps = {
29
33
  defaultValue?: number;
30
- /**
31
- * Sets whether the field range is disabled.
32
- */
33
34
  isDisabled?: boolean;
34
- /**
35
- * Sets the maximum value of the range.
36
- */
37
35
  max?: number;
38
- /**
39
- * Sets the minimum value of the range.
40
- */
41
36
  min?: number;
42
- /**
43
- * Hook to be invoked on change of the range.
44
- */
45
37
  onChange?: (value: number) => void;
46
- /**
47
- * Sets the step value for the range.
48
- */
49
38
  step?: number;
50
- /**
51
- * A `testId` prop is provided for specific elements. This is a unique string
52
- * that appears as a data attribute `data-testid` in the rendered code and
53
- * serves as a hook for automated tests.
54
- */
55
39
  testId?: string;
56
- /**
57
- * Sets the value of the range.
58
- */
59
40
  value?: number;
60
41
  };
61
42
 
62
- export declare type RangeProps = Combine<
43
+ // @public (undocumented)
44
+ export type RangeProps = Combine<
63
45
  Omit<
64
46
  React_2.InputHTMLAttributes<HTMLInputElement>,
65
47
  'disabled' | 'required' | 'checked'
@@ -67,5 +49,5 @@ export declare type RangeProps = Combine<
67
49
  OwnProps
68
50
  >;
69
51
 
70
- export {};
52
+ // (No @packageDocumentation comment for this package)
71
53
  ```