@atlaskit/tokens 13.0.4 → 13.1.1

package/dist/types-ts4.5/utils/rgb-to-lab.d.ts

@@ -0,0 +1,5 @@
+export declare function rgbToLab(rgb: number[]): [
+    number,
+    number,
+    number
+];

package/figma/atlassian-dark-increased-contrast.json

@@ -1874,7 +1874,7 @@
       }
     },
     "Dark increased-contrast/color.background.disabled": {
-      "value": "#BDBDBD0A",
+      "value": "#E3E4F21F",
       "attributes": {
         "group": "paint",
         "state": "active",

package/figma/atlassian-dark.json

@@ -1880,7 +1880,7 @@
         "introduced": "0.0.15",
         "description": "Use for backgrounds of elements in a disabled state."
       },
-      "value": "#BDBDBD0A"
+      "value": "#E3E4F21F"
     },
     "Dark/color.background.input": {
       "attributes": {

package/figma/atlassian-light-increased-contrast.json

@@ -1874,7 +1874,7 @@
       }
     },
     "Light increased-contrast/color.background.disabled": {
-      "value": "#17171708",
+      "value": "#0515240F",
       "attributes": {
         "group": "paint",
         "state": "active",

package/figma/atlassian-light.json

@@ -1880,7 +1880,7 @@
         "introduced": "0.0.15",
         "description": "Use for backgrounds of elements in a disabled state."
       },
-      "value": "#17171708"
+      "value": "#0515240F"
     },
     "Light/color.background.input": {
       "attributes": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "13.0.4",
+	"version": "13.1.1",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,31 +50,31 @@
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.14.0",
+		"@atlaskit/avatar": "^25.15.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/dropdown-menu": "^16.10.0",
 		"@atlaskit/dynamic-table": "^18.4.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.4.0",
+		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/inline-message": "^15.6.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.8.0",
-		"@atlaskit/popup": "^4.17.0",
+		"@atlaskit/popup": "^4.23.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/radio": "^8.6.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/tag": "^14.13.0",
+		"@atlaskit/section-message": "^8.13.0",
+		"@atlaskit/select": "^21.12.0",
+		"@atlaskit/tag": "^14.14.0",
 		"@atlaskit/textarea": "^8.3.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/theme": "^23.2.0",
-		"@atlaskit/tooltip": "^22.0.0",
+		"@atlaskit/theme": "^25.0.0",
+		"@atlaskit/tooltip": "^22.5.0",
 		"@atlassian/codegen": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
@@ -86,13 +86,13 @@
 		"@testing-library/react": "^16.3.0",
 		"color-blend": "^4.0.0",
 		"echarts": "^5.4.1",
-		"echarts-for-react": "^3.0.2",
+		"echarts-for-react": "3.0.6",
 		"jscodeshift": "^17.0.0",
 		"json5": "^2.2.2",
 		"lodash": "^4.17.21",
 		"postcss": "^8.4.7",
 		"postcss-less": "^6.0.0",
-		"react": "^18.2.0",
+		"react": "^19.0.0",
 		"react-window": "^1.8.8",
 		"style-dictionary": "^3.8.0"
 	},

package/tokens.docs.tsx

@@ -1,53 +1,55 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'token',
-		description:
-			'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'token',
-			package: '@atlaskit/tokens',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
-			'Use the `token()` function with CSS-in-JS',
-			'Use semantic token names for better maintainability',
-		],
-		accessibilityGuidelines: [
-			'Use color tokens to ensure proper contrast ratios',
-			'Test color combinations for accessibility compliance',
-			'Use semantic color names (success, warning, danger) for better meaning',
-		],
-		examples: [
-			{
-				name: 'Basic',
-				description: 'Basic example',
-				source: path.resolve(__dirname, './examples/ai/basic.tsx'),
+			description:
+				'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
+			status: 'general-availability',
+			import: {
+				name: 'token',
+				package: '@atlaskit/tokens',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: [
-			'token',
-			'design',
-			'system',
-			'color',
-			'motion',
-			'spacing',
-			'typography',
-			'radius',
-			'theme',
-			'css',
-			'style',
-			'variable',
-		],
-		categories: ['tokens'],
-	},
-];
+			usageGuidelines: [
+				'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
+				'Use the `token()` function with CSS-in-JS',
+				'Use semantic token names for better maintainability',
+			],
+			accessibilityGuidelines: [
+				'Use color tokens to ensure proper contrast ratios',
+				'Test color combinations for accessibility compliance',
+				'Use semantic color names (success, warning, danger) for better meaning',
+			],
+			examples: [
+				{
+					name: 'Basic',
+					description: 'Basic example',
+					source: path.resolve(__dirname, './examples/ai/basic.tsx'),
+				},
+			],
+			keywords: [
+				'token',
+				'design',
+				'system',
+				'color',
+				'motion',
+				'spacing',
+				'typography',
+				'radius',
+				'theme',
+				'css',
+				'style',
+				'variable',
+			],
+			categories: ['tokens'],
+		},
+	],
+};
 
 export default documentation;

