@atlaskit/tokens 1.54.1 → 1.56.0

package/dist/cjs/artifacts/tokens-raw/atlassian-typography-adg3.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::f7c730817ba1e1c9992dce2fbc46dc93>>
+ * @codegen <<SignedSource::4e47e59f97f2e7d43911658468035bca>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -156,8 +156,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.",
-    "responsiveSmallerVariant": "font.heading.xlarge"
+    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL."
   },
   "value": "normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/theme.tsx",
@@ -167,8 +166,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.",
-      "responsiveSmallerVariant": "font.heading.xlarge"
+      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL."
     },
     "value": {
       "fontWeight": "FontWeight500",
@@ -187,8 +185,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL.",
-    "responsiveSmallerVariant": "font.heading.large"
+    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL."
   },
   "value": "normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/theme.tsx",
@@ -198,8 +195,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL.",
-      "responsiveSmallerVariant": "font.heading.large"
+      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL."
     },
     "value": {
       "fontWeight": "FontWeight600",
@@ -218,8 +214,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L.",
-    "responsiveSmallerVariant": "font.heading.medium"
+    "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L."
   },
   "value": "normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/theme.tsx",
@@ -229,8 +224,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L.",
-      "responsiveSmallerVariant": "font.heading.medium"
+      "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L."
     },
     "value": {
       "fontWeight": "FontWeight500",
@@ -249,8 +243,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.",
-    "responsiveSmallerVariant": "font.heading.small"
+    "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M."
   },
   "value": "normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/theme.tsx",
@@ -260,8 +253,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.",
-      "responsiveSmallerVariant": "font.heading.small"
+      "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M."
     },
     "value": {
       "fontWeight": "FontWeight500",

package/dist/cjs/artifacts/tokens-raw/atlassian-typography-minor3.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::12bdee9d76f2380829d25e57e552d655>>
+ * @codegen <<SignedSource::9266e08ae662e609b2e76306cf8df17e>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -156,8 +156,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.",
-    "responsiveSmallerVariant": "font.heading.xlarge"
+    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL."
   },
   "value": "normal 700 32px/36px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/theme.tsx",
@@ -167,8 +166,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.",
-      "responsiveSmallerVariant": "font.heading.xlarge"
+      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL."
     },
     "value": {
       "fontWeight": "FontWeight700",
@@ -187,8 +185,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL.",
-    "responsiveSmallerVariant": "font.heading.large"
+    "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL."
   },
   "value": "normal 700 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/theme.tsx",
@@ -198,8 +195,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL.",
-      "responsiveSmallerVariant": "font.heading.large"
+      "description": "For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL."
     },
     "value": {
       "fontWeight": "FontWeight700",
@@ -218,8 +214,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L.",
-    "responsiveSmallerVariant": "font.heading.medium"
+    "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L."
   },
   "value": "normal 700 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/theme.tsx",
