@atlaskit/tokens 1.2.19 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/tokens
 
+## 1.3.2
+
+### Patch Changes
+
+- [`bae41641c82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bae41641c82) - Enable the dark theme tweaks for Confluence behind a feature flag.
+
+## 1.3.1
+
+### Patch Changes
+
+- [`e55ef3fcfac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e55ef3fcfac) - Fixes an issue where the dark theme tweaks (currently behind a feature flag) were not being displayed in some cases due to a race condition.
+
+## 1.3.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.19
 
 ### Patch Changes

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.2.19";
+var version = "1.3.2";
 /**
  * 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.2.19";
+var version = "1.3.2";
 /**
  * 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

@@ -52,11 +52,6 @@ var getThemePreferences = function getThemePreferences(themeState) {
       themePreferences.push(themeId);
     }
   });
-  if (
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-    themePreferences.push('dark-iteration');
-  }
   return (0, _toConsumableArray2.default)(new Set(themePreferences));
 };
 
@@ -125,6 +120,29 @@ var setGlobalTheme = /*#__PURE__*/function () {
             };
           }()));
         case 4:
+          if (!themePreferences.includes('dark')) {
+            _context2.next = 13;
+            break;
+          }
+          if (!
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln')) {
+            _context2.next = 10;
+            break;
+          }
+          _context2.next = 8;
+          return (0, _themeLoading.loadAndAppendThemeCss)('dark-iteration');
+        case 8:
+          _context2.next = 13;
+          break;
+        case 10:
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 13;
+          return (0, _themeLoading.loadAndAppendThemeCss)('dark-iteration');
+        case 13:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
             // Add an event listener for changes to the system theme.
@@ -150,7 +168,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             document.documentElement.setAttribute(key, value);
           });
           return _context2.abrupt("return", unbindThemeChangeListener);
-        case 8:
+        case 17:
         case "end":
           return _context2.stop();
       }
@@ -201,7 +219,16 @@ var getThemeStyles = /*#__PURE__*/function () {
             spacing: spacing,
             typography: typography
           });
-          _context4.next = 4;
+          if (themePreferences.includes('dark')) {
+            if (
+            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+            (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln')) {
+              themePreferences.push('dark-iteration');
+            } else if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+              themePreferences.push('dark-iteration');
+            }
+          }
+          _context4.next = 5;
           return Promise.all(themePreferences.map( /*#__PURE__*/function () {
             var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
               var css;
@@ -234,12 +261,12 @@ var getThemeStyles = /*#__PURE__*/function () {
               return _ref8.apply(this, arguments);
             };
           }()));
-        case 4:
+        case 5:
           results = _context4.sent;
           return _context4.abrupt("return", results.filter(function (theme) {
             return theme !== undefined;
           }));
-        case 6:
+        case 7:
         case "end":
           return _context4.stop();
       }

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.19",
+	"version": "1.3.2",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.2.19";
+const version = "1.3.2";
 /**
  * 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/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.2.19";
+const version = "1.3.2";
 /**
  * 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/es2019/set-global-theme.js

@@ -43,11 +43,6 @@ const getThemePreferences = themeState => {
       themePreferences.push(themeId);
     }
   });
-  if (
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-    themePreferences.push('dark-iteration');
-  }
   return [...new Set(themePreferences)];
 };
 
@@ -83,6 +78,15 @@ const setGlobalTheme = async ({
     typography
   });
   await Promise.all(themePreferences.map(async themeId => await loadAndAppendThemeCss(themeId)));
+  if (themePreferences.includes('dark')) {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+      await loadAndAppendThemeCss('dark-iteration');
+    } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+      await loadAndAppendThemeCss('dark-iteration');
+    }
+  }
   if (colorMode === 'auto' && darkModeMql) {
     colorMode = darkModeMql.matches ? 'dark' : 'light';
     // Add an event listener for changes to the system theme.
@@ -134,6 +138,15 @@ export const getThemeStyles = async ({
     spacing,
     typography
   });
+  if (themePreferences.includes('dark')) {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+      themePreferences.push('dark-iteration');
+    } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+      themePreferences.push('dark-iteration');
+    }
+  }
   const results = await Promise.all(themePreferences.map(async themeId => {
     try {
       const css = await loadThemeCss(themeId);

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.19",
+	"version": "1.3.2",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.2.19";
+var version = "1.3.2";
 /**
  * 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/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.2.19";
+var version = "1.3.2";
 /**
  * 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/esm/set-global-theme.js

@@ -46,11 +46,6 @@ var getThemePreferences = function getThemePreferences(themeState) {
       themePreferences.push(themeId);
     }
   });
-  if (
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-    themePreferences.push('dark-iteration');
-  }
   return _toConsumableArray(new Set(themePreferences));
 };
 
@@ -119,6 +114,29 @@ var setGlobalTheme = /*#__PURE__*/function () {
             };
           }()));
         case 4:
