@atlaskit/tokens 1.25.2 → 1.26.1

package/dist/cjs/utils/get-increased-contrast-theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getIncreasedContrastTheme;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _themeConfig = _interopRequireDefault(require("../theme-config"));
+/**
+ * Finds any matching increased contrast theme available for a selected theme.
+ */
+function getIncreasedContrastTheme(themeId) {
+  var _Object$entries$find;
+  return (_Object$entries$find = Object.entries(_themeConfig.default).find(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      increasesContrastFor = _ref2[1].increasesContrastFor;
+    return increasesContrastFor === themeId;
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[1].id;
+}

package/dist/cjs/utils/get-theme-preferences.js

@@ -7,14 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 exports.getThemePreferences = exports.getThemeOverridePreferences = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _getIncreasedContrastTheme = _interopRequireDefault(require("./get-increased-contrast-theme"));
 var getThemePreferences = exports.getThemePreferences = function getThemePreferences(themeState) {
   var colorMode = themeState.colorMode,
+    contrastMode = themeState.contrastMode,
     dark = themeState.dark,
     light = themeState.light,
     shape = themeState.shape,
     spacing = themeState.spacing,
     typography = themeState.typography;
-  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
+  var autoColorModeThemes = [light, dark];
+  var themePreferences = [];
+  if (colorMode === 'auto') {
+    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+      autoColorModeThemes.forEach(function (normalTheme) {
+        var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(normalTheme);
+        if (increasedContrastTheme) {
+          autoColorModeThemes.push(increasedContrastTheme);
+        }
+      });
+    }
+    themePreferences.push.apply(themePreferences, autoColorModeThemes);
+  } else {
+    themePreferences.push(themeState[colorMode]);
+    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+      var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(themeState[colorMode]);
+      if (increasedContrastTheme) {
+        themePreferences.push(increasedContrastTheme);
+      }
+    }
+  }
 
   // Replace light/dark theme with new palette if feature flag is on
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.saturated-palette-changes_asoro')) {

package/dist/cjs/utils/theme-loading.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadThemeCss = exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
+exports.moreContrastMediaQuery = exports.loadThemeCss = exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
@@ -61,4 +61,5 @@ var loadThemeCss = exports.loadThemeCss = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
-var darkModeMediaQuery = exports.darkModeMediaQuery = '(prefers-color-scheme: dark)';
+var darkModeMediaQuery = exports.darkModeMediaQuery = '(prefers-color-scheme: dark)';
+var moreContrastMediaQuery = exports.moreContrastMediaQuery = '(prefers-contrast: more)';