@atlaskit/tokens 1.60.0 → 1.61.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.61.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#143310](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143310)
8
+ [`b41f7cad2418e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b41f7cad2418e) -
9
+ Migrated feature flag for increased contrast themes to new provider
10
+
3
11
  ## 1.60.0
4
12
 
5
13
  ### Minor Changes
@@ -20,7 +20,7 @@ var getSSRAutoScript = function getSSRAutoScript(colorMode, contrastMode) {
20
20
  return undefined;
21
21
  }
22
22
  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) {}") : '';
23
- 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) {}") : '';
23
+ var setContrastMode = contrastMode === 'auto' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes') ? "\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) {}") : '';
24
24
  return "(() => {".concat(setColorMode).concat(setContrastMode, "})()");
25
25
  };
26
26
  var _default = exports.default = getSSRAutoScript;
@@ -58,7 +58,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
58
58
  typography: typography
59
59
  });
60
60
  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);
61
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
61
+ if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
62
62
  result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, _constants.CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
63
63
  }
64
64
  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
@@ -43,7 +43,7 @@ var getThemeStyles = /*#__PURE__*/function () {
43
43
  themePreferences = _themeConfig.themeIdsWithOverrides;
44
44
 
45
45
  // CLEANUP: Remove
46
- if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
46
+ if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
47
47
  themePreferences = themePreferences.filter(function (n) {
48
48
  return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
49
49
  });
@@ -80,7 +80,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
80
80
  themeLoader = _args3.length > 1 ? _args3[1] : undefined;
81
81
  // CLEANUP: Remove. This blocks application of increased contrast themes
82
82
  // without the feature flag enabled.
83
- if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
83
+ if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
84
84
  if (light === 'light-increased-contrast') {
85
85
  light = 'light';
86
86
  }
@@ -23,7 +23,7 @@ function configurePage(themeState) {
23
23
  } else {
24
24
  _colorModeListeners.default.unbind();
25
25
  }
26
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
26
+ if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
27
27
  if (themeState.contrastMode === 'auto') {
28
28
  // Set contrastMode based on the user preference
29
29
  themeState.contrastMode = _contrastModeListeners.default.getContrastMode();
@@ -42,7 +42,7 @@ function configurePage(themeState) {
42
42
  });
43
43
  return function () {
44
44
  _colorModeListeners.default.unbind();
45
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
45
+ if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
46
46
  _contrastModeListeners.default.unbind();
47
47
  }
48
48
  };
@@ -19,7 +19,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
19
19
  var autoColorModeThemes = [light, dark];
20
20
  var themePreferences = [];
21
21
  if (colorMode === 'auto') {
22
- if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
22
+ if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
23
23
  autoColorModeThemes.forEach(function (normalTheme) {
24
24
  var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(normalTheme);
25
25
  if (increasedContrastTheme) {
@@ -30,7 +30,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
30
30
  themePreferences.push.apply(themePreferences, autoColorModeThemes);
31
31
  } else {
32
32
  themePreferences.push(themeState[colorMode]);
33
- if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
33
+ if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
34
34
  var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(themeState[colorMode]);
35
35
  if (increasedContrastTheme) {
36
36
  themePreferences.push(increasedContrastTheme);
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE } from './constants';
3
3
  import { darkModeMediaQuery, moreContrastMediaQuery } from './utils/theme-loading';
4
4
 
@@ -19,7 +19,7 @@ const getSSRAutoScript = (colorMode, contrastMode) => {
19
19
  const colorMode = darkModeMql.matches ? 'dark' : 'light';
20
20
  document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
21
21
  } catch (e) {}` : '';
22
- const setContrastMode = getBooleanFF('platform.design-system-team.increased-contrast-themes') && contrastMode === 'auto' ? `\n try {
22
+ const setContrastMode = contrastMode === 'auto' && fg('platform_increased-contrast-themes') ? `\n try {
23
23
  const contrastModeMql = window.matchMedia('${moreContrastMediaQuery}');
24
24
  const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';
25
25
  document.documentElement.setAttribute('${CONTRAST_MODE_ATTRIBUTE}', contrastMode);
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
3
3
  import { themeStateDefaults } from './theme-config';
4
4
  import { themeObjectToString } from './theme-state-transformer';
@@ -42,7 +42,7 @@ const getThemeHtmlAttrs = ({
42
42
  [THEME_DATA_ATTRIBUTE]: themeAttribute,
43
43
  [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
44
44
  };
45
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
45
+ if (fg('platform_increased-contrast-themes')) {
46
46
  result = {
47
47
  ...result,
48
48
  // CLEANUP: Move this to the initial `result` assignment above
@@ -26,7 +26,7 @@ const getThemeStyles = async preferences => {
26
26
  themePreferences = themeIdsWithOverrides;
27
27
 
28
28
  // CLEANUP: Remove
29
- if (!fg('platform.design-system-team.increased-contrast-themes')) {
29
+ if (!fg('platform_increased-contrast-themes')) {
30
30
  themePreferences = themePreferences.filter(n => n !== 'light-increased-contrast' && n !== 'dark-increased-contrast');
31
31
  }
32
32
  themePreferences = themePreferences.filter(n => n !== 'light-brand-refresh' && n !== 'dark-brand-refresh');
@@ -39,7 +39,7 @@ const setGlobalTheme = async ({
39
39
  } = {}, themeLoader) => {
40
40
  // CLEANUP: Remove. This blocks application of increased contrast themes
41
41
  // without the feature flag enabled.
42
- if (!fg('platform.design-system-team.increased-contrast-themes')) {
42
+ if (!fg('platform_increased-contrast-themes')) {
43
43
  if (light === 'light-increased-contrast') {
44
44
  light = 'light';
45
45
  }
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  import getThemeHtmlAttrs from '../get-theme-html-attrs';
3
3
  import ColorModeObserver from './color-mode-listeners';
4
4
  import ContrastModeObserver from './contrast-mode-listeners';
@@ -16,7 +16,7 @@ export default function configurePage(themeState) {
16
16
  } else {
17
17
  ColorModeObserver.unbind();
18
18
  }
19
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
19
+ if (fg('platform_increased-contrast-themes')) {
20
20
  if (themeState.contrastMode === 'auto') {
21
21
  // Set contrastMode based on the user preference
22
22
  themeState.contrastMode = ContrastModeObserver.getContrastMode();
@@ -32,7 +32,7 @@ export default function configurePage(themeState) {
32
32
  });
33
33
  return () => {
34
34
  ColorModeObserver.unbind();
35
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
35
+ if (fg('platform_increased-contrast-themes')) {
36
36
  ContrastModeObserver.unbind();
37
37
  }
38
38
  };
@@ -13,7 +13,7 @@ export const getThemePreferences = themeState => {
13
13
  const autoColorModeThemes = [light, dark];
14
14
  const themePreferences = [];
15
15
  if (colorMode === 'auto') {
16
- if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
16
+ if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
17
17
  autoColorModeThemes.forEach(normalTheme => {
18
18
  const increasedContrastTheme = getIncreasedContrastTheme(normalTheme);
19
19
  if (increasedContrastTheme) {
@@ -24,7 +24,7 @@ export const getThemePreferences = themeState => {
24
24
  themePreferences.push(...autoColorModeThemes);
25
25
  } else {
26
26
  themePreferences.push(themeState[colorMode]);
27
- if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
27
+ if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
28
28
  const increasedContrastTheme = getIncreasedContrastTheme(themeState[colorMode]);
29
29
  if (increasedContrastTheme) {
30
30
  themePreferences.push(increasedContrastTheme);
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE } from './constants';
3
3
  import { darkModeMediaQuery, moreContrastMediaQuery } from './utils/theme-loading';
4
4
 
@@ -15,7 +15,7 @@ var getSSRAutoScript = function getSSRAutoScript(colorMode, contrastMode) {
15
15
  return undefined;
16
16
  }
17
17
  var setColorMode = colorMode === 'auto' ? "\n try {\n const darkModeMql = window.matchMedia('".concat(darkModeMediaQuery, "');\n const colorMode = darkModeMql.matches ? 'dark' : 'light';\n document.documentElement.setAttribute('").concat(COLOR_MODE_ATTRIBUTE, "', colorMode);\n } catch (e) {}") : '';
18
- var setContrastMode = getBooleanFF('platform.design-system-team.increased-contrast-themes') && contrastMode === 'auto' ? "\n try {\n const contrastModeMql = window.matchMedia('".concat(moreContrastMediaQuery, "');\n const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';\n document.documentElement.setAttribute('").concat(CONTRAST_MODE_ATTRIBUTE, "', contrastMode);\n } catch (e) {}") : '';
18
+ var setContrastMode = contrastMode === 'auto' && fg('platform_increased-contrast-themes') ? "\n try {\n const contrastModeMql = window.matchMedia('".concat(moreContrastMediaQuery, "');\n const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';\n document.documentElement.setAttribute('").concat(CONTRAST_MODE_ATTRIBUTE, "', contrastMode);\n } catch (e) {}") : '';
19
19
  return "(() => {".concat(setColorMode).concat(setContrastMode, "})()");
20
20
  };
21
21
  export default getSSRAutoScript;
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  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; }
4
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
5
5
  import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
6
6
  import { themeStateDefaults } from './theme-config';
7
7
  import { themeObjectToString } from './theme-state-transformer';
@@ -51,7 +51,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
51
51
  typography: typography
52
52
  });
53
53
  var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
54
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
54
+ if (fg('platform_increased-contrast-themes')) {
55
55
  result = _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
56
56
  }
57
57
  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
@@ -33,7 +33,7 @@ var getThemeStyles = /*#__PURE__*/function () {
33
33
  themePreferences = themeIdsWithOverrides;
34
34
 
35
35
  // CLEANUP: Remove
36
- if (!fg('platform.design-system-team.increased-contrast-themes')) {
36
+ if (!fg('platform_increased-contrast-themes')) {
37
37
  themePreferences = themePreferences.filter(function (n) {
38
38
  return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
39
39
  });
@@ -71,7 +71,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
71
71
  themeLoader = _args3.length > 1 ? _args3[1] : undefined;
72
72
  // CLEANUP: Remove. This blocks application of increased contrast themes
73
73
  // without the feature flag enabled.
74
- if (!fg('platform.design-system-team.increased-contrast-themes')) {
74
+ if (!fg('platform_increased-contrast-themes')) {
75
75
  if (light === 'light-increased-contrast') {
76
76
  light = 'light';
77
77
  }
@@ -1,5 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import getThemeHtmlAttrs from '../get-theme-html-attrs';
4
4
  import ColorModeObserver from './color-mode-listeners';
5
5
  import ContrastModeObserver from './contrast-mode-listeners';
@@ -17,7 +17,7 @@ export default function configurePage(themeState) {
17
17
  } else {
18
18
  ColorModeObserver.unbind();
19
19
  }
20
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
20
+ if (fg('platform_increased-contrast-themes')) {
21
21
  if (themeState.contrastMode === 'auto') {
22
22
  // Set contrastMode based on the user preference
23
23
  themeState.contrastMode = ContrastModeObserver.getContrastMode();
@@ -36,7 +36,7 @@ export default function configurePage(themeState) {
36
36
  });
37
37
  return function () {
38
38
  ColorModeObserver.unbind();
39
- if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
39
+ if (fg('platform_increased-contrast-themes')) {
40
40
  ContrastModeObserver.unbind();
41
41
  }
42
42
  };
@@ -12,7 +12,7 @@ export var getThemePreferences = function getThemePreferences(themeState) {
12
12
  var autoColorModeThemes = [light, dark];
13
13
  var themePreferences = [];
14
14
  if (colorMode === 'auto') {
15
- if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
15
+ if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
16
16
  autoColorModeThemes.forEach(function (normalTheme) {
17
17
  var increasedContrastTheme = getIncreasedContrastTheme(normalTheme);
18
18
  if (increasedContrastTheme) {
@@ -23,7 +23,7 @@ export var getThemePreferences = function getThemePreferences(themeState) {
23
23
  themePreferences.push.apply(themePreferences, autoColorModeThemes);
24
24
  } else {
25
25
  themePreferences.push(themeState[colorMode]);
26
- if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
26
+ if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
27
27
  var increasedContrastTheme = getIncreasedContrastTheme(themeState[colorMode]);
28
28
  if (increasedContrastTheme) {
29
29
  themePreferences.push(increasedContrastTheme);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.60.0",
3
+ "version": "1.61.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
31
31
  "codegen-tokens": "run-ts ./scripts/style-dictionary/build.tsx && cd $(npx repo-root)/packages/design-system/primitives && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/ds-explorations && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/heading && yarn codegen"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/ds-lib": "^2.5.0",
34
+ "@atlaskit/ds-lib": "^2.6.0",
35
35
  "@atlaskit/platform-feature-flags": "^0.3.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "@babel/traverse": "^7.23.2",
@@ -125,7 +125,7 @@
125
125
  "./css-type-schema": "./src/entry-points/css-type-schema.codegen.tsx"
126
126
  },
127
127
  "platform-feature-flags": {
128
- "platform.design-system-team.increased-contrast-themes": {
128
+ "platform_increased-contrast-themes": {
129
129
  "type": "boolean"
130
130
  },
131
131
  "platform-component-visual-refresh": {