@atlaskit/media-ui 22.1.2 → 22.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/media-ui
 
+## 22.2.0
+
+### Minor Changes
+
+- [`6de3a9494a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6de3a9494a8) - [ux] Instrumented `@atlaskit/media-card` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- [`3b86aedf4cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b86aedf4cf) - Instrumented `@atlaskit/media-ui` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`cb8f8e76d25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8f8e76d25) - Update types for react-select and @atlaskit/select upgrade
+  Update commerce-ui entrypoints that caused a pipeline issue.
+- [`7c8727e3cb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c8727e3cb0) - [ux] Updated color usages in MediaButton and CustomMediaPlayer to use new colors from the new color palette.
+- Updated dependencies
+
+## 22.1.3
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 22.1.2
 
 ### Patch Changes

package/browser/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/browser.js",
   "module:es2019": "../dist/es2019/browser.js",
   "sideEffects": false,
-  "types": "../dist/types/browser.d.ts"
+  "types": "../dist/types/browser.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/browser.d.ts"
+      ]
+    }
+  }
 }

package/classNames/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/classNames.js",
   "module:es2019": "../dist/es2019/classNames.js",
   "sideEffects": false,
-  "types": "../dist/types/classNames.d.ts"
+  "types": "../dist/types/classNames.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/classNames.d.ts"
+      ]
+    }
+  }
 }

package/codeViewer/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/codeViewer.js",
   "module:es2019": "../dist/es2019/codeViewer.js",
   "sideEffects": false,
-  "types": "../dist/types/codeViewer.d.ts"
+  "types": "../dist/types/codeViewer.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/codeViewer.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/MediaButton.js

@@ -19,8 +19,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _colors = require("@atlaskit/theme/colors");
-
 var _excluded = ["appearance", "buttonRef"],
     _excluded2 = ["buttonStyles"];
 
@@ -35,55 +33,65 @@ var buttonTheme = {
         light: 'transparent'
       },
       hover: {
-        light: _colors.DN60
+        light: '#a1bdd914'
       },
       active: {
-        light: _colors.B75
+        light: '#a6c5e229'
       }
     },
     boxShadowColor: {
       focus: {
-        light: _colors.B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: _colors.DN400
+        light: '#c7d1db'
       },
       hover: {
-        light: _colors.DN400
+        light: '#c7d1db'
       },
       active: {
-        light: _colors.B400
+        light: '#c7d1db'
       },
       disabled: {
-        light: _colors.DN100
+        light: '#bfdbf847'
+      },
+      focus: {
+        light: '#c7d1db'
       }
     }
   },
   primary: {
     background: {
       default: {
-        light: _colors.B100
+        light: '#579dff'
       },
       hover: {
-        light: _colors.B75
+        light: '#85b8ff'
       },
       active: {
-        light: _colors.B200
+        light: '#cce0ff'
       },
       disabled: {
-        light: _colors.DN70
+        light: '#bcd6f00a'
       }
     },
     boxShadowColor: {
       focus: {
-        light: _colors.B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: _colors.DN30
+        light: '#161a1d'
+      }
+    }
+  },
+  selected: {
+    color: {
+      default: {
+        light: 'red'
       }
     }
   }

package/dist/cjs/MediaInlineCard/ErroredView/index.js

@@ -21,6 +21,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -81,7 +83,7 @@ var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
           label: "error",
           size: "small",
-          primaryColor: _colors.R300
+          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
         })),
         title: this.renderMessage()
       }));

package/dist/cjs/MediaInlineCard/Frame/styled.js

@@ -9,20 +9,19 @@ exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _components = require("@atlaskit/theme/components");
-
 var _templateObject;
 
-var FONT_COLOR = _colors.text; // TODO: Dark mode background color to be added in the future.
-
-var BACKGROUND_COLOR_LIGHT = _colors.N30A;
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(_colors.B300, ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var FONT_COLOR = (0, _tokens.token)('color.text', _colors.N900);
+var BACKGROUND_COLOR = (0, _tokens.token)('color.background.neutral', _colors.N30A);
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat((0, _tokens.token)('color.border.selected', _colors.B300), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;
@@ -47,10 +46,8 @@ var isSelected = function isSelected(_ref) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), FONT_COLOR, (0, _components.themed)({
-  light: BACKGROUND_COLOR_LIGHT
-}), function (props) {
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
   return isSelected(props);
-}, _colors.N40A);
+}, (0, _tokens.token)('color.background.neutral.hovered', _colors.N40A));
 
 exports.Wrapper = Wrapper;

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/index.js

@@ -27,6 +27,10 @@ var _styled = require("./styled");
 
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -120,7 +124,7 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, {
         style: {
-          color: titleColor
+          color: titleColor || (0, _tokens.token)('color.text', _colors.N900)
         }
       }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, null, title)));
     }

package/dist/cjs/MediaInlineCard/styled.js

@@ -9,17 +9,14 @@ exports.NoLinkAppearance = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _components = require("@atlaskit/theme/components");
-
 var _templateObject;
 