@@ -229,8 +224,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L.",
-      "responsiveSmallerVariant": "font.heading.medium"
+      "description": "Product page titles, such as forms. Migrate instances of H700 to Heading L."
     },
     "value": {
       "fontWeight": "FontWeight700",
@@ -249,8 +243,7 @@ var tokens = [{
     "group": "typography",
     "state": "active",
     "introduced": "1.14.0",
-    "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.",
-    "responsiveSmallerVariant": "font.heading.small"
+    "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M."
   },
   "value": "normal 700 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/theme.tsx",
@@ -260,8 +253,7 @@ var tokens = [{
       "group": "typography",
       "state": "active",
       "introduced": "1.14.0",
-      "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.",
-      "responsiveSmallerVariant": "font.heading.small"
+      "description": "Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M."
     },
     "value": {
       "fontWeight": "FontWeight700",

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

@@ -43,11 +43,14 @@ var getThemeStyles = /*#__PURE__*/function () {
             themePreferences = _themeConfig.themeIdsWithOverrides;
 
             // CLEANUP: Remove
-            if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+            if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
               themePreferences = themePreferences.filter(function (n) {
                 return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
               });
             }
+            themePreferences = themePreferences.filter(function (n) {
+              return n !== 'light-brand-refresh' && n !== 'dark-brand-refresh';
+            });
           } else {
             themeState = {
               colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
@@ -32,8 +33,13 @@ function getTokenValue(tokenId) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var token = _tokenNames.default[tokenId];
   var tokenValue = fallback;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    (0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " in @atlaskit/tokens"));
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (!token) {
+      (0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " in @atlaskit/tokens"));
+    }
+    if (token === '--ds-icon-subtlest' && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
+      (0, _warnOnce.default)("Token \"color.icon.subtlest\" is only available when feature flag \"platform-component-visual-refresh\" is on, don't use it if the flag can't be turned on on this page");
+    }
   }
   if (typeof window === 'undefined') {
     return tokenValue;

package/dist/cjs/get-token.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 /**
@@ -32,8 +33,13 @@ var _constants = require("./constants");
  */
 function token(path, fallback) {
   var token = _tokenNames.default[path];
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " in @atlaskit/tokens"));
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (!token) {
+      (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " in @atlaskit/tokens"));
+    }
+    if (token === '--ds-icon-subtlest' && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
+      (0, _warnOnce.default)("Token \"color.icon.subtlest\" is only available when feature flag \"platform-component-visual-refresh\" is on, don't use it if the flag can't be turned on on this page");
+    }
   }
 
   // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css

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

@@ -80,7 +80,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
           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 (!(0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
             if (light === 'light-increased-contrast') {
               light = 'light';
             }

package/dist/cjs/theme-config.js

@@ -44,7 +44,7 @@ var themeContrastModes = exports.themeContrastModes = ['more', 'no-preference',
  *
  * These ids must be kebab case
  */
-var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'typography-adg3', 'typography-minor3'];
+var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'light-brand-refresh', 'dark', 'dark-future', 'dark-increased-contrast', 'dark-brand-refresh', 'legacy-light', 'legacy-dark', 'spacing', '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.
@@ -179,6 +179,24 @@ var themeConfig = {
     attributes: {
       type: 'typography'
     }
+  },
+  'atlassian-light-brand-refresh': {
+    id: 'light-brand-refresh',
+    displayName: 'Light theme (Brand refresh)',
+    palette: 'brandRefreshPalette',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-dark-brand-refresh': {
+    id: 'dark-brand-refresh',
+    displayName: 'Dark theme (Brand refresh)',
+    palette: 'brandRefreshPalette',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
   }
 };
 

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

@@ -19,7 +19,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
   var autoColorModeThemes = [light, dark];
   var themePreferences = [];
   if (colorMode === 'auto') {
-    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
       autoColorModeThemes.forEach(function (normalTheme) {
         var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(normalTheme);
         if (increasedContrastTheme) {
@@ -30,7 +30,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
     themePreferences.push.apply(themePreferences, autoColorModeThemes);
   } else {
     themePreferences.push(themeState[colorMode]);
-    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.increased-contrast-themes')) {
+    if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform.design-system-team.increased-contrast-themes')) {
       var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(themeState[colorMode]);
       if (increasedContrastTheme) {
         themePreferences.push(increasedContrastTheme);

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
 var _constants = require("../constants");
 var loadAndAppendThemeCss = exports.loadAndAppendThemeCss = /*#__PURE__*/function () {
@@ -51,13 +52,16 @@ var loadThemeCss = exports.loadThemeCss = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
+          if ((themeId === 'light' || themeId === 'dark') && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
+            themeId += '-brand-refresh';
+          }
+          _context2.next = 3;
           return _themeImportMap.default[themeId]();
-        case 2:
+        case 3:
           _yield$themeImportMap = _context2.sent;
           themeCss = _yield$themeImportMap.default;
           return _context2.abrupt("return", themeCss);
-        case 5:
+        case 6:
         case "end":
           return _context2.stop();
       }