@atlaskit/tokens 1.25.2 → 1.26.1

package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::87a8cb620b538e3524b5031d5a012ecd>>
+ * @codegen <<SignedSource::ecd63bab60b9c05c08973d35cc1989df>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -17,7 +17,7 @@ var tokens = [{
     "description": "The default body font."
   },
   "value": "normal 400 14px/20px var(--ds-font-family-body)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -46,7 +46,7 @@ var tokens = [{
     "description": "Larger body font or default body font for text rich experiences."
   },
   "value": "normal 400 16px/24px var(--ds-font-family-body)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -75,7 +75,7 @@ var tokens = [{
     "description": "Smaller body font."
   },
   "value": "normal 400 12px/20px var(--ds-font-family-body)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -104,7 +104,7 @@ var tokens = [{
     "description": "Used for monospace and code."
   },
   "value": "normal 400 0.875em/1 var(--ds-font-family-code)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -133,7 +133,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 24px/28px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -162,7 +162,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 20px/24px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -191,7 +191,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 16px/20px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -220,7 +220,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 28px/32px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -249,7 +249,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 14px/16px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -278,7 +278,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 36px/40px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -307,7 +307,7 @@ var tokens = [{
     "description": "TBD"
   },
   "value": "normal 700 12px/16px var(--ds-font-family-heading)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -336,7 +336,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "0",
-  "filePath": "src/tokens/atlassian-typography/letter-spacing.tsx",
+  "filePath": "schema/themes/atlassian-typography/letter-spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -358,7 +358,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "0",
-  "filePath": "src/tokens/atlassian-typography/letter-spacing.tsx",
+  "filePath": "schema/themes/atlassian-typography/letter-spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -380,7 +380,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "0",
-  "filePath": "src/tokens/atlassian-typography/letter-spacing.tsx",
+  "filePath": "schema/themes/atlassian-typography/letter-spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -402,7 +402,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "0",
-  "filePath": "src/tokens/atlassian-typography/letter-spacing.tsx",
+  "filePath": "schema/themes/atlassian-typography/letter-spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -424,7 +424,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "0",
-  "filePath": "src/tokens/atlassian-typography/letter-spacing.tsx",
+  "filePath": "schema/themes/atlassian-typography/letter-spacing.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -446,7 +446,7 @@ var tokens = [{
     "description": "Single-line non-wrapping text like that in a button."
   },
   "value": "normal 400 14px/1 var(--ds-font-family-body)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -475,7 +475,7 @@ var tokens = [{
     "description": "Single-line non-wrapping supporting text like that in a smaller label."
   },
   "value": "normal 400 12px/1 var(--ds-font-family-body)",