-// TODO: Dark mode colors to be added in the future.
-var NoLinkAppearance = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: _colors.N200
-}));
+var NoLinkAppearance = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
 
 exports.NoLinkAppearance = NoLinkAppearance;

package/dist/cjs/customMediaPlayer/index.js

@@ -96,7 +96,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "22.1.2";
+var packageVersion = "22.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -184,7 +184,7 @@ var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      var primaryColor = isHDActive ? _colors.B200 : _colors.DN400;
+      var primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
       var secondaryColor = isHDActive ? _colors.N0 : _colors.DN60;
       return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
         testId: "custom-media-player-hd-button",

package/dist/cjs/customMediaPlayer/playbackSpeedControls.js

@@ -69,7 +69,7 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       popupHeight: 255
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPlaybackSpeedChange", function (option) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPlaybackSpeedChange", function (option, _actionMeta) {
       var onPlaybackSpeedChange = _this.props.onPlaybackSpeedChange;
 
       if (!option) {
@@ -81,6 +81,7 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "speedOptions", function () {
       return [{
+        // @ts-ignore: FormattedMessage is returning an Element which is a type mismatch with what OptionType wants. This can be fix by using 'intl' object once this packages gets refactor later.
         label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.playbackSpeed),
         options: [{
           label: '0.75x',
@@ -103,7 +104,8 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popupCustomStyles", {
       container: function container(styles) {
         return _objectSpread(_objectSpread({}, styles), {}, {
-          backgroundColor: _colors.N900
+          backgroundColor: '#22272b',
+          boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
         });
       },
       // added these overrides to keep the look of the current design
@@ -117,8 +119,16 @@ var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
         var isFocused = _ref.isFocused,
             isSelected = _ref.isSelected;
         return _objectSpread(_objectSpread({}, styles), {}, {
-          color: isSelected ? _colors.N0 : 'inherit',
-          backgroundColor: isSelected ? _colors.B200 : isFocused ? _colors.N600 : _colors.N900
+          color: isSelected ? '#579dff' : 'inherit',
+          backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
+          ':active': {
+            backgroundColor: '#a6c5e229'
+          }
+        });
+      },
+      groupHeading: function groupHeading(styles) {
+        return _objectSpread(_objectSpread({}, styles), {}, {
+          color: '#9fadbc'
         });
       }
     });

package/dist/cjs/customMediaPlayer/styled.js

@@ -37,15 +37,15 @@ var TimeWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
 
 exports.TimeWrapper = TimeWrapper;
 
-var CurrentTime = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #a4b4cb;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
+var CurrentTime = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 
 exports.CurrentTime = CurrentTime;
 
-var TimeLine = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #5d646f;\n  border-radius: 5px;\n  position: relative;\n"])));
+var TimeLine = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #596773;\n  border-radius: 5px;\n  position: relative;\n"])));
 
 exports.TimeLine = TimeLine;
 
-var CurrentTimeLine = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #3383ff;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
+var CurrentTimeLine = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #05c;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
 
 exports.CurrentTimeLine = CurrentTimeLine;
 
@@ -53,7 +53,7 @@ var Thumb = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 
 exports.Thumb = Thumb;
 
-var BufferedTime = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #aeb1b7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
+var BufferedTime = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 
 exports.BufferedTime = BufferedTime;
 
@@ -61,17 +61,17 @@ var LeftControls = _styled.default.div(_templateObject11 || (_templateObject11 =
 
 exports.LeftControls = LeftControls;
 
-var RightControls = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: ", ";\n"])), _colors.N60);
+var RightControls = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 
 exports.RightControls = RightControls;
 
-var ControlsWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #0e1624, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
+var ControlsWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
 
 exports.ControlsWrapper = ControlsWrapper;
 
 var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
-  return isMuted ? "".concat(_colors.R300, " !important;") : '';
+  return isMuted ? "#EF5C48 !important;" : '';
 });
 
 exports.VolumeToggleWrapper = VolumeToggleWrapper;

package/dist/cjs/errorIcon.js

@@ -9,6 +9,7 @@ exports.errorIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var style = "\n.cls-1{fill:url(#linear-gradient);}\n.cls-2{fill:#253858;}\n.cls-3{fill:#ffc400;}\n.cls-4{fill:#ffab00;}\n.cls-5,.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}\n.cls-5{stroke:#344563;}\n.cls-6{stroke:#5e6c84;}\n";
 
 var errorIcon = /*#__PURE__*/_react.default.createElement("svg", {

package/dist/cjs/mime-type-icon.js

@@ -39,7 +39,7 @@ var MimeTypeIcon = function MimeTypeIcon(_ref) {
     }, /*#__PURE__*/_react.default.createElement(Icon, {
       label: iconInfo.label
     }));
-  } // no correponding mimetype icon/label was found.
+  } // no corresponding mimetype icon/label was found.
   // Hence, return a mediatype (image/doc/audio/video/unknown) icon
 
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "22.1.2",
+	"version": "22.2.0",
 	"sideEffects": false
 }

package/dist/es2019/MediaButton.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Keep Media buttons to use static colors from the new color palette to support the hybrid
+// theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { DN60, B75, DN400, B400, DN100, B100, B200, DN70, DN30 } from '@atlaskit/theme/colors';
 const buttonTheme = {
   default: {
     background: {
@@ -9,55 +12,65 @@ const buttonTheme = {
         light: 'transparent'
       },
       hover: {
-        light: DN60
+        light: '#a1bdd914'
       },
       active: {
-        light: B75
+        light: '#a6c5e229'
       }
     },
     boxShadowColor: {
       focus: {
-        light: B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: DN400
+        light: '#c7d1db'
       },
       hover: {
-        light: DN400
+        light: '#c7d1db'
       },
       active: {
-        light: B400
+        light: '#c7d1db'
       },
       disabled: {
-        light: DN100
+        light: '#bfdbf847'
+      },
+      focus: {
+        light: '#c7d1db'
       }
     }
   },
   primary: {
     background: {
       default: {
-        light: B100
+        light: '#579dff'
       },
       hover: {
-        light: B75
+        light: '#85b8ff'
       },
       active: {
-        light: B200
+        light: '#cce0ff'
       },
       disabled: {
-        light: DN70
+        light: '#bcd6f00a'
       }
     },
     boxShadowColor: {
       focus: {
-        light: B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: DN30
+        light: '#161a1d'
+      }
+    }
+  },
+  selected: {
+    color: {
+      default: {
+        light: 'red'
       }
     }
   }

package/dist/es2019/MediaInlineCard/ErroredView/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -34,7 +35,7 @@ export class MediaInlineCardErroredView extends React.Component {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
         label: "error",
         size: "small",
-        primaryColor: R300
+        primaryColor: token('color.icon.danger', R300)
       })),
       title: this.renderMessage()
     }));

