@atlaskit/tokens 1.25.1 → 1.26.0

package/dist/es2019/constants.js

@@ -1,5 +1,6 @@
 export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
+export const CONTRAST_MODE_ATTRIBUTE = 'data-contrast-mode';
 export const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds';

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

@@ -25,6 +25,7 @@ import { getThemePreferences } from './utils/get-theme-preferences';
  */
 const enableGlobalTheme = ({
   colorMode = themeStateDefaults['colorMode'],
+  contrastMode = themeStateDefaults['contrastMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
@@ -34,6 +35,7 @@ const enableGlobalTheme = ({
 } = {}, themeLoader) => {
   const themeState = {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,

package/dist/es2019/get-ssr-auto-script.js

@@ -1,5 +1,6 @@
-import { COLOR_MODE_ATTRIBUTE } from './constants';
-import { darkModeMediaQuery } from './utils/theme-loading';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE } from './constants';
+import { darkModeMediaQuery, moreContrastMediaQuery } from './utils/theme-loading';
 
 /**
  * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
@@ -9,15 +10,20 @@ import { darkModeMediaQuery } from './utils/theme-loading';
  *
  * @returns {string} A string to be added to the innerHTML of a script tag in the document head
  */
-const getSSRAutoScript = colorMode => {
-  return colorMode === 'auto' ? `(
-  () => {
-    try {
-      const mql = window.matchMedia('${darkModeMediaQuery}');
-      const colorMode = mql.matches ? 'dark' : 'light';
-      document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
-    } catch (e) {}
+const getSSRAutoScript = (colorMode, contrastMode) => {
+  if (colorMode !== 'auto' && contrastMode !== 'auto') {
+    return undefined;
   }
-)()` : undefined;
+  const setColorMode = colorMode === 'auto' ? `\n  try {
+    const darkModeMql = window.matchMedia('${darkModeMediaQuery}');
+    const colorMode = darkModeMql.matches ? 'dark' : 'light';
+    document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
+  } catch (e) {}` : '';
+  const setContrastMode = getBooleanFF('platform.design-system-team.increased-contrast-themes') && contrastMode === 'auto' ? `\n  try {
+    const contrastModeMql = window.matchMedia('${moreContrastMediaQuery}');
+    const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';
+    document.documentElement.setAttribute('${CONTRAST_MODE_ATTRIBUTE}', contrastMode);
+  } catch (e) {}` : '';
+  return `(() => {${setColorMode}${setContrastMode}})()`;
 };
 export default getSSRAutoScript;

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

@@ -1,9 +1,11 @@
-import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeStateDefaults } from './theme-config';
 import { themeObjectToString } from './theme-state-transformer';
 import { isValidBrandHex } from './utils/color-utils';
 import { hash } from './utils/hash';
 const defaultColorMode = 'light';
+const defaultContrastMode = 'no-preference';
 
 /**
  * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
@@ -23,6 +25,7 @@ const getThemeHtmlAttrs = ({
   colorMode = themeStateDefaults['colorMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  contrastMode = themeStateDefaults['contrastMode'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography'],
@@ -35,10 +38,17 @@ const getThemeHtmlAttrs = ({
     spacing,
     typography
   });
-  const result = {
+  let result = {
     [THEME_DATA_ATTRIBUTE]: themeAttribute,
     [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
   };
+  if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+    result = {
+      ...result,
+      // CLEANUP: Move this to the initial `result` assignment above
+      [CONTRAST_MODE_ATTRIBUTE]: contrastMode === 'auto' ? defaultContrastMode : contrastMode
+    };
+  }
   if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
     const optionString = JSON.stringify(UNSAFE_themeOptions);
     const uniqueId = hash(optionString);

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

@@ -1,3 +1,4 @@
+import { getBooleanFF } 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';
@@ -23,9 +24,15 @@ const getThemeStyles = async preferences => {
   let themeOverridePreferences = [];
   if (preferences === 'all') {
     themePreferences = themeIdsWithOverrides;
+
+    // CLEANUP: Remove
+    if (!getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+      themePreferences = themePreferences.filter(n => n !== 'light-increased-contrast' && n !== 'dark-increased-contrast');
+    }
   } else {
     const themeState = {
       colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+      contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || themeStateDefaults['contrastMode'],
       dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
       light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
       shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.25.1";
+const version = "0.0.0-development";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.25.1";
+const version = "0.0.0-development";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

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

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { themeStateDefaults } from './theme-config';
 import { isValidBrandHex } from './utils/color-utils';
 import configurePage from './utils/configure-page';
@@ -10,6 +11,7 @@ import { loadAndAppendThemeCss } from './utils/theme-loading';
  *
  * @param {Object<string, string>} themeState The themes and color mode that should be applied.
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.contrastMode The contrast mode theme to be applied. If set to `auto`, the theme applied will be determined by the OS setting.set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
  * @param {string} themeState.shape The shape theme to be applied.
@@ -27,6 +29,7 @@ import { loadAndAppendThemeCss } from './utils/theme-loading';
  */
 const setGlobalTheme = async ({
   colorMode = themeStateDefaults['colorMode'],
+  contrastMode = themeStateDefaults['contrastMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
@@ -34,8 +37,19 @@ const setGlobalTheme = async ({
   typography = themeStateDefaults['typography'],
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, 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 (light === 'light-increased-contrast') {
+      light = 'light';
+    }
+    if (dark === 'dark-increased-contrast') {
+      dark = 'dark';
+    }
+  }
   const themeState = {
     colorMode,
+    contrastMode,
     dark,
     light,
     shape,

package/dist/es2019/theme-config.js

@@ -28,13 +28,17 @@
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
  */
 export const themeColorModes = ['light', 'dark', 'auto'];
+/**
+ * Contrast preferences: The system contrast preference
+ */
+export const themeContrastModes = ['more', 'no-preference', 'auto'];
 /**
  * Theme ids: The value that will be mounted to the DOM as a data attr
  * For example: `data-theme="light:light dark:dark spacing:spacing"
  *
  * These ids must be kebab case
  */
-export const themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3', 'typography-minor3'];
+export const themeIds = ['light-increased-contrast', 'light', 'dark', 'dark-increased-contrast', 'legacy-light', 'legacy-dark', 'spacing', 'typography', '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.
@@ -69,6 +73,17 @@ const themeConfig = {
       mode: 'light'
     }
   },
+  'atlassian-light-increased-contrast': {
+    id: 'light-increased-contrast',
+    displayName: 'Light Theme (increased contrast)',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    },
+    extends: 'light',
+    increasesContrastFor: 'light'
+  },
   'atlassian-dark': {
     id: 'dark',
     displayName: 'Dark Theme',
@@ -78,6 +93,17 @@ const themeConfig = {
       mode: 'dark'
     }
   },
+  'atlassian-dark-increased-contrast': {
+    id: 'dark-increased-contrast',
+    displayName: 'Dark Theme (increased contrast)',
+    palette: 'defaultPalette',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    },
+    extends: 'dark',
+    increasesContrastFor: 'dark'
+  },
   'atlassian-legacy-light': {
     id: 'legacy-light',
     displayName: 'Light Theme (legacy)',
@@ -195,6 +221,7 @@ const themeConfig = {
  */
 export const themeStateDefaults = {
   colorMode: 'auto',
+  contrastMode: 'auto',
   dark: 'dark',
   light: 'light',
   shape: undefined,

package/dist/es2019/tokens/atlassian-dark-increased-contrast/color/accent.js

@@ -0,0 +1,265 @@
+const color = {
+  color: {
+    text: {
+      accent: {
+        blue: {
+          '[default]': {
+            value: 'Blue200'
+          },
+          bolder: {
+            value: 'Blue100'
+          }
+        },
+        red: {
+          '[default]': {
+            value: 'Red200'
+          },
+          bolder: {
+            value: 'Red100'
+          }
+        },
+        orange: {
+          '[default]': {
+            value: 'Orange200'
+          },
+          bolder: {
+            value: 'Orange100'
+          }
+        },
+        yellow: {
+          '[default]': {
+            value: 'Yellow200'
+          },
+          bolder: {
+            value: 'Yellow100'
+          }
+        },
+        green: {
+          '[default]': {
+            value: 'Green200'
+          },
+          bolder: {
+            value: 'Green100'
+          }
+        },
+        purple: {
+          '[default]': {
+            value: 'Purple200'
+          },
+          bolder: {
+            value: 'Purple100'
+          }
+        },
+        teal: {
+          '[default]': {
+            value: 'Teal200'
+          },
+          bolder: {
+            value: 'Teal100'
+          }
+        },
+        magenta: {
+          '[default]': {
+            value: 'Magenta200'
+          },
+          bolder: {
+            value: 'Magenta100'
+          }
+        },
+        lime: {
+          '[default]': {
+            value: 'Lime200'
+          },
+          bolder: {
+            value: 'Lime100'
+          }
+        },
+        gray: {
+          '[default]': {
+            value: 'DarkNeutral900'
+          },
+          bolder: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      }
+    },
+    icon: {
+      accent: {
+        blue: {
+          value: 'Blue300'
+        },
+        red: {
+          value: 'Red300'
+        },
+        orange: {
+          value: 'Orange300'
+        },
+        yellow: {
+          value: 'Yellow300'
+        },
+        green: {
+          value: 'Green300'
+        },
+        purple: {
+          value: 'Purple300'
+        },
+        teal: {
+          value: 'Teal300'
+        },
+        magenta: {
+          value: 'Magenta300'
+        },
+        lime: {
+          value: 'Lime300'
+        },
+        gray: {
+          value: 'DarkNeutral800'
+        }
+      }
+    },
+    border: {
+      accent: {
+        blue: {
+          value: 'Blue300'
+        },
+        red: {
+          value: 'Red300'
+        },
+        orange: {
+          value: 'Orange300'
+        },
+        yellow: {
+          value: 'Yellow300'
+        },
+        green: {
+          value: 'Green300'
+        },
+        purple: {
+          value: 'Purple300'
+        },
+        teal: {
+          value: 'Teal300'
+        },
+        magenta: {
+          value: 'Magenta300'
+        },
+        lime: {
+          value: 'Lime300'
+        },
+        gray: {
+          value: 'DarkNeutral800'
+        }
+      }
+    },
+    background: {
+      accent: {
+        red: {
+          bolder: {
+            '[default]': {
+              value: 'Red200'
+            },
+            hovered: {
+              value: 'Red100'
+            }
+          }
+        },
+        orange: {
+          bolder: {
+            '[default]': {
+              value: 'Orange200'
+            },
+            hovered: {
+              value: 'Orange100'
+            }
+          }
+        },
+        yellow: {
+          bolder: {
+            '[default]': {
+              value: 'Yellow200'
+            },
+            hovered: {
+              value: 'Yellow100'
+            }
+          }
+        },
+        green: {
+          bolder: {
+            '[default]': {
+              value: 'Green200'
+            },
+            hovered: {
+              value: 'Green100'
+            }
+          }
+        },
+        purple: {
+          bolder: {
+            '[default]': {
+              value: 'Purple200'
+            },
+            hovered: {
+              value: 'Purple100'
+            }
+          }
+        },
+        teal: {
+          bolder: {
+            '[default]': {
+              value: 'Teal200'
+            },
+            hovered: {
+              value: 'Teal100'
+            }
+          }
+        },
+        magenta: {
+          bolder: {
+            '[default]': {
+              value: 'Magenta200'
+            },
+            hovered: {
+              value: 'Magenta100'
+            }
+          }
+        },
+        lime: {
+          bolder: {
+            '[default]': {
+              value: 'Lime200'
+            },
+            hovered: {
+              value: 'Lime100'
+            }
+          }
+        },
+        gray: {
+          subtle: {
+            '[default]': {
+              value: 'DarkNeutral400'
+            },
+            hovered: {
+              value: 'DarkNeutral300'
+            },
+            pressed: {
+              value: 'DarkNeutral200'
+            }
+          },
+          bolder: {
+            '[default]': {
+              value: 'DarkNeutral800'
+            },
+            hovered: {
+              value: 'DarkNeutral900'
+            },
+            pressed: {
+              value: 'DarkNeutral1000'
+            }
+          }
+        }
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/tokens/atlassian-dark-increased-contrast/color/background.js

@@ -0,0 +1,98 @@
+const color = {
+  color: {
+    background: {
+      brand: {
+        bold: {
+          '[default]': {
+            value: 'Blue200'
+          },
+          hovered: {
+            value: 'Blue100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      selected: {
+        bold: {
+          '[default]': {
+            value: 'Blue200'
+          },
+          hovered: {
+            value: 'Blue100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      danger: {
+        bold: {
+          '[default]': {
+            value: 'Red200'
+          },
+          hovered: {
+            value: 'Red100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      warning: {
+        bold: {
+          '[default]': {
+            value: 'Yellow200'
+          },
+          hovered: {
+            value: 'Yellow100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      success: {
+        bold: {
+          '[default]': {
+            value: 'Green200'
+          },
+          hovered: {
+            value: 'Green100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      discovery: {
+        bold: {
+          '[default]': {
+            value: 'Purple200'
+          },
+          hovered: {
+            value: 'Purple100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      },
+      information: {
+        bold: {
+          '[default]': {
+            value: 'Blue200'
+          },
+          hovered: {
+            value: 'Blue100'
+          },
+          pressed: {
+            value: 'DarkNeutral1100'
+          }
+        }
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/tokens/atlassian-dark-increased-contrast/color/border.js

@@ -0,0 +1,40 @@
+const color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'DarkNeutral500A'
+      },
+      bold: {
+        value: 'DarkNeutral800'
+      },
+      input: {
+        value: 'DarkNeutral800'
+      },
+      disabled: {
+        value: 'DarkNeutral300A'
+      },
+      brand: {
+        value: 'Blue300'
+      },
+      selected: {
+        value: 'Blue300'
+      },
+      danger: {
+        value: 'Red400'
+      },
+      warning: {
+        value: 'Orange300'
+      },
+      success: {
+        value: 'Green300'
+      },
+      discovery: {
+        value: 'Purple400'
+      },
+      information: {
+        value: 'Blue300'
+      }
+    }
+  }
+};
+export default color;