-  "filePath": "src/tokens/atlassian-typography/theme.tsx",
+  "filePath": "schema/themes/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -504,7 +504,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -526,7 +526,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -548,7 +548,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -570,7 +570,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -592,7 +592,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {
@@ -614,7 +614,7 @@ var tokens = [{
     "description": "Helpful guidance goes here"
   },
   "value": "Charlie Sans",
-  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "filePath": "schema/themes/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
     "attributes": {

package/dist/cjs/constants.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CURRENT_SURFACE_CSS_VAR = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CURRENT_SURFACE_CSS_VAR = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.CONTRAST_MODE_ATTRIBUTE = exports.COLOR_MODE_ATTRIBUTE = void 0;
 var THEME_DATA_ATTRIBUTE = exports.THEME_DATA_ATTRIBUTE = 'data-theme';
 var COLOR_MODE_ATTRIBUTE = exports.COLOR_MODE_ATTRIBUTE = 'data-color-mode';
+var CONTRAST_MODE_ATTRIBUTE = exports.CONTRAST_MODE_ATTRIBUTE = 'data-contrast-mode';
 var CUSTOM_THEME_ATTRIBUTE = exports.CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 var DEFAULT_THEME = exports.DEFAULT_THEME = 'light';
 var CSS_PREFIX = exports.CSS_PREFIX = 'ds';

package/dist/cjs/enable-global-theme.js

@@ -33,6 +33,8 @@ var enableGlobalTheme = function enableGlobalTheme() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$colorMode = _ref.colorMode,
     colorMode = _ref$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref$colorMode,
+    _ref$contrastMode = _ref.contrastMode,
+    contrastMode = _ref$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref$contrastMode,
     _ref$dark = _ref.dark,
     dark = _ref$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref$dark,
     _ref$light = _ref.light,
@@ -48,6 +50,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
   var themeLoader = arguments.length > 1 ? arguments[1] : undefined;
   var themeState = {
     colorMode: colorMode,
+    contrastMode: contrastMode,
     dark: dark,
     light: light,
     shape: shape,

package/dist/cjs/get-ssr-auto-script.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeLoading = require("./utils/theme-loading");
 /**
@@ -14,7 +15,12 @@ var _themeLoading = require("./utils/theme-loading");
  *
  * @returns {string} A string to be added to the innerHTML of a script tag in the document head
  */
-var getSSRAutoScript = function getSSRAutoScript(colorMode) {
-  return colorMode === 'auto' ? "(\n  () => {\n    try {\n      const mql = window.matchMedia('".concat(_themeLoading.darkModeMediaQuery, "');\n      const colorMode = mql.matches ? 'dark' : 'light';\n      document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n    } catch (e) {}\n  }\n)()") : undefined;
+var getSSRAutoScript = function getSSRAutoScript(colorMode, contrastMode) {
+  if (colorMode !== 'auto' && contrastMode !== 'auto') {
+    return undefined;
+  }
+  var setColorMode = colorMode === 'auto' ? "\n  try {\n    const darkModeMql = window.matchMedia('".concat(_themeLoading.darkModeMediaQuery, "');\n    const colorMode = darkModeMql.matches ? 'dark' : 'light';\n    document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n  } catch (e) {}") : '';
+  var setContrastMode = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes') && contrastMode === 'auto' ? "\n  try {\n    const contrastModeMql = window.matchMedia('".concat(_themeLoading.moreContrastMediaQuery, "');\n    const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';\n    document.documentElement.setAttribute('").concat(_constants.CONTRAST_MODE_ATTRIBUTE, "', contrastMode);\n  } catch (e) {}") : '';
+  return "(() => {".concat(setColorMode).concat(setContrastMode, "})()");
 };
 var _default = exports.default = getSSRAutoScript;

package/dist/cjs/get-theme-html-attrs.js

@@ -6,12 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
 var _themeStateTransformer = require("./theme-state-transformer");
 var _colorUtils = require("./utils/color-utils");
 var _hash = require("./utils/hash");
+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; }
+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; }
 var defaultColorMode = 'light';
+var defaultContrastMode = 'no-preference';
 
 /**
  * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
@@ -36,6 +40,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     dark = _ref$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref$dark,
     _ref$light = _ref.light,
     light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
+    _ref$contrastMode = _ref.contrastMode,
+    contrastMode = _ref$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref$contrastMode,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
     _ref$spacing = _ref.spacing,
@@ -52,6 +58,9 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     typography: typography
   });
   var result = (_result = {}, (0, _defineProperty2.default)(_result, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_result, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+    result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, _constants.CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
+  }
   if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
     var optionString = JSON.stringify(UNSAFE_themeOptions);
     var uniqueId = (0, _hash.hash)(optionString);

package/dist/cjs/get-theme-styles.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeConfig = require("./theme-config");
 var _colorUtils = require("./utils/color-utils");
 var _getThemePreferences = require("./utils/get-theme-preferences");
@@ -40,9 +41,17 @@ var getThemeStyles = /*#__PURE__*/function () {
           themeOverridePreferences = [];
           if (preferences === 'all') {
             themePreferences = _themeConfig.themeIdsWithOverrides;
+
+            // CLEANUP: Remove
+            if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+              themePreferences = themePreferences.filter(function (n) {
+                return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
+              });
+            }
           } else {
             themeState = {
               colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
+              contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || _themeConfig.themeStateDefaults['contrastMode'],
               dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
               light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
               shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'],

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.25.2";
+var version = "1.26.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.25.2";
+var version = "1.26.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/set-global-theme.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeConfig = require("./theme-config");
 var _colorUtils = require("./utils/color-utils");
 var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
@@ -24,6 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * @param {Object<string, string>} themeState The themes and color mode that should be applied.
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.contrastMode The contrast mode theme to be applied. If set to `auto`, the theme applied will be determined by the OS setting.set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
  * @param {string} themeState.shape The shape theme to be applied.
@@ -44,6 +46,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
     var _ref2,
       _ref2$colorMode,
       colorMode,
+      _ref2$contrastMode,
+      contrastMode,
       _ref2$dark,
       dark,
       _ref2$light,
@@ -72,10 +76,21 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
+          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
+          // CLEANUP: Remove. This blocks application of increased contrast themes
+          // without the feature flag enabled.
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+            if (light === 'light-increased-contrast') {
+              light = 'light';
+            }
+            if (dark === 'dark-increased-contrast') {
+              dark = 'dark';
+            }
+          }
           themeState = {
             colorMode: colorMode,
+            contrastMode: contrastMode,
             dark: dark,
             light: light,
             shape: shape,
@@ -136,44 +151,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
               }))());
             }
           }