package/dist/cjs/theme-state-transformer.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.themeStringToObject = exports.themeObjectToString = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _themeIds = require("./theme-ids");
-var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
-var customThemeOptions = 'UNSAFE_themeOptions';
-var isThemeKind = function isThemeKind(themeKind) {
-  return themeKinds.find(function (kind) {
-    return kind === themeKind;
-  }) !== undefined;
-};
-var isThemeIds = function isThemeIds(themeId) {
-  return _themeIds.themeIds.find(function (id) {
-    return id === themeId;
-  }) !== undefined;
-};
-var isColorMode = function isColorMode(modeId) {
-  return ['light', 'dark', 'auto'].includes(modeId);
-};
-/**
- * Converts a string that is formatted for the `data-theme` HTML attribute
- * to an object that can be passed to `setGlobalTheme`.
- *
- * @param {string} themes The themes that should be applied.
- *
- * @example
- * ```
- * themeStringToObject('dark:dark light:light spacing:spacing');
- * // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
- * ```
- */
-var themeStringToObject = exports.themeStringToObject = function themeStringToObject(themeState) {
-  return themeState.split(' ')
-  // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
-  .map(function (theme) {
-    return theme.split(/:([^]*)/);
-  }).reduce(function (themeObject, _ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-      kind = _ref2[0],
-      id = _ref2[1];
-    if (kind === 'colorMode' && isColorMode(id)) {
-      themeObject[kind] = id;
-    }
-    if (isThemeKind(kind) && isThemeIds(id)) {
-      // @ts-expect-error FIXME - this is a valid ts error
-      themeObject[kind] = id;
-    }
-    if (kind === customThemeOptions) {
-      try {
-        themeObject[customThemeOptions] = JSON.parse(id);
-      } catch (_unused) {
-        new Error('Invalid custom theme string');
-      }
-    }
-    return themeObject;
-  }, {});
-};
-
-/**
- * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
- *
- * @param {object} themes The themes that should be applied.
- *
- * @example
- * ```
- * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
- * // returns 'dark:dark light:light spacing:spacing'
- * ```
- */
-var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
-  return Object.entries(themeState).reduce(function (themeString, _ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      kind = _ref4[0],
-      id = _ref4[1];
-    if (
-    // colorMode theme state
-    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
-    // custom theme state
-    kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
-    // other theme states
-    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
-      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
-    }
-    return themeString;
-  }, '');
-};

package/dist/cjs/utils/color-utils.js

