@atlaskit/tokens 1.54.1 → 1.56.0

package/dist/es2019/artifacts/tokens-raw/atlassian-typography-adg3.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f7c730817ba1e1c9992dce2fbc46dc93>>
+ * @codegen <<SignedSource::4e47e59f97f2e7d43911658468035bca>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -150,8 +150,7 @@ const 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",
@@ -161,8 +160,7 @@ const 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",
@@ -181,8 +179,7 @@ const 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",
@@ -192,8 +189,7 @@ const 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",
@@ -212,8 +208,7 @@ const 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",
@@ -223,8 +218,7 @@ const 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",
@@ -243,8 +237,7 @@ const 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",
@@ -254,8 +247,7 @@ const 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/es2019/artifacts/tokens-raw/atlassian-typography-minor3.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::12bdee9d76f2380829d25e57e552d655>>
+ * @codegen <<SignedSource::9266e08ae662e609b2e76306cf8df17e>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -150,8 +150,7 @@ const 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",
@@ -161,8 +160,7 @@ const 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",
@@ -181,8 +179,7 @@ const 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",
@@ -192,8 +189,7 @@ const 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",
@@ -212,8 +208,7 @@ const 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",
@@ -223,8 +218,7 @@ const 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",
@@ -243,8 +237,7 @@ const 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",
@@ -254,8 +247,7 @@ const 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/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]();