+          if (!themePreferences.includes('dark')) {
+            _context2.next = 13;
+            break;
+          }
+          if (!
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+            _context2.next = 10;
+            break;
+          }
+          _context2.next = 8;
+          return loadAndAppendThemeCss('dark-iteration');
+        case 8:
+          _context2.next = 13;
+          break;
+        case 10:
+          if (!getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 13;
+          return loadAndAppendThemeCss('dark-iteration');
+        case 13:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
             // Add an event listener for changes to the system theme.
@@ -144,7 +162,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             document.documentElement.setAttribute(key, value);
           });
           return _context2.abrupt("return", unbindThemeChangeListener);
-        case 8:
+        case 17:
         case "end":
           return _context2.stop();
       }
@@ -195,7 +213,16 @@ export var getThemeStyles = /*#__PURE__*/function () {
             spacing: spacing,
             typography: typography
           });
-          _context4.next = 4;
+          if (themePreferences.includes('dark')) {
+            if (
+            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+            getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+              themePreferences.push('dark-iteration');
+            } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+              themePreferences.push('dark-iteration');
+            }
+          }
+          _context4.next = 5;
           return Promise.all(themePreferences.map( /*#__PURE__*/function () {
             var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
               var css;
@@ -228,12 +255,12 @@ export var getThemeStyles = /*#__PURE__*/function () {
               return _ref8.apply(this, arguments);
             };
           }()));
-        case 4:
+        case 5:
           results = _context4.sent;
           return _context4.abrupt("return", results.filter(function (theme) {
             return theme !== undefined;
           }));
-        case 6:
+        case 7:
         case "end":
           return _context4.stop();
       }

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.19",
+	"version": "1.3.2",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/theme-config.d.ts

@@ -22,7 +22,7 @@ export declare type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape';
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
  */
 export declare const themeColorModes: readonly ["light", "dark", "auto"];
-export declare type ThemeColorModes = typeof themeColorModes[number];
+export declare type ThemeColorModes = (typeof themeColorModes)[number];
 export declare type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
 /**
  * Theme ids: The value that will be mounted to the DOM as a data attr
@@ -31,7 +31,7 @@ export declare type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
  * These ids must be kebab case
  */
 export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
