@atlaskit/tokens 0.9.1 → 0.9.4

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

@@ -0,0 +1,104 @@
+import { token } from '../index';
+export var hexToRGBAValues = function hexToRGBAValues(hex) {
+  var hexColor = hex.replace('#', '');
+  return {
+    r: parseInt(hexColor.slice(0, 2), 16),
+    g: parseInt(hexColor.slice(2, 4), 16),
+    b: parseInt(hexColor.slice(4, 6), 16),
+    a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
+  };
+};
+export var hexToRGBA = function hexToRGBA(hex) {
+  var _hexToRGBAValues = hexToRGBAValues(hex),
+      r = _hexToRGBAValues.r,
+      g = _hexToRGBAValues.g,
+      b = _hexToRGBAValues.b,
+      a = _hexToRGBAValues.a;
+
+  return "rgb".concat(a ? 'a' : '', "(").concat(r, ",").concat(g, ",").concat(b).concat(a ? ",".concat(a) : '', ")");
+};
+export var getLuminance = function getLuminance(_ref) {
+  var r = _ref.r,
+      g = _ref.g,
+      b = _ref.b;
+  return (r * 299 + g * 587 + b * 114) / 1000;
+};
+/**
+ * Returns an accessible hard-coded text color based on the color contrast with
+ * the background.
+ *
+ * @param hex - The Hex color code of the background
+ * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
+ * 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 var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
+  var _hexToRGBAValues2 = hexToRGBAValues(hex),
+      r = _hexToRGBAValues2.r,
+      g = _hexToRGBAValues2.g,
+      b = _hexToRGBAValues2.b,
+      a = _hexToRGBAValues2.a;
+
+  var lum = getLuminance({
+    r: r,
+    g: g,
+    b: b
+  });
+  var alphaLimit = 0.42;
+  var alphaConditionsPerSurface = {
+    light: a < alphaLimit,
+    dark: a > alphaLimit
+  };
+  var 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 var getBorderForBackground = function getBorderForBackground(hex) {
+  var _hexToRGBAValues3 = hexToRGBAValues(hex),
+      r = _hexToRGBAValues3.r,
+      g = _hexToRGBAValues3.g,
+      b = _hexToRGBAValues3.b,
+      a = _hexToRGBAValues3.a;
+
+  var lum = getLuminance({
+    r: r,
+    g: g,
+    b: b
+  });
+  return lum > 240 || a < 0.2 ? "1px solid ".concat(token('color.border', '#091E4224')) : undefined;
+};
+/**
+ * Returns a box shadow formatted for CSS from a ShadowToken raw value.
+ *
+ * @param rawShadow - ShadowToken raw value
+ */
+
+export var getBoxShadow = function getBoxShadow(rawShadow) {
+  return rawShadow.map(function (_ref2) {
+    var radius = _ref2.radius,
+        offset = _ref2.offset,
+        color = _ref2.color,
+        opacity = _ref2.opacity;
+
+    var _hexToRGBAValues4 = hexToRGBAValues(color),
+        r = _hexToRGBAValues4.r,
+        g = _hexToRGBAValues4.g,
+        b = _hexToRGBAValues4.b;
+
+    return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  }).join(',');
+};

package/dist/esm/{token-ids.js → utils/token-ids.js}

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { CSS_PREFIX } from './constants';
+import { CSS_PREFIX } from '../constants';
 /**
  * Transforms a style dictionary token path to a CSS custom property.
  *

package/dist/esm/version.json

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

package/dist/types/artifacts/palettes-raw.d.ts

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::abcdccc44ca6140b822aacad9e9070cc>>
+ * @codegenCommand yarn build tokens
+ */
+declare const tokens: {
+    value: string;
+    attributes: {
+        group: string;
+        category: string;
+    };
+    filePath: string;
+    isSource: boolean;
+    original: {
+        value: string;
+        attributes: {
+            group: string;
+            category: string;
+        };
+    };
+    name: string;
+    path: string[];
+}[];
+export default tokens;

package/dist/types/artifacts/rename-mapping.d.ts

@@ -1,14 +1,19 @@
 /**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
  * This file is intended to help automate renaming of tokens.
  *
  * 1. Mark the old token's 'state' as deprecated
  * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
  * 3. Create a new token matching the token above: 'my.new.token'
  * 4. Run 'yarn build tokens' to have you changes reflected in this map
- * 5. eslint and other tools will now use this to automate replacing tokens
+ * 5. ESLint and other tools will now use this to automate replacing tokens
+ *
+ * These changes will then be picked up by our tooling which will attempt to
+ * migrate as many of these renames as possible.
  *
- * These changes will then be picked up by our tooling, which will attempt to
- * migrate as many of these renames as possible
+ * @codegen <<SignedSource::dd934162c3393bce214d694d47bbcf2a>>
+ * @codegenCommand yarn build tokens
  */
 import tokens from './token-names';
 declare type Token = keyof typeof tokens | string;

