@atlaskit/badge 18.6.0 → 18.7.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/badge
 
+## 18.7.1
+
+### Patch Changes
+
+- [`5dd8cc218e393`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5dd8cc218e393) -
+  Release packages affected by an issue blocking you from installing <@compiled>/react due to a yarn
+  patch.
+
+## 18.7.0
+
+### Minor Changes
+
+- [`bb9a7cf0620fa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb9a7cf0620fa) -
+  Added 5 new bold semantic Badge appearances behind the
+  `platform-dst-lozenge-tag-badge-visual-uplifts` feature gate: `successBold`, `dangerBold`,
+  `warningBold`, `informationBold`, and `discoveryBold`.
+
+  These bold appearances use the new `color.background.<semantic>.subtle` tokens (introduced in
+  `@atlaskit/tokens@13.2.0`) as the background and pair with `color.text.<semantic>.bolder` text for
+  stronger visual prominence than the existing subtle semantic appearances. The legacy
+  `appearanceMapping` and `appearanceMappingToOld` helpers route the new appearances correctly when
+  the feature gate is off.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.6.0
 
 ### Minor Changes

package/badge.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: 'Badge',
-		description:
-			'A badge is a visual indicator for numeric values such as tallies and scores, providing quick visual feedback.',
-		status: 'general-availability', // beta badge is feature-flagged
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'Badge',
-			package: '@atlaskit/badge',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for displaying counts, scores, or status indicators for a single item or label',
-			'Use with one item/label only to avoid ambiguity',
-			'Keep badge content concise and meaningful',
-			'Use appropriate appearance variants for different contexts',
-			'Position badges near relevant content',
-			'Consider maximum value display limits',
-			'Add a tooltip when the badge has an icon or needs extra context.',
-			'Use Lozenge for non-numeric status; use Tag for labels',
-		],
-		contentGuidelines: [
-			'Use clear, concise numeric or text values',
-			'Ensure values are meaningful to users',
-			'Use consistent formatting across similar badges',
-			'Consider localization for number formatting (locale-aware numbers)',
-		],
-		accessibilityGuidelines: [
-			'Ensure badge content is announced by screen readers',
-			'Do not rely on color alone for positive/negative meaning',
-			'Use appropriate color contrast for text readability',
-			'Provide meaningful context for numeric values',
-			'Consider alternative text for non-numeric badges',
-		],
-		examples: [
-			{
+			description:
+				'A badge is a visual indicator for numeric values such as tallies and scores, providing quick visual feedback.',
+			status: 'general-availability', // beta badge is feature-flagged
+			import: {
 				name: 'Badge',
-				description: 'Badge example',
-				source: path.resolve(__dirname, './examples/ai/badge.tsx'),
+				package: '@atlaskit/badge',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['badge', 'indicator', 'numeric', 'tally', 'score', 'count', 'status'],
-		categories: ['status-indicators'],
-	},
-];
+			usageGuidelines: [
+				'Use for displaying counts, scores, or status indicators for a single item or label',
+				'Use with one item/label only to avoid ambiguity',
+				'Keep badge content concise and meaningful',
+				'Use appropriate appearance variants for different contexts',
+				'Position badges near relevant content',
+				'Consider maximum value display limits',
+				'Add a tooltip when the badge has an icon or needs extra context.',
+				'Use Lozenge for non-numeric status; use Tag for labels',
+			],
+			contentGuidelines: [
+				'Use clear, concise numeric or text values',
+				'Ensure values are meaningful to users',
+				'Use consistent formatting across similar badges',
+				'Consider localization for number formatting (locale-aware numbers)',
+			],
+			accessibilityGuidelines: [
+				'Ensure badge content is announced by screen readers',
+				'Do not rely on color alone for positive/negative meaning',
+				'Use appropriate color contrast for text readability',
+				'Provide meaningful context for numeric values',
+				'Consider alternative text for non-numeric badges',
+			],
+			examples: [
+				{
+					name: 'Badge',
+					description: 'Badge example',
+					source: path.resolve(__dirname, './examples/ai/badge.tsx'),
+				},
+			],
+			keywords: ['badge', 'indicator', 'numeric', 'tally', 'score', 'count', 'status'],
+			categories: ['status-indicators'],
+		},
+	],
+};
 
 export default documentation;

package/dist/cjs/appearance-mapping-to-old.js

@@ -8,6 +8,7 @@ exports.appearanceMappingToOld = void 0;
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 var appearanceMappingToOld = exports.appearanceMappingToOld = {
   added: 'added',
   removed: 'removed',
@@ -21,5 +22,10 @@ var appearanceMappingToOld = exports.appearanceMappingToOld = {
   inverse: 'primaryInverted',
   neutral: 'default',
   warning: 'default',
-  discovery: 'default'
+  discovery: 'default',
+  informationBold: 'primary',
+  successBold: 'added',
+  dangerBold: 'removed',
+  warningBold: 'default',
+  discoveryBold: 'default'
 };

package/dist/cjs/appearance-mapping.js

@@ -22,5 +22,10 @@ var appearanceMapping = exports.appearanceMapping = {
   success: 'success',
   information: 'information',
   inverse: 'inverse',
-  neutral: 'neutral'
+  neutral: 'neutral',
+  informationBold: 'informationBold',
+  successBold: 'successBold',
+  dangerBold: 'dangerBold',
+  warningBold: 'warningBold',
+  discoveryBold: 'discoveryBold'
 };

package/dist/cjs/badge-new.compiled.css

@@ -8,10 +8,16 @@
 ._1ul91ejb{min-width:var(--ds-space-300,24px)}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
+._bfhk16ib{background-color:var(--ds-background-success-subtle,#b3df72)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
+._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
+._bfhk5ly7{background-color:var(--ds-background-discovery-subtle,#d8a0f7)}
 ._bfhk7qp0{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._bfhk8lbg{background-color:var(--ds-background-information-subtler,#cfe1fd)}
+._bfhk9pm7{background-color:var(--ds-background-information-subtle,#8fb8f6)}
 ._bfhke670{background-color:var(--ds-background-discovery-subtler,#eed7fc)}
+._bfhkgj02{background-color:var(--ds-background-warning-subtle,#fbd779)}
+._bfhkud63{background-color:var(--ds-background-danger-subtle,#fd9891)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
 ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}

package/dist/cjs/badge-new.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _tokens = require("@atlaskit/tokens");
 var _formatValue = require("./internal/format-value");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
@@ -23,7 +24,13 @@ var stylesNew = {
   information: "_syaz1qd9 _bfhk8lbg",
   discovery: "_syaz1g72 _bfhke670",
   neutral: "_syazi7uo _bfhk7qp0",
-  inverse: "_bfhkvuon _syazi7uo"
+  inverse: "_bfhkvuon _syazi7uo",
+  informationBold: "_syaz1qd9 _bfhk9pm7",
+  successBold: "_syaz1p1e _bfhk16ib",
+  dangerBold: "_syaz1blx _bfhkud63",
+  warningBold: "_syazmgs1 _bfhk1kmu",
+  warningBoldDark: "_syazmgs1 _bfhkgj02",
+  discoveryBold: "_syaz1g72 _bfhk5ly7"
 };
 /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 
@@ -45,6 +52,11 @@ var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumbe
  * - inverse (inverted colors)
  * - warning (orange/yellow)
  * - discovery (purple)
+ * - informationBold (bold blue, color.background.information.subtle)
+ * - successBold (bold green, color.background.success.subtle)
+ * - dangerBold (bold red, color.background.danger.subtle)
+ * - warningBold (bold warning, color.background.warning.bold)
+ * - discoveryBold (bold purple, color.background.discovery.subtle)
  */
 var BadgeNew = /*#__PURE__*/(0, _react.memo)(function BadgeNew(_ref) {
   var _ref$appearance = _ref.appearance,
@@ -55,13 +67,19 @@ var BadgeNew = /*#__PURE__*/(0, _react.memo)(function BadgeNew(_ref) {
     max = _ref$max === void 0 ? 99 : _ref$max,
     style = _ref.style,
     testId = _ref.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  // In dark theme, warningBold needs to swap to a lighter background
+  // (color.background.warning.subtle / Orange800) for better contrast against
+  // the typical dark surface colors.
+  var resolvedAppearance = appearance === 'warningBold' && colorMode === 'dark' ? 'warningBoldDark' : appearance;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
     style: {
       background: style === null || style === void 0 ? void 0 : style.backgroundColor,
       color: style === null || style === void 0 ? void 0 : style.color
     },
-    className: (0, _runtime.ax)([stylesNew.root, stylesNew[appearance]])
+    className: (0, _runtime.ax)([stylesNew.root, stylesNew[resolvedAppearance]])
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     size: "small",
     align: "center",

package/dist/es2019/appearance-mapping-to-old.js

@@ -2,6 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 export const appearanceMappingToOld = {
   added: 'added',
   removed: 'removed',
@@ -15,5 +16,10 @@ export const appearanceMappingToOld = {
   inverse: 'primaryInverted',
   neutral: 'default',
   warning: 'default',
-  discovery: 'default'
+  discovery: 'default',
+  informationBold: 'primary',
+  successBold: 'added',
+  dangerBold: 'removed',
+  warningBold: 'default',
+  discoveryBold: 'default'
 };

package/dist/es2019/appearance-mapping.js

@@ -16,5 +16,10 @@ export const appearanceMapping = {
   success: 'success',
   information: 'information',
   inverse: 'inverse',
-  neutral: 'neutral'
+  neutral: 'neutral',
+  informationBold: 'informationBold',
+  successBold: 'successBold',
+  dangerBold: 'dangerBold',
+  warningBold: 'warningBold',
+  discoveryBold: 'discoveryBold'
 };

package/dist/es2019/badge-new.compiled.css

@@ -8,10 +8,16 @@
 ._1ul91ejb{min-width:var(--ds-space-300,24px)}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
+._bfhk16ib{background-color:var(--ds-background-success-subtle,#b3df72)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
+._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
+._bfhk5ly7{background-color:var(--ds-background-discovery-subtle,#d8a0f7)}
 ._bfhk7qp0{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._bfhk8lbg{background-color:var(--ds-background-information-subtler,#cfe1fd)}
+._bfhk9pm7{background-color:var(--ds-background-information-subtle,#8fb8f6)}
 ._bfhke670{background-color:var(--ds-background-discovery-subtler,#eed7fc)}
+._bfhkgj02{background-color:var(--ds-background-warning-subtle,#fbd779)}
+._bfhkud63{background-color:var(--ds-background-danger-subtle,#fd9891)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
 ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}

package/dist/es2019/badge-new.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { Text } from '@atlaskit/primitives/compiled';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { formatValue } from './internal/format-value';
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 // Nested selectors with data attributes are required for theme switching
@@ -15,7 +16,13 @@ const stylesNew = {
   information: "_syaz1qd9 _bfhk8lbg",
   discovery: "_syaz1g72 _bfhke670",
   neutral: "_syazi7uo _bfhk7qp0",
-  inverse: "_bfhkvuon _syazi7uo"
+  inverse: "_bfhkvuon _syazi7uo",
+  informationBold: "_syaz1qd9 _bfhk9pm7",
+  successBold: "_syaz1p1e _bfhk16ib",
+  dangerBold: "_syaz1blx _bfhkud63",
+  warningBold: "_syazmgs1 _bfhk1kmu",
+  warningBoldDark: "_syazmgs1 _bfhkgj02",
+  discoveryBold: "_syaz1g72 _bfhk5ly7"
 };
 /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 
@@ -37,6 +44,11 @@ const badgeValueWithNegativeNumberSupported = (children, max) => {
  * - inverse (inverted colors)
  * - warning (orange/yellow)
  * - discovery (purple)
+ * - informationBold (bold blue, color.background.information.subtle)
+ * - successBold (bold green, color.background.success.subtle)
+ * - dangerBold (bold red, color.background.danger.subtle)
+ * - warningBold (bold warning, color.background.warning.bold)
+ * - discoveryBold (bold purple, color.background.discovery.subtle)
  */
 const BadgeNew = /*#__PURE__*/memo(function BadgeNew({
   appearance = 'neutral',
@@ -45,13 +57,20 @@ const BadgeNew = /*#__PURE__*/memo(function BadgeNew({
   style,
   testId
 }) {
+  const {
+    colorMode
+  } = useThemeObserver();
+  // In dark theme, warningBold needs to swap to a lighter background
+  // (color.background.warning.subtle / Orange800) for better contrast against
+  // the typical dark surface colors.
+  const resolvedAppearance = appearance === 'warningBold' && colorMode === 'dark' ? 'warningBoldDark' : appearance;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
     style: {
       background: style === null || style === void 0 ? void 0 : style.backgroundColor,
       color: style === null || style === void 0 ? void 0 : style.color
     },
-    className: ax([stylesNew.root, stylesNew[appearance]])
+    className: ax([stylesNew.root, stylesNew[resolvedAppearance]])
   }, /*#__PURE__*/React.createElement(Text, {
     size: "small",
     align: "center",

package/dist/esm/appearance-mapping-to-old.js

@@ -2,6 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 export var appearanceMappingToOld = {
   added: 'added',
   removed: 'removed',
@@ -15,5 +16,10 @@ export var appearanceMappingToOld = {
   inverse: 'primaryInverted',
   neutral: 'default',
   warning: 'default',
-  discovery: 'default'
+  discovery: 'default',
+  informationBold: 'primary',
+  successBold: 'added',
+  dangerBold: 'removed',
+  warningBold: 'default',
+  discoveryBold: 'default'
 };

package/dist/esm/appearance-mapping.js

@@ -16,5 +16,10 @@ export var appearanceMapping = {
   success: 'success',
   information: 'information',
   inverse: 'inverse',
-  neutral: 'neutral'
+  neutral: 'neutral',
+  informationBold: 'informationBold',
+  successBold: 'successBold',
+  dangerBold: 'dangerBold',
+  warningBold: 'warningBold',
+  discoveryBold: 'discoveryBold'
 };

package/dist/esm/badge-new.compiled.css

@@ -8,10 +8,16 @@
 ._1ul91ejb{min-width:var(--ds-space-300,24px)}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
+._bfhk16ib{background-color:var(--ds-background-success-subtle,#b3df72)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
+._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
+._bfhk5ly7{background-color:var(--ds-background-discovery-subtle,#d8a0f7)}
 ._bfhk7qp0{background-color:var(--ds-background-accent-gray-subtler,#dddee1)}
 ._bfhk8lbg{background-color:var(--ds-background-information-subtler,#cfe1fd)}
+._bfhk9pm7{background-color:var(--ds-background-information-subtle,#8fb8f6)}
 ._bfhke670{background-color:var(--ds-background-discovery-subtler,#eed7fc)}
+._bfhkgj02{background-color:var(--ds-background-warning-subtle,#fbd779)}
+._bfhkud63{background-color:var(--ds-background-danger-subtle,#fd9891)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
 ._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}

package/dist/esm/badge-new.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { Text } from '@atlaskit/primitives/compiled';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { formatValue } from './internal/format-value';
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 // Nested selectors with data attributes are required for theme switching
@@ -15,7 +16,13 @@ var stylesNew = {
   information: "_syaz1qd9 _bfhk8lbg",
   discovery: "_syaz1g72 _bfhke670",
   neutral: "_syazi7uo _bfhk7qp0",
-  inverse: "_bfhkvuon _syazi7uo"
+  inverse: "_bfhkvuon _syazi7uo",
+  informationBold: "_syaz1qd9 _bfhk9pm7",
+  successBold: "_syaz1p1e _bfhk16ib",
+  dangerBold: "_syaz1blx _bfhkud63",
+  warningBold: "_syazmgs1 _bfhk1kmu",
+  warningBoldDark: "_syazmgs1 _bfhkgj02",
+  discoveryBold: "_syaz1g72 _bfhk5ly7"
 };
 /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 
@@ -37,6 +44,11 @@ var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumbe
  * - inverse (inverted colors)
  * - warning (orange/yellow)
  * - discovery (purple)
+ * - informationBold (bold blue, color.background.information.subtle)
+ * - successBold (bold green, color.background.success.subtle)
+ * - dangerBold (bold red, color.background.danger.subtle)
+ * - warningBold (bold warning, color.background.warning.bold)
+ * - discoveryBold (bold purple, color.background.discovery.subtle)
  */
 var BadgeNew = /*#__PURE__*/memo(function BadgeNew(_ref) {
   var _ref$appearance = _ref.appearance,
@@ -47,13 +59,19 @@ var BadgeNew = /*#__PURE__*/memo(function BadgeNew(_ref) {
     max = _ref$max === void 0 ? 99 : _ref$max,
     style = _ref.style,
     testId = _ref.testId;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  // In dark theme, warningBold needs to swap to a lighter background
+  // (color.background.warning.subtle / Orange800) for better contrast against
+  // the typical dark surface colors.
+  var resolvedAppearance = appearance === 'warningBold' && colorMode === 'dark' ? 'warningBoldDark' : appearance;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
     style: {
       background: style === null || style === void 0 ? void 0 : style.backgroundColor,
       color: style === null || style === void 0 ? void 0 : style.color
     },
-    className: ax([stylesNew.root, stylesNew[appearance]])
+    className: ax([stylesNew.root, stylesNew[resolvedAppearance]])
   }, /*#__PURE__*/React.createElement(Text, {
     size: "small",
     align: "center",

package/dist/types/appearance-mapping-to-old.d.ts

@@ -2,4 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important'>;
+import type { NewAppearance } from './types';
+type OldAppearance = 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important';
+export declare const appearanceMappingToOld: Record<NewAppearance, OldAppearance> & {
+    added: OldAppearance;
+    removed: OldAppearance;
+    default: OldAppearance;
+    primary: OldAppearance;
+    primaryInverted: OldAppearance;
+    important: OldAppearance;
+};
+export {};

package/dist/types/appearance-mapping.d.ts

@@ -3,4 +3,11 @@
  * @jsx jsx
  */
 import type { NewAppearance } from './types';
-export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', NewAppearance>;
+export declare const appearanceMapping: Record<NewAppearance, NewAppearance> & {
+    added: NewAppearance;
+    removed: NewAppearance;
+    default: NewAppearance;
+    primary: NewAppearance;
+    primaryInverted: NewAppearance;
+    important: NewAppearance;
+};

package/dist/types/badge-new.d.ts

@@ -13,6 +13,11 @@ import type { BadgeNewProps } from './types';
  * - inverse (inverted colors)
  * - warning (orange/yellow)
  * - discovery (purple)
+ * - informationBold (bold blue, color.background.information.subtle)
+ * - successBold (bold green, color.background.success.subtle)
+ * - dangerBold (bold red, color.background.danger.subtle)
+ * - warningBold (bold warning, color.background.warning.bold)
+ * - discoveryBold (bold purple, color.background.discovery.subtle)
  */
 declare const BadgeNew: import('react').NamedExoticComponent<BadgeNewProps>;
 export default BadgeNew;

package/dist/types/types.d.ts

@@ -4,7 +4,7 @@ export interface BadgeProps {
     /**
      * Affects the visual style of the badge.
      */
-    appearance?: ThemeAppearance;
+    appearance?: ThemeAppearance | NewAppearance;
     /**
      * The value displayed within the badge. A `ReactNode` can be provided for
      * custom-formatted numbers, however, badge should only be used in cases where you want to represent
@@ -30,7 +30,7 @@ export interface BadgeProps {
 /**
  * New appearance types for visual refresh.
  */
-export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
+export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery' | 'informationBold' | 'successBold' | 'dangerBold' | 'warningBold' | 'discoveryBold';
 /**
  * Props for BadgeNew component with new appearance names.
  */

package/dist/types-ts4.5/appearance-mapping-to-old.d.ts

@@ -2,4 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important'>;
+import type { NewAppearance } from './types';
+type OldAppearance = 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important';
+export declare const appearanceMappingToOld: Record<NewAppearance, OldAppearance> & {
+    added: OldAppearance;
+    removed: OldAppearance;
+    default: OldAppearance;
+    primary: OldAppearance;
+    primaryInverted: OldAppearance;
+    important: OldAppearance;
+};
+export {};

package/dist/types-ts4.5/appearance-mapping.d.ts

@@ -3,4 +3,11 @@
  * @jsx jsx
  */
 import type { NewAppearance } from './types';
-export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', NewAppearance>;
+export declare const appearanceMapping: Record<NewAppearance, NewAppearance> & {
+    added: NewAppearance;
+    removed: NewAppearance;
+    default: NewAppearance;
+    primary: NewAppearance;
+    primaryInverted: NewAppearance;
+    important: NewAppearance;
+};

package/dist/types-ts4.5/badge-new.d.ts

@@ -13,6 +13,11 @@ import type { BadgeNewProps } from './types';
  * - inverse (inverted colors)
  * - warning (orange/yellow)
  * - discovery (purple)
+ * - informationBold (bold blue, color.background.information.subtle)
+ * - successBold (bold green, color.background.success.subtle)
+ * - dangerBold (bold red, color.background.danger.subtle)
+ * - warningBold (bold warning, color.background.warning.bold)
+ * - discoveryBold (bold purple, color.background.discovery.subtle)
  */
 declare const BadgeNew: import('react').NamedExoticComponent<BadgeNewProps>;
 export default BadgeNew;

package/dist/types-ts4.5/types.d.ts

@@ -4,7 +4,7 @@ export interface BadgeProps {
     /**
      * Affects the visual style of the badge.
      */
-    appearance?: ThemeAppearance;
+    appearance?: ThemeAppearance | NewAppearance;
     /**
      * The value displayed within the badge. A `ReactNode` can be provided for
      * custom-formatted numbers, however, badge should only be used in cases where you want to represent
@@ -30,7 +30,7 @@ export interface BadgeProps {
 /**
  * New appearance types for visual refresh.
  */
-export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
+export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery' | 'informationBold' | 'successBold' | 'dangerBold' | 'warningBold' | 'discoveryBold';
 /**
  * Props for BadgeNew component with new appearance names.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "18.6.0",
+	"version": "18.7.1",
 	"description": "A badge is a visual indicator for numeric values such as tallies and scores.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Badge",
-			"category": "Status indicators",
+			"category": "Labels",
 			"subPages": [
 				{
 					"title": "Badge",
@@ -51,7 +51,7 @@
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -64,13 +64,14 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/theme": "^23.1.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlaskit/section-message": "^8.13.0",
+		"@atlaskit/theme": "^25.0.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:*",
 		"@atlassian/structured-docs-types": "workspace:^",
-		"@atlassian/testing-library": "0.5.0",
+		"@atlassian/testing-library": "0.6.1",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {

package/offerings.json

@@ -1,36 +0,0 @@
-[
-	{
-		"name": "Badge",
-		"package": "@atlaskit/badge",
-		"import": {
-			"name": "Badge",
-			"package": "@atlaskit/badge",
-			"type": "default"
-		},
-		"keywords": ["badge", "indicator", "numeric", "tally", "score", "count", "status"],
-		"categories": ["status-indicators"],
-		"shortDescription": "A badge is a visual indicator for numeric values such as tallies and scores, providing quick visual feedback.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure badge content is announced by screen readers",
-			"Use appropriate color contrast for text readability",
-			"Provide meaningful context for numeric values",
-			"Consider alternative text for non-numeric badges"
-		],
-		"usageGuidelines": [
-			"Use for displaying counts, scores, or status indicators",
-			"Keep badge content concise and meaningful",
-			"Use appropriate appearance variants for different contexts",
-			"Position badges near relevant content",
-			"Consider maximum value display limits"
-		],
-		"contentGuidelines": [
-			"Use clear, concise numeric or text values",
-			"Ensure values are meaningful to users",
-			"Consider localization for number formatting",
-			"Use consistent formatting across similar badges"
-		],
-		"generativeInstructions": "./docs/ai/badge-instructions.md",
-		"examples": ["./examples/ai/badge.tsx"]
-	}
-]