-          _context3.next = 9;
+          _context3.next = 10;
           return Promise.all(loadingTasks);
-        case 9:
+        case 10:
           // Load override themes after standard themes
           themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
           _iterator = _createForOfIteratorHelper(themeOverridePreferences);
-          _context3.prev = 11;
+          _context3.prev = 12;
           _iterator.s();
-        case 13:
+        case 14:
           if ((_step = _iterator.n()).done) {
-            _context3.next = 19;
+            _context3.next = 20;
             break;
           }
           themeId = _step.value;
-          _context3.next = 17;
+          _context3.next = 18;
           return loadingStrategy(themeId);
-        case 17:
-          _context3.next = 13;
+        case 18:
+          _context3.next = 14;
           break;
-        case 19:
-          _context3.next = 24;
+        case 20:
+          _context3.next = 25;
           break;
-        case 21:
-          _context3.prev = 21;
-          _context3.t0 = _context3["catch"](11);
+        case 22:
+          _context3.prev = 22;
+          _context3.t0 = _context3["catch"](12);
           _iterator.e(_context3.t0);
-        case 24:
-          _context3.prev = 24;
+        case 25:
+          _context3.prev = 25;
           _iterator.f();
-          return _context3.finish(24);
-        case 27:
+          return _context3.finish(25);
+        case 28:
           autoUnbind = (0, _configurePage.default)(themeState);
           return _context3.abrupt("return", autoUnbind);
-        case 29:
+        case 30:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[11, 21, 24, 27]]);
+    }, _callee3, null, [[12, 22, 25, 28]]);
   }));
   return function setGlobalTheme() {
     return _ref.apply(this, arguments);

package/dist/cjs/theme-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOverrides = exports.themeIds = exports.themeColorModes = exports.default = void 0;
+exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOverrides = exports.themeIds = exports.themeContrastModes = exports.themeColorModes = exports.default = void 0;
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -34,13 +34,17 @@ exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOver
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
  */
 var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];
+/**
+ * Contrast preferences: The system contrast preference
+ */
+var themeContrastModes = exports.themeContrastModes = ['more', 'no-preference', 'auto'];
 /**
  * Theme ids: The value that will be mounted to the DOM as a data attr
  * For example: `data-theme="light:light dark:dark spacing:spacing"
  *
  * These ids must be kebab case
  */
-var themeIds = exports.themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3', 'typography-minor3'];
+var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'dark', 'dark-increased-contrast', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3', 'typography-minor3'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
@@ -75,6 +79,17 @@ var themeConfig = {
       mode: 'light'
     }
   },
+  'atlassian-light-increased-contrast': {
+    id: 'light-increased-contrast',
+    displayName: 'Light Theme (increased contrast)',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    },
+    extends: 'light',
+    increasesContrastFor: 'light'
+  },
   'atlassian-dark': {
     id: 'dark',
     displayName: 'Dark Theme',
@@ -84,6 +99,17 @@ var themeConfig = {
       mode: 'dark'
     }
   },
