@atlaskit/tokens 0.9.1 → 0.9.2

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.2",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -0,0 +1,19 @@
+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/tokens-raw/atlassian-dark.d.ts

@@ -4,6 +4,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: string;
@@ -15,6 +17,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: string;
@@ -26,6 +30,8 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -37,6 +43,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -49,6 +57,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 +117,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -113,6 +152,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: ({
@@ -144,6 +185,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

@@ -4,6 +4,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: string;
@@ -15,6 +17,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: string;
@@ -26,6 +30,8 @@ declare const tokens: ({
         group: string;
         state: string;
         introduced: string;
+        deprecated: string;
+        deleted: string;
         replacement: string;
         description: string;
     };
@@ -37,6 +43,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -49,6 +57,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 +105,8 @@ declare const tokens: ({
             group: string;
             state: string;
             introduced: string;
+            deprecated: string;
+            deleted: string;
             replacement: string;
             description: string;
         };
@@ -89,6 +128,8 @@ declare const tokens: ({
         state: string;
         introduced: string;
         description: string;
+        deprecated?: undefined;
+        deleted?: undefined;
         replacement?: undefined;
     };
     value: {
@@ -108,6 +149,8 @@ declare const tokens: ({
             state: string;
             introduced: string;
             description: string;
+            deprecated?: undefined;
+            deleted?: undefined;
             replacement?: undefined;
         };
         value: {

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,18 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "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"
+    }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
   "main": "dist/cjs/index.js",
@@ -22,6 +25,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",
@@ -41,8 +45,12 @@
     "@babel/types": "^7.15.0"
   },
   "devDependencies": {
+    "@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 +61,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 +86,6 @@
       "styling": "emotion"
     }
   },
+  "homepage": "https://atlassian.design/",
   "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"
 }

package/token-ids/package.json

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

package/token-names/package.json

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