@atlaskit/tokens 1.55.0 → 1.56.0

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();
       }