-export declare type ThemeIds = typeof themeIds[number];
+export declare type ThemeIds = (typeof themeIds)[number];
 export declare type ThemeOverrideIds = 'dark-iteration';
 /**
  * Theme to use a base. This will create the theme as

package/dist/types/utils/theme-loading.d.ts

@@ -1,3 +1,3 @@
-import { ThemeIds } from '../theme-config';
-export declare const loadAndAppendThemeCss: (themeId: ThemeIds) => Promise<void>;
-export declare const loadThemeCss: (themeId: ThemeIds) => Promise<string>;
+import { ThemeIds, ThemeOverrideIds } from '../theme-config';
+export declare const loadAndAppendThemeCss: (themeId: ThemeIds | ThemeOverrideIds) => Promise<void>;
+export declare const loadThemeCss: (themeId: ThemeIds | ThemeOverrideIds) => Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.2.19",
+  "version": "1.3.2",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
     "codegen-tokens": "ts-node --project $(npx repo-root)/tsconfig.node.json ./scripts/style-dictionary/build"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/platform-feature-flags": "^0.1.0",
+    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.20.0",
     "@babel/types": "^7.20.0",
@@ -64,35 +64,35 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/avatar": "^21.2.0",
-    "@atlaskit/badge": "^15.0.11",
-    "@atlaskit/button": "^16.6.0",
-    "@atlaskit/checkbox": "^12.4.0",
-    "@atlaskit/code": "^14.5.0",
-    "@atlaskit/docs": "^9.0.10",
-    "@atlaskit/dropdown-menu": "^11.7.0",
-    "@atlaskit/ds-explorations": "^2.0.0",
-    "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/empty-state": "^7.4.0",
-    "@atlaskit/focus-ring": "^1.2.0",
-    "@atlaskit/grid": "^0.8.7",
-    "@atlaskit/heading": "^1.2.0",
-    "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/lozenge": "^11.3.0",
-    "@atlaskit/modal-dialog": "^12.4.0",
-    "@atlaskit/primitives": "^0.8.0",
-    "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.1.0",
-    "@atlaskit/tabs": "^13.3.0",
-    "@atlaskit/tag": "^11.4.0",
-    "@atlaskit/textarea": "^4.5.6",
-    "@atlaskit/textfield": "^5.3.0",
-    "@atlaskit/theme": "^12.4.0",
-    "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.7.0",
+    "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/badge": "^15.1.0",
+    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/checkbox": "^12.5.0",
+    "@atlaskit/code": "^14.6.0",
+    "@atlaskit/docs": "^9.1.0",
+    "@atlaskit/dropdown-menu": "^11.8.0",
+    "@atlaskit/ds-explorations": "^2.1.0",
+    "@atlaskit/dynamic-table": "^14.9.0",
+    "@atlaskit/empty-state": "^7.5.0",
+    "@atlaskit/focus-ring": "^1.3.0",
+    "@atlaskit/grid": "^0.9.0",
+    "@atlaskit/heading": "^1.3.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/lozenge": "^11.4.0",
+    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/primitives": "^0.9.0",
+    "@atlaskit/section-message": "^6.4.0",
+    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/tabs": "^13.4.0",
+    "@atlaskit/tag": "^11.5.0",
+    "@atlaskit/textarea": "^4.6.0",
+    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/toggle": "^12.6.0",
+    "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/codegen": "^0.0.1",
+    "@atlassian/codegen": "^0.1.0",
     "@atlassian/feature-flags-test-utils": "*",
     "@babel/core": "^7.20.0",
     "@emotion/core": "^10.0.9",
@@ -109,7 +109,7 @@
     "echarts-for-react": "^3.0.2",
     "fuse.js": "^6.6.2",
     "lodash": "^4.17.21",
-    "prettier": "^2.7.0",
+    "prettier": "^2.8.0",
     "react": "^16.8.0",
     "react-use-clipboard": "^1.0.0",
     "recharts": "^1.8.5",
@@ -135,6 +135,9 @@
   "platform-feature-flags": {
     "design-system-team.dark-theme-iteration_dk1ln": {
       "type": "boolean"
+    },
+    "platform.design-system-team.dark-iteration-confluence_e2t22": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/tokens",

package/report.api.md

@@ -1255,7 +1255,7 @@ type SpacingPaletteToken = keyof typeof baseSpacingTokens;
 export type SpacingToken = DesignToken<SpacingPaletteToken, 'spacing'>;
 
 // @public (undocumented)
-export type ThemeColorModes = typeof themeColorModes[number];
+export type ThemeColorModes = (typeof themeColorModes)[number];
 
 // @public
 const themeColorModes: readonly ['light', 'dark', 'auto'];
@@ -1286,7 +1286,7 @@ interface ThemeConfig {
 export const themeConfig: Record<Themes, ThemeConfig>;
 
 // @public (undocumented)
-export type ThemeIds = typeof themeIds[number];
+export type ThemeIds = (typeof themeIds)[number];
 
 // @public
 const themeIds: readonly [

package/tmp/api-report-tmp.d.ts

@@ -556,7 +556,7 @@ type SpacingPaletteToken = keyof typeof baseSpacingTokens;
 export type SpacingToken = DesignToken<SpacingPaletteToken, 'spacing'>;
 
 // @public (undocumented)
-export type ThemeColorModes = typeof themeColorModes[number];
+export type ThemeColorModes = (typeof themeColorModes)[number];
 
 // @public
 const themeColorModes: readonly ["light", "dark", "auto"];
@@ -584,7 +584,7 @@ interface ThemeConfig {
 export const themeConfig: Record<Themes, ThemeConfig>;
 
 // @public (undocumented)
-export type ThemeIds = typeof themeIds[number];
+export type ThemeIds = (typeof themeIds)[number];
 
 // @public
 const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];