@atlaskit/tokens 0.13.5 → 1.1.0

package/dist/es2019/utils/color-detection.js

@@ -22,6 +22,7 @@ export const getLuminance = ({
   g,
   b
 }) => (r * 299 + g * 587 + b * 114) / 1000;
+
 /**
  * Returns an accessible hard-coded text color based on the color contrast with
  * the background.
@@ -31,7 +32,6 @@ export const getLuminance = ({
  * of a hard-coded color. This is to support more transparent backgrounds
  * to allow the text to invert colors depending on the current theme's surface color.
  */
-
 export const getTextColorForBackground = (hex, opts) => {
   const {
     r,
@@ -50,22 +50,20 @@ export const getTextColorForBackground = (hex, opts) => {
     dark: a > alphaLimit
   };
   const alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
-
   if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
     // This color is transparent, so the text will mainly cast onto the surface behind.
     // Needs to use tokens otherwise Dark mode would cause black text on black surface
     return token('color.text', 'black');
   }
-
   return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
 };
+
 /**
  * Returns a border if determined to be required based on the color contrast with
  * the background.
  *
  * @param hex - The Hex color code of the background
  */
-
 export const getBorderForBackground = hex => {
   const {
     r,
@@ -80,12 +78,12 @@ export const getBorderForBackground = hex => {
   });
   return lum > 240 || a < 0.2 ? `1px solid ${token('color.border', '#091E4224')}` : undefined;
 };
+
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
  * @param rawShadow - ShadowToken raw value
  */
-
 export const getBoxShadow = rawShadow => rawShadow.map(({
   radius,
   offset,

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

@@ -0,0 +1,18 @@
+import themeImportMap from '../artifacts/theme-import-map';
+import { THEME_DATA_ATTRIBUTE } from '../constants';
+export const loadAndAppendThemeCss = async themeId => {
+  if (document.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]`)) {
+    return;
+  }
+  const themeCss = await loadThemeCss(themeId);
+  const style = document.createElement('style');
+  style.textContent = themeCss;
+  style.dataset.theme = themeId;
+  document.head.appendChild(style);
+};
+export const loadThemeCss = async themeId => {
+  const {
+    default: themeCss
+  } = await themeImportMap[themeId]();
+  return themeCss;
+};

package/dist/es2019/utils/theme-state-transformer.js

@@ -0,0 +1,47 @@
+import { themeIds } from '../theme-config';
+const themeKinds = ['light', 'dark', 'spacing', 'typography'];
+const isThemeKind = themeKind => {
+  return themeKinds.find(kind => kind === themeKind) !== undefined;
+};
+const isThemeIds = themeId => {
+  return themeIds.find(id => id === themeId) !== undefined;
+};
+const isColorMode = modeId => {
+  return ['light', 'dark', 'auto'].includes(modeId);
+};
+/**
+ * Converts a string that is formatted for the `data-theme` HTML attribute
+ * to an object that can be passed to `setGlobalTheme`.
+ *
+ * @param {string} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeStringToObject('dark:dark light:legacy-light spacing:spacing');
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
+ * ```
+ */
+export const themeStringToObject = themeState => {
+  return themeState.split(' ').map(theme => theme.split(':')).reduce((themeObject, [kind, id]) => {
+    if (kind === 'colorMode' && isColorMode(id)) {
+      themeObject[kind] = id;
+    }
+    if (isThemeKind(kind) && isThemeIds(id)) {
+      themeObject[kind] = id;
+    }
+    return themeObject;
+  }, {});
+};
+
+/**
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
+ *
+ * @param {object} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeObjectToString({ dark: 'dark', light: 'legacy-light', spacing: 'spacing' });
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
+ * ```
+ */
+export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');

package/dist/es2019/utils/token-ids.js

@@ -1,4 +1,5 @@
 import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
+
 /**
  * Transforms a style dictionary token path to a CSS custom property.
  *
@@ -13,13 +14,14 @@ import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
  * // Returns ds-background-bold
  * getCSSCustomProperty('color.background.bold.[default]')
  */
-
 export const getCSSCustomProperty = path => {
-  const normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
 
+  // Opacity and other 'shallow' groups are more readable when not trimmed
   const slice = CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
   return `--${[CSS_PREFIX, ...normalizedPath.slice(slice)].filter(el => el !== '[default]').join('-')}`;
 };
+
 /**
  * Transforms a style dictionary token path to a shorthand token id
  * These ids will be typically be how tokens are interacted with via typescript and css
@@ -34,11 +36,11 @@ export const getCSSCustomProperty = path => {
  * // Returns color.background.bold
  * getTokenId('color.background.bold.[default]')
  */
-
 export const getTokenId = path => {
   const normalizedPath = typeof path === 'string' ? path.split('.') : path;
   return normalizedPath.filter(el => el !== '[default]').join('.');
 };
+
 /**
  * Transforms a style dictionary token path to a fully qualified token id
  * These Ids are intended to be used internal to this package by style-dictionary
@@ -49,5 +51,4 @@ export const getTokenId = path => {
  * // Returns color.background.bold.[default]
  * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
  */
-
 export const getFullyQualifiedTokenId = path => path.join('.');

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.13.5",
+	"version": "1.1.0",
 	"sideEffects": [
 		"**/*.css"
 	]