@atlaskit/range 9.3.7 → 10.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/styled.compiled.css +10 -10
  3. package/dist/cjs/styled.js +4 -17
  4. package/dist/es2019/styled.compiled.css +10 -10
  5. package/dist/es2019/styled.js +1 -2
  6. package/dist/esm/styled.compiled.css +10 -10
  7. package/dist/esm/styled.js +4 -17
  8. package/package.json +7 -6
  9. package/range.docs.tsx +47 -0
  10. package/tsconfig.json +2 -1
  11. package/dist/cjs/theme.js +0 -44
  12. package/dist/es2019/theme.js +0 -38
  13. package/dist/esm/theme.js +0 -38
  14. package/dist/types/theme.d.ts +0 -37
  15. package/dist/types-ts4.5/theme.d.ts +0 -37
  16. package/theme/package.json +0 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/range
2
2
 
3
+ ## 10.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+ - Updated dependencies
10
+
11
+ ## 10.0.0
12
+
13
+ ### Major Changes
14
+
15
+ - [`f272ab0e435b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f272ab0e435b3) -
16
+ Removes ak/range/theme entrypoint because this file was not used as part of the core package.
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 9.3.7
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/styled.compiled.css CHANGED
@@ -23,15 +23,15 @@
23
23
  ._ru37idpf::-moz-range-track{border:0}
24
24
  ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
25
25
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
26
- ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
26
+ ._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
27
27
  ._142y1y44::-moz-range-track{height:4px}
28
- ._14h11gpr{--thumb-shadow:var(--_cghoza)}
28
+ ._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
29
29
  ._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
30
- ._15dpptpz{--track-bg:var(--_19g1tth)}
30
+ ._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
31
31
  ._168l1y44::-webkit-slider-runnable-track{height:4px}
32
32
  ._168li2wt::-webkit-slider-runnable-track{height:6px}
33
33
  ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
34
- ._18lx1n8f{--track-fg:var(--_1eby16r)}
34
+ ._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
35
35
  ._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
36
36
  ._18postnw:after{position:absolute}
37
37
  ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
@@ -41,7 +41,7 @@
41
41
  ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
42
42
  ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
43
43
  ._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
44
- ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
44
+ ._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
45
45
  ._1f5t1osq::-moz-range-track{width:100%}
46
46
  ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
47
47
  ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
@@ -49,7 +49,7 @@
49
49
  ._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
50
50
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
51
51
  ._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
52
- ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
52
+ ._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
53
53
  ._1kd2i2wt::-moz-range-progress{height:6px}
54
54
  ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
55
55
  ._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
@@ -57,7 +57,7 @@
57
57
  ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
58
58
  ._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
59
59
  ._1qdg1y44:after{height:4px}
60
- ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
60
+ ._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
61
61
  ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
62
62
  ._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
63
63
  ._1ssqtlke::-moz-range-progress{cursor:pointer}
@@ -77,18 +77,18 @@
77
77
  ._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
78
78
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
79
79
  ._j5dh13gf:disabled{cursor:not-allowed}
80
- ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
80
+ ._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
81
81
  ._kqswh2mm{position:relative}
82
82
  ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
83
83
  ._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
84
84
  ._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
85
85
  ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
86
86
  ._wstuglyw{-webkit-appearance:none}
87
- ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
88
87
  ._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
88
+ ._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
89
89
  ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
90
90
  ._z0ai1y44:after{width:4px}
91
91
  ._1hvw1o36:focus{outline-width:medium}
92
92
  ._49pcglyw:focus{outline-style:none}
93
93
  ._nt751r31:focus{outline-color:currentColor}
94
- ._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}
94
+ ._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
package/dist/cjs/styled.js CHANGED
@@ -12,14 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
- var _colors = require("@atlaskit/theme/colors");
19
17
  var _excluded = ["valuePercent", "style"];
20
18
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
19
  var rangeHeight = 40; // Height of the range input, used for the track and thumb
24
20
  var trackHeight = 6; // Height of the track, used for the track and thumb
25
21
  var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
@@ -43,22 +39,13 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
43
39
  style = props.style,
44
40
  strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
45
41
  var input = /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
46
- ref: ref,
47
- className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"]),
48
- style: _objectSpread(_objectSpread({}, {
42
+ style: {
49
43
  // We are creating a css variable to control the "progress" portion of the range input
50
44
  // This avoids us needing to create a new css class for each new percentage value
51
45
  '--track-fg-width': "".concat(valuePercent, "%")
52
- }), {}, {
53
- "--_171tp53": (0, _runtime.ix)("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"), ")")),
54
- "--_cghoza": (0, _runtime.ix)("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
55
- "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
56
- "--_1eby16r": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")")),
57
- "--_14t3dsg": (0, _runtime.ix)("var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")),
58
- "--_rf9ekb": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")),
59
- "--_1pam7of": (0, _runtime.ix)("var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")),
60
- "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
61
- })
46
+ },
47
+ ref: ref,
48
+ className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
62
49
  }));
63
50
  return /*#__PURE__*/React.createElement("div", {
64
51
  className: (0, _runtime.ax)([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
package/dist/es2019/styled.compiled.css CHANGED
@@ -23,16 +23,16 @@
23
23
  ._ru37idpf::-moz-range-track{border:0}
24
24
  ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
25
25
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
26
- ._12el5udg::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
26
+ ._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
27
27
  ._142y1y44::-moz-range-track{height:4px}
28
- ._14h11uvs{--thumb-shadow:var(--ds-UNSAFE-transparent,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
28
+ ._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
29
29
  ._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
30
- ._15dp1yrq{--track-bg:var(--ds-background-neutral,#ebecf0)}
30
+ ._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
31
31
  ._168l1y44::-webkit-slider-runnable-track{height:4px}
32
32
  ._168li2wt::-webkit-slider-runnable-track{height:6px}
33
33
  ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
34
+ ._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
34
35
  ._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
35
- ._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
36
36
  ._18postnw:after{position:absolute}
37
37
  ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
38
38
  ._19nq1ssb:after{inset-block-start:50%}
@@ -41,7 +41,7 @@
41
41
  ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
42
42
  ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
43
43
  ._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
44
- ._1esf5udg::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
44
+ ._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
45
45
  ._1f5t1osq::-moz-range-track{width:100%}
46
46
  ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
47
47
  ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
@@ -49,7 +49,7 @@
49
49
  ._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
50
50
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
51
51
  ._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
52
- ._1jhc1eo5:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
52
+ ._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
53
53
  ._1kd2i2wt::-moz-range-progress{height:6px}
54
54
  ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
55
55
  ._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
@@ -57,7 +57,7 @@
57
57
  ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
58
58
  ._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
59
59
  ._1qdg1y44:after{height:4px}
60
- ._1ruc16ss:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
60
+ ._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
61
61
  ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
62
62
  ._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
63
63
  ._1ssqtlke::-moz-range-progress{cursor:pointer}
@@ -77,18 +77,18 @@
77
77
  ._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
78
78
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
79
79
  ._j5dh13gf:disabled{cursor:not-allowed}
80
- ._jxar1eo5:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#0065ff)}
80
+ ._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
81
81
  ._kqswh2mm{position:relative}
82
82
  ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
83
83
  ._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
84
84
  ._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
85
85
  ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
86
86
  ._wstuglyw{-webkit-appearance:none}
87
- ._ydqghkel:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
88
87
  ._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
88
+ ._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
89
89
  ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
90
90
  ._z0ai1y44:after{width:4px}
91
91
  ._1hvw1o36:focus{outline-width:medium}
92
92
  ._49pcglyw:focus{outline-style:none}
93
93
  ._nt751r31:focus{outline-color:currentColor}
94
- ._164c194a:focus-visible{--thumb-border:var(--ds-border-focused,#2684ff)}
94
+ ._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
package/dist/es2019/styled.js CHANGED
@@ -5,7 +5,6 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
- import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
9
8
  const rangeHeight = 40; // Height of the range input, used for the track and thumb
10
9
  const trackHeight = 6; // Height of the track, used for the track and thumb
11
10
  const thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
@@ -37,7 +36,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
37
36
  '--track-fg-width': `${valuePercent}%`
38
37
  },
39
38
  ref: ref,
40
- className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf5udg _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el5udg _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _jxar1eo5 _ydqghkel _1jhc1eo5 _1ruc16ss _164c194a", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
39
+ className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
41
40
  }));
42
41
  return /*#__PURE__*/React.createElement("div", {
43
42
  className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
package/dist/esm/styled.compiled.css CHANGED
@@ -23,15 +23,15 @@
23
23
  ._ru37idpf::-moz-range-track{border:0}
24
24
  ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
25
25
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
26
- ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
26
+ ._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
27
27
  ._142y1y44::-moz-range-track{height:4px}
28
- ._14h11gpr{--thumb-shadow:var(--_cghoza)}
28
+ ._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)}
29
29
  ._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
30
- ._15dpptpz{--track-bg:var(--_19g1tth)}
30
+ ._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)}
31
31
  ._168l1y44::-webkit-slider-runnable-track{height:4px}
32
32
  ._168li2wt::-webkit-slider-runnable-track{height:6px}
33
33
  ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
34
- ._18lx1n8f{--track-fg:var(--_1eby16r)}
34
+ ._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)}
35
35
  ._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)}
36
36
  ._18postnw:after{position:absolute}
37
37
  ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
@@ -41,7 +41,7 @@
41
41
  ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
42
42
  ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
43
43
  ._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
44
- ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
44
+ ._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))}
45
45
  ._1f5t1osq::-moz-range-track{width:100%}
46
46
  ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
47
47
  ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
@@ -49,7 +49,7 @@
49
49
  ._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
50
50
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
51
51
  ._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
52
- ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
52
+ ._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
53
53
  ._1kd2i2wt::-moz-range-progress{height:6px}
54
54
  ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
55
55
  ._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
@@ -57,7 +57,7 @@
57
57
  ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
58
58
  ._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
59
59
  ._1qdg1y44:after{height:4px}
60
- ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
60
+ ._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)}
61
61
  ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
62
62
  ._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
63
63
  ._1ssqtlke::-moz-range-progress{cursor:pointer}
@@ -77,18 +77,18 @@
77
77
  ._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
78
78
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
79
79
  ._j5dh13gf:disabled{cursor:not-allowed}
80
- ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
80
+ ._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)}
81
81
  ._kqswh2mm{position:relative}
82
82
  ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
83
83
  ._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
84
84
  ._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
85
85
  ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
86
86
  ._wstuglyw{-webkit-appearance:none}
87
- ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
88
87
  ._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
88
+ ._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)}
89
89
  ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
90
90
  ._z0ai1y44:after{width:4px}
91
91
  ._1hvw1o36:focus{outline-width:medium}
92
92
  ._49pcglyw:focus{outline-style:none}
93
93
  ._nt751r31:focus{outline-color:currentColor}
94
- ._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}
94
+ ._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}
package/dist/esm/styled.js CHANGED
@@ -1,16 +1,12 @@
1
1
  /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
4
  var _excluded = ["valuePercent", "style"];
6
5
  import "./styled.compiled.css";
7
6
  import * as React from 'react';
8
7
  import { ax, ix } from "@compiled/react/runtime";
9
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
10
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
8
  import { forwardRef } from 'react';
12
9
  import { fg } from '@atlaskit/platform-feature-flags';
13
- import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
14
10
  var rangeHeight = 40; // Height of the range input, used for the track and thumb
15
11
  var trackHeight = 6; // Height of the track, used for the track and thumb
16
12
  var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
@@ -34,22 +30,13 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
34
30
  style = props.style,
35
31
  strippedProps = _objectWithoutProperties(props, _excluded);
36
32
  var input = /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
37
- ref: ref,
38
- className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"]),
39
- style: _objectSpread(_objectSpread({}, {
33
+ style: {
40
34
  // We are creating a css variable to control the "progress" portion of the range input
41
35
  // This avoids us needing to create a new css class for each new percentage value
42
36
  '--track-fg-width': "".concat(valuePercent, "%")
43
- }), {}, {
44
- "--_171tp53": ix("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(B400, ")"), ")")),
45
- "--_cghoza": ix("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")),
46
- "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
47
- "--_1eby16r": ix("var(--ds-background-neutral-bold, ".concat(B400, ")")),
48
- "--_14t3dsg": ix("var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")),
49
- "--_rf9ekb": ix("var(--ds-background-neutral-hovered, ".concat(N40, ")")),
50
- "--_1pam7of": ix("var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")),
51
- "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
52
- })
37
+ },
38
+ ref: ref,
39
+ className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1qll _m8f8bpmo _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf1w0t _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdlb4i _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1qll _1rf3bpmo _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el1w0t _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywlb4i _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvolb4i _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h1b1q9 _15dpi8nm _18lx1aqn _jxar1ibz _ydqgplhp _1jhc1ibz _1rucof27 _164c1v1w", "_1drqof27 _15dp1vck _18lxof27 _g6tdfajl _168li2wt _37ywfajl _1kd2i2wt _1sdc1lpd _ydqgmpja", fg('platform-dst-shape-theme-default') && "_g6td1rr0 _37yw1rr0 _1gvo1rr0"])
53
40
  }));
54
41
  return /*#__PURE__*/React.createElement("div", {
55
42
  className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "9.3.7",
3
+ "version": "10.0.1",
4
4
  "description": "A range lets users choose an approximate value on a slider.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/ds-lib": "^6.0.0",
29
29
  "@atlaskit/platform-feature-flags": "^1.1.0",
30
30
  "@atlaskit/theme": "^22.0.0",
31
- "@atlaskit/tokens": "^11.1.0",
31
+ "@atlaskit/tokens": "^11.4.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@compiled/react": "^0.20.0"
34
34
  },
@@ -41,13 +41,14 @@
41
41
  "@af/visual-regression": "workspace:^",
42
42
  "@atlaskit/button": "^23.10.0",
43
43
  "@atlaskit/checkbox": "^17.3.0",
44
- "@atlaskit/docs": "^11.6.0",
45
- "@atlaskit/form": "^15.4.0",
44
+ "@atlaskit/docs": "^11.7.0",
45
+ "@atlaskit/form": "^15.5.0",
46
46
  "@atlaskit/link": "^3.3.0",
47
- "@atlaskit/primitives": "^18.0.0",
47
+ "@atlaskit/primitives": "^18.1.0",
48
48
  "@atlaskit/section-message": "^8.12.0",
49
- "@atlaskit/tooltip": "^20.14.0",
49
+ "@atlaskit/tooltip": "^21.0.0",
50
50
  "@atlassian/ssr-tests": "workspace:^",
51
+ "@atlassian/structured-docs-types": "workspace:^",
51
52
  "@testing-library/react": "^16.3.0",
52
53
  "lodash": "^4.17.21",
53
54
  "react-dom": "^18.2.0"
package/range.docs.tsx ADDED
@@ -0,0 +1,47 @@
1
+ import path from 'path';
2
+
3
+ import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
4
+
5
+ const documentation: ComponentStructuredContentSource[] = [
6
+ {
7
+ name: 'Range',
8
+ description: 'A component for selecting a value from a range of values.',
9
+ status: 'general-availability',
10
+ import: {
11
+ name: 'Range',
12
+ package: '@atlaskit/range',
13
+ type: 'default',
14
+ packagePath: path.resolve(__dirname),
15
+ packageJson: require('./package.json'),
16
+ },
17
+ usageGuidelines: [
18
+ 'Use for selecting numeric values within a range',
19
+ 'Provide clear min/max boundaries',
20
+ 'Use appropriate step increments',
21
+ 'Consider showing current value',
22
+ ],
23
+ contentGuidelines: [
24
+ 'Use clear range labels',
25
+ 'Provide meaningful min/max labels',
26
+ 'Show current value when helpful',
27
+ 'Use consistent range terminology',
28
+ ],
29
+ accessibilityGuidelines: [
30
+ 'Provide clear labels for range inputs',
31
+ 'Use appropriate ARIA attributes',
32
+ 'Ensure keyboard navigation support',
33
+ 'Provide value announcements for screen readers',
34
+ ],
35
+ examples: [
36
+ {
37
+ name: 'Range',
38
+ description: 'Range example',
39
+ source: path.resolve(__dirname, './examples/ai/range.tsx'),
40
+ },
41
+ ],
42
+ keywords: ['range', 'slider', 'input', 'form', 'value', 'selection'],
43
+ categories: ['form'],
44
+ },
45
+ ];
46
+
47
+ export default documentation;
package/tsconfig.json CHANGED
@@ -16,6 +16,7 @@
16
16
  "**/stories/*.ts",
17
17
  "**/stories/*.tsx",
18
18
  "**/stories/**/*.ts",
19
- "**/stories/**/*.tsx"
19
+ "**/stories/**/*.tsx",
20
+ "./range.docs.tsx"
20
21
  ]
21
22
  }
package/dist/cjs/theme.js DELETED
@@ -1,44 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
7
- var _colors = require("@atlaskit/theme/colors");
8
- var transitionDuration = exports.transitionDuration = '0.2s';
9
- var input = exports.input = {
10
- height: 40
11
- };
12
- var thumb = exports.thumb = {
13
- size: 16,
14
- borderWidth: 2,
15
- background: {
16
- default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
17
- hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")"),
18
- pressed: "var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")
19
- },
20
- borderColor: {
21
- default: 'transparent',
22
- focused: "var(--ds-border-focused, ".concat(_colors.B200, ")")
23
- },
24
- boxShadow: {
25
- default: "var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
26
- disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(_colors.N60A), ")")
27
- }
28
- };
29
- var track = exports.track = {
30
- height: 4,
31
- /**
32
- * borderRadius >= height / 2 to create a pill shape.
33
- * Using '50%' creates an ellipse.
34
- */
35
- borderRadius: 2,
36
- background: {
37
- default: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
38
- hovered: "var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")
39
- },
40
- foreground: {
41
- default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
42
- hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")
43
- }
44
- };
package/dist/es2019/theme.js DELETED
@@ -1,38 +0,0 @@
1
- import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
2
- export const transitionDuration = '0.2s';
3
- export const input = {
4
- height: 40
5
- };
6
- export const thumb = {
7
- size: 16,
8
- borderWidth: 2,
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
- },
14
- borderColor: {
15
- default: 'transparent',
16
- focused: `var(--ds-border-focused, ${B200})`
17
- },
18
- boxShadow: {
19
- default: `var(--ds-UNSAFE-transparent, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
20
- disabled: `var(--ds-shadow-raised, ${`0 0 1px ${N60A}`})`
21
- }
22
- };
23
- export const track = {
24
- height: 4,
25
- /**
26
- * borderRadius >= height / 2 to create a pill shape.
27
- * Using '50%' creates an ellipse.
28
- */
29
- borderRadius: 2,
30
- background: {
31
- default: `var(--ds-background-neutral, ${N30})`,
32
- hovered: `var(--ds-background-neutral-hovered, ${N40})`
33
- },
34
- foreground: {
35
- default: `var(--ds-background-neutral-bold, ${B400})`,
36
- hovered: `var(--ds-background-neutral-bold-hovered, ${B300})`
37
- }
38
- };
package/dist/esm/theme.js DELETED
@@ -1,38 +0,0 @@
1
- import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
2
- export var transitionDuration = '0.2s';
3
- export var input = {
4
- height: 40
5
- };
6
- export var thumb = {
7
- size: 16,
8
- borderWidth: 2,
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
- },
14
- borderColor: {
15
- default: 'transparent',
16
- focused: "var(--ds-border-focused, ".concat(B200, ")")
17
- },
18
- boxShadow: {
19
- default: "var(--ds-UNSAFE-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), ")")
21
- }
22
- };
23
- export var track = {
24
- height: 4,
25
- /**
26
- * borderRadius >= height / 2 to create a pill shape.
27
- * Using '50%' creates an ellipse.
28
- */
29
- borderRadius: 2,
30
- background: {
31
- default: "var(--ds-background-neutral, ".concat(N30, ")"),
32
- hovered: "var(--ds-background-neutral-hovered, ".concat(N40, ")")
33
- },
34
- foreground: {
35
- default: "var(--ds-background-neutral-bold, ".concat(B400, ")"),
36
- hovered: "var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")
37
- }
38
- };
package/dist/types/theme.d.ts DELETED
@@ -1,37 +0,0 @@
1
- export declare const transitionDuration = "0.2s";
2
- export declare const input: {
3
- height: number;
4
- };
5
- export declare const thumb: {
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
- };
13
- readonly borderColor: {
14
- readonly default: 'transparent';
15
- readonly focused: 'var(--ds-border-focused)';
16
- };
17
- readonly boxShadow: {
18
- readonly default: 'var(--ds-UNSAFE-transparent)';
19
- readonly disabled: 'var(--ds-shadow-raised)';
20
- };
21
- };
22
- export declare const track: {
23
- readonly height: 4;
24
- /**
25
- * borderRadius >= height / 2 to create a pill shape.
26
- * Using '50%' creates an ellipse.
27
- */
28
- readonly borderRadius: 2;
29
- readonly background: {
30
- readonly default: 'var(--ds-background-neutral)';
31
- readonly hovered: 'var(--ds-background-neutral-hovered)';
32
- };
33
- readonly foreground: {
34
- readonly default: 'var(--ds-background-neutral-bold)';
35
- readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
36
- };
37
- };
package/dist/types-ts4.5/theme.d.ts DELETED
@@ -1,37 +0,0 @@
1
- export declare const transitionDuration = "0.2s";
2
- export declare const input: {
3
- height: number;
4
- };
5
- export declare const thumb: {
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
- };
13
- readonly borderColor: {
14
- readonly default: 'transparent';
15
- readonly focused: 'var(--ds-border-focused)';
16
- };
17
- readonly boxShadow: {
18
- readonly default: 'var(--ds-UNSAFE-transparent)';
19
- readonly disabled: 'var(--ds-shadow-raised)';
20
- };
21
- };
22
- export declare const track: {
23
- readonly height: 4;
24
- /**
25
- * borderRadius >= height / 2 to create a pill shape.
26
- * Using '50%' creates an ellipse.
27
- */
28
- readonly borderRadius: 2;
29
- readonly background: {
30
- readonly default: 'var(--ds-background-neutral)';
31
- readonly hovered: 'var(--ds-background-neutral-hovered)';
32
- };
33
- readonly foreground: {
34
- readonly default: 'var(--ds-background-neutral-bold)';
35
- readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
36
- };
37
- };
package/theme/package.json DELETED
@@ -1,17 +0,0 @@
1
- {
2
- "name": "@atlaskit/range/theme",
3
- "main": "../dist/cjs/theme.js",
4
- "module": "../dist/esm/theme.js",
5
- "module:es2019": "../dist/es2019/theme.js",
6
- "sideEffects": [
7
- "**/*.compiled.css"
8
- ],
9
- "types": "../dist/types/theme.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/theme.d.ts"
14
- ]
15
- }
16
- }
17
- }