@atlaskit/tokens 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 0.13.1
+
+### Patch Changes
+
+- [`a5eed85fe2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5eed85fe2e) - Added a new `getTokenValue()` API - it accepts a dot-separated token name and a fallback value, and returns the current computed CSS value for the resulting CSS Custom Property. This should be used when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
+
 ## 0.13.0
 
 ### Minor Changes

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+
+var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
+
+var name = "@atlaskit/tokens";
+var version = "0.13.1";
+
+/**
+ * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
+ * resulting CSS Custom Property.
+ * This should be used for when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
+ *
+ * Note: these values change depending on the theme so consider pairing them with `useThemeObserver` in React, or the
+ * `ThemeMutationObserver` class elsewhere.
+ *
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver();
+ *
+ * useEffect(() => {
+ *  const lineColor = getTokenValue('color.background.accent.blue.subtle', B400);
+ * }, [theme]);
+ * ```
+ *
+ */
+function getTokenValue(tokenId) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var token = _tokenNames.default[tokenId];
+  var tokenValue = fallback;
+
+  if (process.env.NODE_ENV !== 'production' && !token) {
+    (0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " for ").concat(name, "@").concat(version));
+  }
+
+  if (typeof window === 'undefined') {
+    return tokenValue;
+  }
+
+  tokenValue = window.getComputedStyle(document.documentElement).getPropertyValue(token);
+  tokenValue = tokenValue || fallback;
+  return tokenValue;
+}
+
+var _default = getTokenValue;
+exports.default = _default;

package/dist/cjs/get-token.js

@@ -14,7 +14,7 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.13.0";
+var version = "0.13.1";
 
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.

package/dist/cjs/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "ThemeMutationObserver", {
     return _themeChangeObserver.ThemeMutationObserver;
   }
 });
