@atlaskit/tokens 1.11.2 → 1.12.0

package/dist/es2019/utils/hct-color-utils/index.js

@@ -0,0 +1,3 @@
+export { Hct } from './hct';
+export { Contrast } from './contrast';
+export { argbFromRgba, rgbaFromArgb } from './color-utils';

package/dist/es2019/utils/hct-color-utils/math-utils.js

@@ -0,0 +1,145 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+/**
+ * Utility methods for mathematical operations.
+ */
+
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num) {
+  if (num < 0) {
+    return -1;
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return 1;
+  }
+}
+
+/**
+ * The linear interpolation function.
+ *
+ * @return start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start, stop, amount) {
+  return (1.0 - amount) * start + amount * stop;
+}
+
+/**
+ * Clamps an integer between two integers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min, max, input) {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+  return input;
+}
+
+/**
+ * Clamps an integer between two floating-point numbers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min, max, input) {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+  return input;
+}
+
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees) {
+  degrees = degrees % 360;
+  if (degrees < 0) {
+    degrees = degrees + 360;
+  }
+  return degrees;
+}
+
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees) {
+  degrees = degrees % 360.0;
+  if (degrees < 0) {
+    degrees = degrees + 360.0;
+  }
+  return degrees;
+}
+
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ *
+ * @param from The angle travel starts from, in degrees.
+ * @param to The angle travel ends at, in degrees.
+ * @return -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export function rotationDirection(from, to) {
+  const increasingDifference = sanitizeDegreesDouble(to - from);
+  return increasingDifference <= 180.0 ? 1.0 : -1.0;
+}
+
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+export function differenceDegrees(a, b) {
+  return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
+
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+export function matrixMultiply(row, matrix) {
+  const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

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

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

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

@@ -45,4 +45,6 @@ export const themeStringToObject = themeState => {
  * // 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, '');
+export const themeObjectToString = themeState => {
+  return Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');
+};

package/dist/es2019/version.json

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

package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js

@@ -0,0 +1,17 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::1ddd5cd744975e8df5a191332ec8a42c>>
+ * @codegenCommand yarn build tokens
+ */
+var tokenValues = {
+  'color.text.brand': '#579DFF',
+  'elevation.surface.overlay': '#282E33',
+  'color.text.selected': '#579DFF',
+  'color.background.selected': '#092957',
+  'color.border.brand': '#579DFF',
+  'color.chart.brand': '#388BFF'
+};
+export default tokenValues;

package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js

@@ -0,0 +1,17 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::b59877585fad151840dbf6c212c56e34>>
+ * @codegenCommand yarn build tokens
+ */
+var tokenValues = {
+  'color.text.brand': '#0C66E4',
+  'elevation.surface.sunken': '#F7F8F9',
+  'color.text.selected': '#0C66E4',
+  'color.background.selected': '#E9F2FF',
+  'color.border.brand': '#0C66E4',
+  'color.chart.brand': '#1D7AFC'
+};
+export default tokenValues;

package/dist/esm/artifacts/themes/atlassian-dark-new-input-border.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b255ff03ae4f781bb3016003a111bed0>>
+ * @codegen <<SignedSource::cadad94754b78a066c340ab42eca9721>>
  * @codegenCommand yarn build tokens
  */
-export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border-input: #596773;\n}\n";
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border-input: #738496;\n}\n";

package/dist/esm/artifacts/tokens-raw/atlassian-dark-new-input-border.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2c7e6a36e75ad8b32981cc4bbaa378db>>
+ * @codegen <<SignedSource::a87638614efbe4415e8ffd370dd4ce76>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -10,7 +10,7 @@ var tokens = [{
     "introduced": "0.6.0",
     "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
   },
-  "value": "#596773",
+  "value": "#738496",
   "filePath": "src/tokens/atlassian-dark-new-input-border/color/border.tsx",
   "isSource": true,
   "original": {
@@ -20,7 +20,7 @@ var tokens = [{
       "introduced": "0.6.0",
       "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons."
     },
-    "value": "DarkNeutral500"
+    "value": "DarkNeutral600"
   },
   "name": "color.border.input",
   "path": ["color", "border", "input"],

package/dist/esm/constants.js

@@ -1,5 +1,6 @@
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
+export var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds';
 export var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];

package/dist/esm/custom-theme.js

@@ -0,0 +1,98 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './set-global-theme';
+import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
+import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
+import { hash } from './utils/hash';
+export var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
+/**
+ *
+ * @param themeSchema The schema of available themes
+ * @returns a string with the CSS for the custom theme
+ */
+/**
+ * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+export function getCustomThemeStyles(_x) {
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+function _getCustomThemeStyles() {
+  _getCustomThemeStyles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeState) {
+    var _themeState$UNSAFE_th;
+    var brandColor, mode, optionString, uniqueId, themeRamp, themes, tokenMaps;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
+          mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
+          optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+          uniqueId = hash(optionString);
+          themeRamp = generateColors(brandColor); // outputs object to generate to CSS from
+          themes = [];
+          tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
+          if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
+            // Light mode theming
+            themes.push({
+              id: 'light',
+              attrs: {
+                'data-theme': 'light',
+                'data-custom-theme': uniqueId
+              },
+              css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.light, themeRamp), "\n}")
+            });
+          }
+          if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
+            // Dark mode theming
+            themes.push({
+              id: 'dark',
+              attrs: {
+                'data-theme': 'dark',
+                'data-custom-theme': uniqueId
+              },
+              css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.dark, themeRamp), "\n}")
+            });
+          }
+          return _context.abrupt("return", themes);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+export function loadAndAppendCustomThemeCss(_x2) {
+  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+}
+function _loadAndAppendCustomThemeCss() {
+  _loadAndAppendCustomThemeCss = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeState) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          getCustomThemeStyles(themeState).then(function (themes) {
+            limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+            themes.map(function (theme) {
+              var styleTag = document.createElement('style');
+              document.head.appendChild(styleTag);
+              styleTag.dataset.theme = theme.attrs['data-theme'];
+              styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
+              styleTag.textContent = theme.css;
+            });
+          });
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+}

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.11.2";
+var version = "1.12.0";
 /**
  * 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/esm/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';
 var name = "@atlaskit/tokens";
-var version = "1.11.2";
+var version = "1.12.0";
 /**
  * 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.