@atlaskit/tokens 1.55.0 → 1.56.0

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

@@ -1,4 +1,4 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { themeIdsWithOverrides, themeStateDefaults } from './theme-config';
 import { isValidBrandHex } from './utils/color-utils';
 import { getThemeOverridePreferences, getThemePreferences } from './utils/get-theme-preferences';
@@ -26,9 +26,10 @@ const getThemeStyles = async preferences => {
     themePreferences = themeIdsWithOverrides;
 
     // CLEANUP: Remove
-    if (!getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+    if (!fg('platform.design-system-team.increased-contrast-themes')) {
       themePreferences = themePreferences.filter(n => n !== 'light-increased-contrast' && n !== 'dark-increased-contrast');
     }
+    themePreferences = themePreferences.filter(n => n !== 'light-brand-refresh' && n !== 'dark-brand-refresh');
   } else {
     const themeState = {
       colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],

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

@@ -1,4 +1,5 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { fg } from '@atlaskit/platform-feature-flags';
 import tokens from './artifacts/token-names';
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
@@ -24,8 +25,13 @@ import tokens from './artifacts/token-names';
 function getTokenValue(tokenId, fallback = '') {
   let token = tokens[tokenId];
   let tokenValue = fallback;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce(`Unknown token id at path: ${tokenId} in @atlaskit/tokens`);
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (!token) {
+      warnOnce(`Unknown token id at path: ${tokenId} in @atlaskit/tokens`);
+    }
+    if (token === '--ds-icon-subtlest' && !fg('platform-component-visual-refresh')) {
+      warnOnce(`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/es2019/get-token.js

@@ -1,4 +1,5 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { fg } from '@atlaskit/platform-feature-flags';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 /**
@@ -25,8 +26,13 @@ import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
  */
 function token(path, fallback) {
   let token = tokens[path];
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce(`Unknown token id at path: ${path} in @atlaskit/tokens`);
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    if (!token) {
+      warnOnce(`Unknown token id at path: ${path} in @atlaskit/tokens`);
+    }
+    if (token === '--ds-icon-subtlest' && !fg('platform-component-visual-refresh')) {
+      warnOnce(`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/es2019/set-global-theme.js

@@ -1,4 +1,4 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { themeStateDefaults } from './theme-config';
 import { isValidBrandHex } from './utils/color-utils';
 import configurePage from './utils/configure-page';
@@ -39,7 +39,7 @@ const setGlobalTheme = async ({
 } = {}, themeLoader) => {
   // CLEANUP: Remove. This blocks application of increased contrast themes
   // without the feature flag enabled.
-  if (!getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+  if (!fg('platform.design-system-team.increased-contrast-themes')) {
     if (light === 'light-increased-contrast') {
       light = 'light';
     }

package/dist/es2019/theme-config.js

@@ -38,7 +38,7 @@ export const themeContrastModes = ['more', 'no-preference', 'auto'];
  *
  * These ids must be kebab case
  */
-export const themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'typography-adg3', 'typography-minor3'];
+export const 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.
@@ -173,6 +173,24 @@ const 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/es2019/utils/get-theme-preferences.js

@@ -1,4 +1,4 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import getIncreasedContrastTheme from './get-increased-contrast-theme';
 export const getThemePreferences = themeState => {
   const {
@@ -13,7 +13,7 @@ export const getThemePreferences = themeState => {
   const autoColorModeThemes = [light, dark];
   const themePreferences = [];
   if (colorMode === 'auto') {
-    if (contrastMode !== 'no-preference' && getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+    if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
       autoColorModeThemes.forEach(normalTheme => {
         const increasedContrastTheme = getIncreasedContrastTheme(normalTheme);
         if (increasedContrastTheme) {
@@ -24,7 +24,7 @@ export const getThemePreferences = themeState => {
     themePreferences.push(...autoColorModeThemes);
   } else {
     themePreferences.push(themeState[colorMode]);
-    if (contrastMode !== 'no-preference' && getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+    if (contrastMode !== 'no-preference' && fg('platform.design-system-team.increased-contrast-themes')) {
       const increasedContrastTheme = getIncreasedContrastTheme(themeState[colorMode]);
       if (increasedContrastTheme) {
         themePreferences.push(increasedContrastTheme);

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

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import themeImportMap from '../artifacts/theme-import-map';
 import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
 export const loadAndAppendThemeCss = async themeId => {
@@ -17,6 +18,9 @@ export const loadAndAppendThemeCss = async themeId => {
   document.head.appendChild(style);
 };
 export const loadThemeCss = async themeId => {
+  if ((themeId === 'light' || themeId === 'dark') && fg('platform-component-visual-refresh')) {
+    themeId += '-brand-refresh';
+  }
   const {
     default: themeCss
   } = await themeImportMap[themeId]();