package/dist/es2019/MediaInlineCard/Frame/styled.js

@@ -1,13 +1,12 @@
+import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
-import { B300, N30A, N40A, text } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { themed } from '@atlaskit/theme/components';
-const FONT_COLOR = text; // TODO: Dark mode background color to be added in the future.
-
-const BACKGROUND_COLOR_LIGHT = N30A;
+const FONT_COLOR = token('color.text', N900);
+const BACKGROUND_COLOR = token('color.background.neutral', N30A);
 const selected = `
   cursor: pointer;
-  box-shadow: 0 0 0 1px ${B300};
+  box-shadow: 0 0 0 1px ${token('color.border.selected', B300)};
   outline: none;
   user-select: none;
   border-color: transparent;
@@ -46,15 +45,13 @@ export const Wrapper = styled.span`
   display: inline;
   border-radius: ${akBorderRadius()}px;
   color: ${FONT_COLOR};
-  background-color: ${themed({
-  light: BACKGROUND_COLOR_LIGHT
-})};
+  background-color: ${BACKGROUND_COLOR};
   ${props => isSelected(props)};
   transition: 0.1s all ease-in-out;
   -moz-user-select: none;
   cursor: pointer;
 
   &:hover {
-    background-color: ${N40A};
+    background-color: ${token('color.background.neutral.hovered', N40A)};
   }
 `;

package/dist/es2019/MediaInlineCard/IconAndTitleLayout/index.js

@@ -3,6 +3,8 @@ import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
+import { token } from '@atlaskit/tokens';
+import { N900 } from '@atlaskit/theme/colors';
 export class IconAndTitleLayout extends React.Component {
   renderAtlaskitIcon() {
     const {
@@ -82,7 +84,7 @@ export class IconAndTitleLayout extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
       style: {
-        color: titleColor
+        color: titleColor || token('color.text', N900)
       }
     }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
   }

package/dist/es2019/MediaInlineCard/styled.js

@@ -1,9 +1,6 @@
+import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components'; // TODO: Dark mode colors to be added in the future.
-
 export const NoLinkAppearance = styled.span`
-  color: ${themed({
-  light: N200
-})};
+  color: ${token('color.text.subtlest', N200)};
 `;

package/dist/es2019/customMediaPlayer/index.js

@@ -1,4 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Keep media player components used in media-viewer to use static colors from the new color palette to
+// support the hybrid theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
 import React from 'react';
 import { Component } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -14,7 +18,7 @@ import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
 import MediaPlayer from 'react-video-renderer';
-import { B200, DN400, N0, DN60 } from '@atlaskit/theme/colors';
+import { N0, DN60 } from '@atlaskit/theme/colors';
 import { TimeRange } from './timeRange';
 import { CurrentTime, VideoWrapper, CustomVideoWrapper, TimebarWrapper, VolumeWrapper, TimeWrapper, LeftControls, RightControls, ControlsWrapper, VolumeToggleWrapper, MutedIndicator, SpinnerWrapper, VolumeTimeRangeWrapper } from './styled';
 import { fireAnalyticsEvent, relevantFeatureFlagNames, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from './analytics';
@@ -31,7 +35,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "22.1.2";
+const packageVersion = "22.2.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -121,7 +125,7 @@ export class CustomMediaPlayerBase extends Component {
         return;
       }
 
-      const primaryColor = isHDActive ? B200 : DN400;
+      const primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
       const secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",