@atlaskit/tokens 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/tokens
 
+## 2.2.0
+
+### Minor Changes
+
+- [#160957](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160957)
+  [`d0fdd33f28249`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0fdd33f28249) -
+  [ux] Default typography theme changed to modernized behind feature flag
+  `platform-default-typography-modernized`. If testing is successful the change will be available in
+  a later release.
+
 ## 2.1.0
 
 ### Minor Changes

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

@@ -44,7 +44,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
     _ref$typography = _ref.typography,
-    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref$typography,
+    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   var themeLoader = arguments.length > 1 ? arguments[1] : undefined;

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

@@ -47,7 +47,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
     _ref$typography = _ref.typography,
-    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref$typography,
+    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)({

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

@@ -59,7 +59,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               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'],
               spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
-              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']
+              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']()
             };
             themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
             themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);

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

@@ -76,7 +76,7 @@ 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$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;
+          _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.

package/dist/cjs/theme-config.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOverrides = exports.themeIds = exports.themeContrastModes = exports.themeColorModes = exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -216,6 +217,11 @@ var themeConfig = {
  * ThemeState: the standard representation of an app's current theme and preferences
  */
 
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
@@ -226,7 +232,12 @@ var themeStateDefaults = exports.themeStateDefaults = {
   light: 'light',
   shape: undefined,
   spacing: 'spacing',
-  typography: undefined,
+  typography: function typography() {
+    if ((0, _platformFeatureFlags.fg)('platform-default-typography-modernized')) {
+      return 'typography-modernized';
+    }
+    return undefined;
+  },
   UNSAFE_themeOptions: undefined
 };
 

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

@@ -30,7 +30,7 @@ const enableGlobalTheme = ({
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
+  typography = themeStateDefaults['typography'](),
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, themeLoader) => {
   const themeState = {

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

@@ -28,7 +28,7 @@ const getThemeHtmlAttrs = ({
   contrastMode = themeStateDefaults['contrastMode'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
+  typography = themeStateDefaults['typography'](),
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}) => {
   const themeAttribute = themeObjectToString({

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

@@ -38,7 +38,7 @@ const getThemeStyles = async preferences => {
       light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
       shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
       spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
-      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
+      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']()
     };
     themePreferences = getThemePreferences(themeState);
     themeOverridePreferences = getThemeOverridePreferences(themeState);

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

@@ -34,7 +34,7 @@ const setGlobalTheme = async ({
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
+  typography = themeStateDefaults['typography'](),
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, themeLoader) => {
   // CLEANUP: Remove. This blocks application of increased contrast themes

package/dist/es2019/theme-config.js

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -210,6 +212,11 @@ const themeConfig = {
  * ThemeState: the standard representation of an app's current theme and preferences
  */
 
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
@@ -220,7 +227,12 @@ export const themeStateDefaults = {
   light: 'light',
   shape: undefined,
   spacing: 'spacing',
-  typography: undefined,
+  typography: () => {
+    if (fg('platform-default-typography-modernized')) {
+      return 'typography-modernized';
+    }
+    return undefined;
+  },
   UNSAFE_themeOptions: undefined
 };
 

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

@@ -38,7 +38,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? themeStateDefaults['spacing'] : _ref$spacing,
     _ref$typography = _ref.typography,
-    typography = _ref$typography === void 0 ? themeStateDefaults['typography'] : _ref$typography,
+    typography = _ref$typography === void 0 ? themeStateDefaults['typography']() : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   var themeLoader = arguments.length > 1 ? arguments[1] : undefined;

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

@@ -40,7 +40,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? themeStateDefaults['spacing'] : _ref$spacing,
     _ref$typography = _ref.typography,
-    typography = _ref$typography === void 0 ? themeStateDefaults['typography'] : _ref$typography,
+    typography = _ref$typography === void 0 ? themeStateDefaults['typography']() : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   var themeAttribute = themeObjectToString({

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

@@ -49,7 +49,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
               shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
               spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
-              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
+              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']()
             };
             themePreferences = getThemePreferences(themeState);
             themeOverridePreferences = getThemeOverridePreferences(themeState);

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

@@ -67,7 +67,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _regeneratorRuntime.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 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
+          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography']() : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? 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.

package/dist/esm/theme-config.js

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -210,6 +212,11 @@ var themeConfig = {
  * ThemeState: the standard representation of an app's current theme and preferences
  */
 
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
@@ -220,7 +227,12 @@ export var themeStateDefaults = {
   light: 'light',
   shape: undefined,
   spacing: 'spacing',
-  typography: undefined,
+  typography: function typography() {
+    if (fg('platform-default-typography-modernized')) {
+      return 'typography-modernized';
+    }
+    return undefined;
+  },
   UNSAFE_themeOptions: undefined
 };
 

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

@@ -124,10 +124,17 @@ export interface ThemeState {
     typography?: Extract<ThemeIds, 'typography' | 'typography-adg3' | 'typography-modernized' | 'typography-refreshed'>;
     UNSAFE_themeOptions?: ThemeOptionsSchema;
 }
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+interface ThemeStateDefaults extends Omit<ThemeState, 'typography'> {
+    typography: () => ThemeState['typography'];
+}
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
-export declare const themeStateDefaults: ThemeState;
+export declare const themeStateDefaults: ThemeStateDefaults;
 /**
  * Represents theme state once mounted to the page
  * (the page doesn't have an "auto" color mode, it's either light or dark)

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

@@ -165,10 +165,17 @@ export interface ThemeState {
     typography?: Extract<ThemeIds, 'typography' | 'typography-adg3' | 'typography-modernized' | 'typography-refreshed'>;
     UNSAFE_themeOptions?: ThemeOptionsSchema;
 }
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+interface ThemeStateDefaults extends Omit<ThemeState, 'typography'> {
+    typography: () => ThemeState['typography'];
+}
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
-export declare const themeStateDefaults: ThemeState;
+export declare const themeStateDefaults: ThemeStateDefaults;
 /**
  * Represents theme state once mounted to the page
  * (the page doesn't have an "auto" color mode, it's either light or dark)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -130,6 +130,9 @@
 		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform-default-typography-modernized": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/tokens"