+  'atlassian-dark-increased-contrast': {
+    id: 'dark-increased-contrast',
+    displayName: 'Dark Theme (increased contrast)',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    },
+    extends: 'dark',
+    increasesContrastFor: 'dark'
+  },
   'atlassian-legacy-light': {
     id: 'legacy-light',
     displayName: 'Light Theme (legacy)',
@@ -201,6 +227,7 @@ var themeConfig = {
  */
 var themeStateDefaults = exports.themeStateDefaults = {
   colorMode: 'auto',
+  contrastMode: 'auto',
   dark: 'dark',
   light: 'light',
   shape: undefined,

package/dist/cjs/utils/configure-page.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = configurePage;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getThemeHtmlAttrs = _interopRequireDefault(require("../get-theme-html-attrs"));
 var _colorModeListeners = _interopRequireDefault(require("./color-mode-listeners"));
+var _contrastModeListeners = _interopRequireDefault(require("./contrast-mode-listeners"));
 /**
  * Given ThemeState, sets appropriate html attributes on the documentElement,
  * adds a listener to keep colorMode updated, and returns a function to unbind.
@@ -21,6 +23,16 @@ function configurePage(themeState) {
   } else {
     _colorModeListeners.default.unbind();
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+    if (themeState.contrastMode === 'auto') {
+      // Set contrastMode based on the user preference
+      themeState.contrastMode = _contrastModeListeners.default.getContrastMode();
+      // Bind a listener (if one doesn't already exist) to keep contrastMode updated
+      _contrastModeListeners.default.bind();
+    } else {
+      _contrastModeListeners.default.unbind();
+    }
+  }
   var themeAttributes = (0, _getThemeHtmlAttrs.default)(themeState);
   Object.entries(themeAttributes).forEach(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
@@ -29,6 +41,9 @@ function configurePage(themeState) {
     document.documentElement.setAttribute(key, value);
   });
   return function () {
-    return _colorModeListeners.default.unbind;
+    _colorModeListeners.default.unbind();
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+      _contrastModeListeners.default.unbind();
+    }
   };
 }

package/dist/cjs/utils/contrast-mode-listeners.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
+var _constants = require("../constants");
+var _themeLoading = require("./theme-loading");
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * Updates the current theme when the system contrast preference changes. Should be bound
+ * to an event listener listening on the '(prefers-contrast: more)' query
+ * @param e The event representing a change in system theme.
+ */
+function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(_constants.CONTRAST_MODE_ATTRIBUTE, e.matches ? 'more' : 'no-preference');
+}
+var contrastModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.moreContrastMediaQuery);
+var ContrastModeObserver = /*#__PURE__*/function () {
+  function ContrastModeObserver() {
+    (0, _classCallCheck2.default)(this, ContrastModeObserver);
+    (0, _defineProperty2.default)(this, "unbindContrastChangeListener", null);
+  }
+  (0, _createClass2.default)(ContrastModeObserver, [{
+    key: "getContrastMode",
+    value: function getContrastMode() {
+      if (!contrastModeMql) {
+        return 'no-preference';
+      }
+      return contrastModeMql !== null && contrastModeMql !== void 0 && contrastModeMql.matches ? 'more' : 'no-preference';
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      if (contrastModeMql && this.unbindContrastChangeListener === null) {
+        this.unbindContrastChangeListener = (0, _bindEventListener.bind)(contrastModeMql, {
+          type: 'change',
+          listener: checkNativeListener
+        });
+      }
+    }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      if (this.unbindContrastChangeListener) {
+        this.unbindContrastChangeListener();
+        this.unbindContrastChangeListener = null;
+      }
+    }
+  }]);
+  return ContrastModeObserver;
+}();
+/**
+ * A singleton contrast mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+var SingletonContrastModeObserver = new ContrastModeObserver();
+var _default = exports.default = SingletonContrastModeObserver;