@atlaskit/tokens 0.9.0 → 0.9.3

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.0",
+	"version": "0.9.3",
 	"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/token-default-values.d.ts

@@ -235,8 +235,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/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/tokens/atlassian-dark/utility/utility.d.ts

@@ -1,13 +1,5 @@
+import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: Pick<{
-        UNSAFE_util: {
-            transparent: {
-                value: string;
-            };
-            MISSING_TOKEN: {
-                value: string;
-            };
-        };
-    }, "UNSAFE_util">;
+    utility: ValueSchema<UtilTokenSchema>;
 };
 export default _default;

package/dist/types/tokens/atlassian-light/utility/utility.d.ts

@@ -1,13 +1,5 @@
+import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: Pick<{
-        UNSAFE_util: {
-            transparent: {
-                value: string;
-            };
-            MISSING_TOKEN: {
-                value: string;
-            };
-        };
-    }, "UNSAFE_util">;
+    utility: ValueSchema<UtilTokenSchema>;
 };
 export default _default;