package/dist/types/artifacts/token-default-values.d.ts

@@ -1,5 +1,10 @@
 /**
- * A map of token names to their value in the default Atlassian theme ('light')
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their value in the default Atlassian theme ('light')
+ *
+ * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
     readonly 'color.text.accent.blue': "#0055CC";
@@ -235,8 +240,8 @@ declare const defaultTokenValues: {
     readonly 'color.background.transparentNeutral.hover': "#091E420F";
     readonly 'color.background.transparentNeutral.pressed': "#091E4224";
     readonly 'color.blanket': "#091E427A";
-    readonly 'color.blanket.selected': "#388BFFCC";
-    readonly 'color.blanket.danger': "#EF5C48CC";
+    readonly 'color.blanket.selected': "#388BFF14";
+    readonly 'color.blanket.danger': "#EF5C4814";
     readonly 'color.interaction.hovered': "#ffffff33";
     readonly 'color.interaction.pressed': "#ffffff5c";
     readonly 'color.interaction.inverse.hovered': "#00000029";

package/dist/types/artifacts/token-names.d.ts

@@ -1,3 +1,8 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegenCommand yarn build tokens
+ */
 declare const tokens: {
     readonly 'color.text.accent.blue': "--ds-text-accent-blue";
     readonly 'color.text.accent.blue.bolder': "--ds-text-accent-blue-bolder";

package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts

@@ -1,9 +1,16 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::9d619d23cbcf93e5c937313843744a22>>
+ * @codegenCommand yarn build tokens
+ */
 declare const tokens: ({
     attributes: {
         group: string;
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: string;
@@ -15,6 +22,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: string;
@@ -26,6 +35,8 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -37,6 +48,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -49,6 +62,35 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        replacement: string;
+        description: string;
+        deleted?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            deprecated: string;
+            replacement: string;
+            description: string;
+            deleted?: undefined;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -80,6 +122,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -113,6 +157,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: ({
@@ -144,6 +190,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: ({

package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts

@@ -1,9 +1,16 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::0e47f76666554d1a967ff51c4cae1c25>>
+ * @codegenCommand yarn build tokens
+ */
 declare const tokens: ({
     attributes: {
         group: string;
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: string;
@@ -15,6 +22,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: string;
@@ -26,6 +35,8 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -37,6 +48,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -49,6 +62,35 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        replacement: string;
+        description: string;
+        deleted?: undefined;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            deprecated: string;
+            replacement: string;
+            description: string;
+            deleted?: undefined;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -68,6 +110,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -89,6 +133,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: {
@@ -108,6 +154,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: {

package/dist/types/artifacts/types-internal.d.ts

@@ -1,4 +1,6 @@
 /**
- * Internally types used for handling token ids
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b41790657bd6ccb424e840279549eee6>>
+ * @codegenCommand yarn build tokens
  */
 export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

package/dist/types/artifacts/types.d.ts

@@ -1,4 +1,6 @@
 /**
- * Type representing the currently active tokens
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::cbc11cad85705333139fd9d6eda82f31>>
+ * @codegenCommand yarn build tokens
  */
 export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

package/dist/types/entry-points/palettes-raw.d.ts

@@ -0,0 +1 @@
+export { default } from '../artifacts/palettes-raw';

package/dist/types/entry-points/token-ids.d.ts

@@ -1 +1 @@
-export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId, } from '../token-ids';
+export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId, } from '../utils/token-ids';

package/dist/types/types.d.ts

@@ -1,9 +1,11 @@
 import { InternalTokenIds } from './artifacts/types-internal';
 export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
-export declare type ActiveTokenStates = 'active';
-export declare type ReplacedTokenStates = 'deprecated' | 'deleted';
-export declare type TokenState = ActiveTokenStates | ReplacedTokenStates;
+export declare type ActiveTokenState = 'active';
+export declare type DeprecatedTokenState = 'deprecated';
+export declare type DeletedTokenState = 'deleted';
+export declare type TokenState = ActiveTokenState | DeprecatedTokenState | DeletedTokenState;
 export declare type Replacement = InternalTokenIds | InternalTokenIds[];
+export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light neutral' | 'dark neutral';
 export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {
@@ -28,16 +30,24 @@ export interface BaseToken<TValue, Group extends Groups> extends Token<TValue, G
  */
 export interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group> {
     attributes: {
+        state: ActiveTokenState;
         group: Group;
         description: string;
-        state: ActiveTokenStates;
         introduced: string;
-        replacement?: undefined;
     } | {
+        state: DeprecatedTokenState;
         group: Group;
         description: string;
-        state: ReplacedTokenStates;
         introduced: string;
+        deprecated: string;
+        replacement?: Replacement;
+    } | {
+        state: DeletedTokenState;
+        group: Group;
+        description: string;
+        introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement?: Replacement;
     };
 }
@@ -50,7 +60,12 @@ declare type DeepOmit<T extends any, K extends PropertyKey> = Omit<{
 }, K>;
 export declare type ValueSchema<Schema extends object> = DeepOmit<Schema, 'attributes'>;
 export declare type AttributeSchema<Schema extends object> = DeepOmit<Schema, 'value'>;
-export declare type PaletteToken = BaseToken<string, 'palette'>;
+export interface PaletteToken extends BaseToken<string, 'palette'> {
+    attributes: {
+        group: 'palette';
+        category: PaletteCategory;
+    };
+}
 export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
 export declare type PaintToken<Value extends string = ColorPalette> = DesignToken<Value, 'paint'>;
 export declare type ShadowToken<Value extends string = ColorPalette> = DesignToken<Array<{

package/dist/types/utils/color-detection.d.ts

@@ -0,0 +1,38 @@
+import { ShadowToken } from '../types';
+export declare const hexToRGBAValues: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare const hexToRGBA: (hex: string) => string;
+export declare const getLuminance: ({ r, g, b, }: {
+    r: number;
+    b: number;
+    g: number;
+}) => number;
+/**
+ * Returns an accessible hard-coded text color based on the color contrast with
+ * the background.
+ *
+ * @param hex - The Hex color code of the background
+ * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
+ * 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 declare const getTextColorForBackground: (hex: string, opts?: {
+    hardcodedSurface?: "light" | "dark" | undefined;
+} | undefined) => string;
+/**
+ * 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 declare const getBorderForBackground: (hex: string) => string | undefined;
+/**
+ * Returns a box shadow formatted for CSS from a ShadowToken raw value.
+ *
+ * @param rawShadow - ShadowToken raw value
+ */
+export declare const getBoxShadow: (rawShadow: ShadowToken['value']) => string;

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "author": "Atlassian Pty Ltd",
-  "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
+  "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled"
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Design tokens",
+      "category": "Libraries",
+      "draft": true
+    }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
   "main": "dist/cjs/index.js",
@@ -22,6 +27,7 @@
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx",
+    "./palettes-raw": "./src/entry-points/palettes-raw.tsx",
     "./token-ids": "./src/entry-points/token-ids.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
     "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
@@ -29,8 +35,8 @@
     "./css": "./css"
   },
   "scripts": {
-    "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git && yarn build-chrome-extension",
-    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are is out of date, run yarn build tokens' && false)",
+    "ak-postbuild": "cd ../../../ && yarn build @af/codegen && cd packages/design-system/tokens && yarn codegen-tokens && yarn check-clean-git",
+    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are out of date, run yarn build tokens' && false)",
     "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build",
     "build-chrome-extension": "yarn --cwd tokens-browser-extension build-chrome-extension"
   },
@@ -41,8 +47,13 @@
     "@babel/types": "^7.15.0"
   },
   "devDependencies": {
+    "@af/codegen": "*",
+    "@atlaskit/badge": "^15.0.11",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
+    "@atlaskit/docs": "^9.0.10",
+    "@atlaskit/dropdown-menu": "^11.1.3",
+    "@atlaskit/empty-state": "^7.3.9",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/heading": "^0.1.8",
     "@atlaskit/icon": "^21.10.2",
@@ -53,6 +64,7 @@
     "@atlaskit/textfield": "^5.1.5",
     "@atlaskit/theme": "^12.1.2",
     "@atlaskit/toggle": "^12.4.2",
+    "@atlaskit/tooltip": "^17.5.7",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
     "@emotion/core": "^10.0.9",
@@ -77,5 +89,6 @@
       "styling": "emotion"
     }
   },
+  "homepage": "https://atlassian.design/components/tokens",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/palettes-raw/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/tokens/palettes-raw",
+  "main": "../dist/cjs/entry-points/palettes-raw.js",
+  "module": "../dist/esm/entry-points/palettes-raw.js",
+  "module:es2019": "../dist/es2019/entry-points/palettes-raw.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "../dist/types/entry-points/palettes-raw.d.ts"
+}

package/rename-mapping/package.json

@@ -3,5 +3,8 @@
   "main": "../dist/cjs/entry-points/rename-mapping.js",
   "module": "../dist/esm/entry-points/rename-mapping.js",
   "module:es2019": "../dist/es2019/entry-points/rename-mapping.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "types": "../dist/types/entry-points/rename-mapping.d.ts"
 }