+Object.defineProperty(exports, "getTokenValue", {
+  enumerable: true,
+  get: function get() {
+    return _getTokenValue.default;
+  }
+});
 Object.defineProperty(exports, "setGlobalTheme", {
   enumerable: true,
   get: function get() {
@@ -38,6 +44,8 @@ Object.defineProperty(exports, "useThemeObserver", {
 
 var _getToken = _interopRequireDefault(require("./get-token"));
 
+var _getTokenValue = _interopRequireDefault(require("./get-token-value"));
+
 var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
 
 var _themeConfig = _interopRequireDefault(require("./theme-config"));

package/dist/cjs/theme-change-observer.js

@@ -20,7 +20,7 @@ var _react = require("react");
 var _constants = require("./constants");
 
 var getGlobalTheme = function getGlobalTheme() {
-  return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.COLOR_MODE_ATTRIBUTE) : null;
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
 };
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.

package/dist/cjs/version.json

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

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

@@ -0,0 +1,44 @@
+import warnOnce from '@atlaskit/ds-lib/warn-once';
+import tokens from './artifacts/token-names';
+const name = "@atlaskit/tokens";
+const version = "0.13.1";
+
+/**
+ * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
+ * resulting CSS Custom Property.
+ * This should be used for when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
+ *
+ * Note: these values change depending on the theme so consider pairing them with `useThemeObserver` in React, or the
+ * `ThemeMutationObserver` class elsewhere.
+ *
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver();
+ *
+ * useEffect(() => {
+ *  const lineColor = getTokenValue('color.background.accent.blue.subtle', B400);
+ * }, [theme]);
+ * ```
+ *
+ */
+function getTokenValue(tokenId, fallback = '') {
+  let token = tokens[tokenId];
+  let tokenValue = fallback;
+
+  if (process.env.NODE_ENV !== 'production' && !token) {
+    warnOnce(`Unknown token id at path: ${tokenId} for ${name}@${version}`);
+  }
+
+  if (typeof window === 'undefined') {
+    return tokenValue;
+  }
+
+  tokenValue = window.getComputedStyle(document.documentElement).getPropertyValue(token);
+  tokenValue = tokenValue || fallback;
+  return tokenValue;
+}
+
+export default getTokenValue;

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 = "0.13.0";
+const version = "0.13.1";
 
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 export { default as token } from './get-token';
+export { default as getTokenValue } from './get-token-value';
 export { default as setGlobalTheme } from './set-global-theme';
 export { default as themeConfig } from './theme-config';
 export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

package/dist/es2019/theme-change-observer.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useEffect, useState } from 'react';
-import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { THEME_DATA_ATTRIBUTE } from './constants';
 
-const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
+const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *

package/dist/es2019/version.json

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

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

@@ -0,0 +1,45 @@
+import warnOnce from '@atlaskit/ds-lib/warn-once';
+import tokens from './artifacts/token-names';
+var name = "@atlaskit/tokens";
+var version = "0.13.1";
+
+/**
+ * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
+ * resulting CSS Custom Property.
+ * This should be used for when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
+ *
+ * Note: these values change depending on the theme so consider pairing them with `useThemeObserver` in React, or the
+ * `ThemeMutationObserver` class elsewhere.
+ *
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver();
+ *
+ * useEffect(() => {
+ *  const lineColor = getTokenValue('color.background.accent.blue.subtle', B400);
+ * }, [theme]);
+ * ```
+ *
+ */
+function getTokenValue(tokenId) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var token = tokens[tokenId];
+  var tokenValue = fallback;
+
+  if (process.env.NODE_ENV !== 'production' && !token) {
+    warnOnce("Unknown token id at path: ".concat(tokenId, " for ").concat(name, "@").concat(version));
+  }
+
+  if (typeof window === 'undefined') {
+    return tokenValue;
+  }
+
+  tokenValue = window.getComputedStyle(document.documentElement).getPropertyValue(token);
+  tokenValue = tokenValue || fallback;
+  return tokenValue;
+}
+
+export default getTokenValue;

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 = "0.13.0";
+var version = "0.13.1";
 
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { default as token } from './get-token';
+export { default as getTokenValue } from './get-token-value';
 export { default as setGlobalTheme } from './set-global-theme';
 export { default as themeConfig } from './theme-config';
 export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

package/dist/esm/theme-change-observer.js

@@ -3,10 +3,10 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useEffect, useState } from 'react';
-import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { THEME_DATA_ATTRIBUTE } from './constants';
 
 var getGlobalTheme = function getGlobalTheme() {
-  return typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
 };
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.

package/dist/esm/version.json

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

package/dist/types/get-token-value.d.ts

@@ -0,0 +1,25 @@
+import tokens from './artifacts/token-names';
+declare type Tokens = typeof tokens;
+/**
+ * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
+ * resulting CSS Custom Property.
+ * This should be used for when the CSS cascade isn't available, eg. `<canvas>` elements, JS charting libraries, etc.
+ *
+ * Note: these values change depending on the theme so consider pairing them with `useThemeObserver` in React, or the
+ * `ThemeMutationObserver` class elsewhere.
+ *
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver();
+ *
+ * useEffect(() => {
+ *  const lineColor = getTokenValue('color.background.accent.blue.subtle', B400);
+ * }, [theme]);
+ * ```
+ *
+ */
+declare function getTokenValue<T extends keyof Tokens>(tokenId: T, fallback?: string): string;
+export default getTokenValue;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export { default as token } from './get-token';
+export { default as getTokenValue } from './get-token-value';
 export { default as setGlobalTheme } from './set-global-theme';
 export type { CSSToken } from './artifacts/token-names';
 export type { Themes, ThemeIds } from './theme-config';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -99,6 +99,7 @@
     "prettier": "^2.7.0",
     "react": "^16.8.0",
     "react-use-clipboard": "^1.0.0",
+    "recharts": "^1.8.5",
     "style-dictionary": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "4.5.5"

package/report.api.md

@@ -418,6 +418,12 @@ type CSSTokenMap = {
 // @public
 type ExtensionThemeId = ThemeIds;
 
+// @public
+export function getTokenValue<T extends keyof Tokens_2>(
+  tokenId: T,
+  fallback?: string,
+): string;
+
 // @public
 type Palettes =
   | 'defaultPalette'
@@ -899,6 +905,9 @@ const tokens: {
   readonly 'font.lineHeight.600': '--ds-font-lineHeight-600';
 };
 
+// @public (undocumented)
+type Tokens_2 = typeof tokens;
+
 // @public
 export const useThemeObserver: () => ThemeIds | null;
 

package/tmp/api-report-tmp.d.ts

@@ -407,6 +407,9 @@ type CSSTokenMap = {
 // @public
 type ExtensionThemeId = ThemeIds;
 
+// @public
+export function getTokenValue<T extends keyof Tokens_2>(tokenId: T, fallback?: string): string;
+
 // @public
 type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale' | 'typographyPalette';
 
@@ -862,6 +865,9 @@ const tokens: {
     readonly 'font.lineHeight.600': "--ds-font-lineHeight-600";
 };
 
+// @public (undocumented)
+type Tokens_2 = typeof tokens;
+
 // @public
 export const useThemeObserver: () => ThemeIds | null;