@@ -1,168 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "HSLToRGB", {
-  enumerable: true,
-  get: function get() {
-    return _hslToRgb.HSLToRGB;
-  }
-});
-exports.deltaE = deltaE;
-Object.defineProperty(exports, "getAlpha", {
-  enumerable: true,
-  get: function get() {
-    return _getAlpha.getAlpha;
-  }
-});
-exports.getContrastRatio = getContrastRatio;
-exports.hexToHSL = hexToHSL;
-exports.hexToRgb = hexToRgb;
-exports.hexToRgbA = hexToRgbA;
-Object.defineProperty(exports, "isValidBrandHex", {
-  enumerable: true,
-  get: function get() {
-    return _isValidBrandHex.isValidBrandHex;
-  }
-});
-Object.defineProperty(exports, "relativeLuminanceW3C", {
-  enumerable: true,
-  get: function get() {
-    return _relativeLuminanceW3C.relativeLuminanceW3C;
-  }
-});
-Object.defineProperty(exports, "rgbToHex", {
-  enumerable: true,
-  get: function get() {
-    return _rgbToHex.rgbToHex;
-  }
-});
-var _getAlpha = require("./get-alpha");
-var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
-var _isValidBrandHex = require("./is-valid-brand-hex");
-var _rgbToHex = require("./rgb-to-hex");
-var _hslToRgb = require("./hsl-to-rgb");
-// valid hex color with 4, 6 or 8 digits
-var isValidHex = function isValidHex(hex) {
-  return /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-};
-function hexToRgbA(hex) {
-  if (!isValidHex(hex)) {
-    throw new Error('Invalid HEX');
-  }
-  var c;
-  c = hex.substring(1).split('');
-  if (c.length === 3) {
-    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-  }
-  c = '0x' + c.join('');
-  return [c >> 16 & 255, c >> 8 & 255, c & 255, (0, _getAlpha.getAlpha)(hex)];
-}
-function hexToRgb(hex) {
-  if (!isValidHex(hex)) {
-    throw new Error('Invalid HEX');
-  }
-  var c;
-  c = hex.substring(1).split('');
-  if (c.length === 3) {
-    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-  }
-  c = '0x' + c.join('');
-  return [c >> 16 & 255, c >> 8 & 255, c & 255];
-}
-function hexToHSL(hex) {
-  if (!isValidHex(hex)) {
-    throw new Error('Invalid HEX');
-  }
-  var r = 0,
-    g = 0,
-    b = 0;
-  if (hex.length === 4) {
-    r = '0x' + hex[1] + hex[1];
-    g = '0x' + hex[2] + hex[2];
-    b = '0x' + hex[3] + hex[3];
-  } else if (hex.length === 7) {
-    r = '0x' + hex[1] + hex[2];
-    g = '0x' + hex[3] + hex[4];
-    b = '0x' + hex[5] + hex[6];
-  }
-  // Then to HSL
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  var cmin = Math.min(r, g, b),
-    cmax = Math.max(r, g, b),
-    delta = cmax - cmin,
-    h = 0,
-    s = 0,
-    l = 0;
-  if (delta === 0) {
-    h = 0;
-  } else if (cmax === r) {
-    h = (g - b) / delta % 6;
-  } else if (cmax === g) {
-    h = (b - r) / delta + 2;
-  } else {
-    h = (r - g) / delta + 4;
-  }
-  h = Math.round(h * 60);
-  if (h < 0) {
-    h += 360;
-  }
-  l = (cmax + cmin) / 2;
-  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-  s = +(s * 100).toFixed(1);
-  l = +(l * 100).toFixed(1);
-  return [h, s, l];
-}
-function getContrastRatio(foreground, background) {
-  if (!isValidHex(foreground) || !isValidHex(background)) {
-    throw new Error('Invalid HEX');
-  }
-  var foregroundRgb = hexToRgb(foreground);
-  var backgroundRgb = hexToRgb(background);
-  var foregroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
-  var backgroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
-  // calculate the color contrast ratio
-  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
-  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-function deltaE(rgbA, rgbB) {
-  var labA = rgbToLab(rgbA);
-  var labB = rgbToLab(rgbB);
-  var deltaL = labA[0] - labB[0];
-  var deltaA = labA[1] - labB[1];
-  var deltaB = labA[2] - labB[2];
-  var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
-  var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
-  var deltaC = c1 - c2;
-  var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
-  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
-  var sc = 1.0 + 0.045 * c1;
-  var sh = 1.0 + 0.015 * c1;
-  var deltaLKlsl = deltaL / 1.0;
-  var deltaCkcsc = deltaC / sc;
-  var deltaHkhsh = deltaH / sh;
-  var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
-  return i < 0 ? 0 : Math.sqrt(i);
-}
-function rgbToLab(rgb) {
-  var r = rgb[0] / 255,
-    g = rgb[1] / 255,
-    b = rgb[2] / 255,
-    x,
-    y,
-    z;
-  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
-  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
-  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
-  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
-  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
-  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
-  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
-  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
-  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
-  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
-}