@atlaskit/badge 15.0.21 → 15.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/badge.js +39 -24
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/badge.js +34 -20
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/badge.js +34 -21
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/types.d.ts +1 -2
  9. package/package.json +6 -14
  10. package/report.api.md +23 -38
  11. package/dist/cjs/internal/theme.js +0 -63
  12. package/dist/es2019/internal/theme.js +0 -53
  13. package/dist/esm/internal/theme.js +0 -53
  14. package/dist/types/internal/theme.d.ts +0 -52
  15. package/dist/types-ts4.0/badge.d.ts +0 -13
  16. package/dist/types-ts4.0/entry-points/badge.d.ts +0 -2
  17. package/dist/types-ts4.0/entry-points/types.d.ts +0 -1
  18. package/dist/types-ts4.0/index.d.ts +0 -2
  19. package/dist/types-ts4.0/internal/theme.d.ts +0 -52
  20. package/dist/types-ts4.0/internal/utils.d.ts +0 -1
  21. package/dist/types-ts4.0/types.d.ts +0 -30
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/badge
2
2
 
3
+ ## 15.0.23
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a7f643a0ee7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7f643a0ee7) - Updated badge line-height to use design system values, removed block padding. There are no visual or behaviour changes.
8
+ - [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
9
+ - Updated dependencies
10
+
11
+ ## 15.0.22
12
+
13
+ ### Patch Changes
14
+
15
+ - [`936d6bccf4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936d6bccf4f) - Update to emotion v11. No expected behaviour change.
16
+ - [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
17
+ - Updated dependencies
18
+
3
19
  ## 15.0.21
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/badge.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  var _typeof = require("@babel/runtime/helpers/typeof");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
@@ -9,11 +11,9 @@ exports.default = void 0;
9
11
 
10
12
  var _react = _interopRequireWildcard(require("react"));
11
13
 
12
- var _dsExplorations = require("@atlaskit/ds-explorations");
13
-
14
- var _components = require("@atlaskit/theme/components");
14
+ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
15
15
 
16
- var _theme = require("./internal/theme");
16
+ var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
17
17
 
18
18
  var _utils = require("./internal/utils");
19
19
 
@@ -21,6 +21,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
21
21
 
22
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
23
 
24
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
25
+
26
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
27
+
24
28
  /**
25
29
  * __Badge__
26
30
  *
@@ -31,8 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
31
35
  * - [Usage](https://atlassian.design/components/badge/usage)
32
36
  */
33
37
  var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
34
- var _style$backgroundColo, _style$color;
35
-
36
38
  var _ref$appearance = _ref.appearance,
37
39
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
38
40
  _ref$children = _ref.children,
@@ -41,29 +43,42 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
41
43
  max = _ref$max === void 0 ? 99 : _ref$max,
42
44
  style = _ref.style,
43
45
  testId = _ref.testId;
44
-
45
- var _useGlobalTheme = (0, _components.useGlobalTheme)(),
46
- mode = _useGlobalTheme.mode;
47
-
48
- var backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : _theme.backgroundColors[appearance][mode];
49
- var textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : _theme.textColors[appearance][mode];
50
- return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
46
+ return /*#__PURE__*/_react.default.createElement(_box.default, {
51
47
  testId: testId,
52
48
  as: "span",
49
+ backgroundColor: backgroundColors[appearance],
53
50
  borderRadius: "badge",
54
51
  display: "inlineFlex",
55
- paddingInline: "sp-75",
56
- paddingBlock: "sp-25",
57
- UNSAFE_style: {
58
- backgroundColor: backgroundColor,
59
- color: textColor
60
- }
61
- }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, {
62
- fontSize: "12px",
63
- lineHeight: "12px",
64
- textAlign: "center"
52
+ paddingInline: "space.075",
53
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
54
+ backgroundColor: style.backgroundColor
55
+ } : undefined
56
+ }, /*#__PURE__*/_react.default.createElement(_text.default, {
57
+ fontSize: "size.075",
58
+ lineHeight: "lineHeight.100",
59
+ textAlign: "center",
60
+ color: textColors[appearance],
61
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
62
+ color: style.color
63
+ } : undefined
65
64
  }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
66
65
  });
67
66
  Badge.displayName = 'Badge';
68
67
  var _default = Badge;
69
- exports.default = _default;
68
+ exports.default = _default;
69
+ var backgroundColors = {
70
+ added: 'success',
71
+ default: 'neutral',
72
+ important: 'danger.bold',
73
+ primary: 'brand.bold',
74
+ primaryInverted: 'elevation.surface',
75
+ removed: 'danger'
76
+ };
77
+ var textColors = {
78
+ added: 'success',
79
+ default: 'color.text',
80
+ important: 'inverse',
81
+ primary: 'inverse',
82
+ primaryInverted: 'brand',
83
+ removed: 'danger'
84
+ };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "15.0.21",
3
+ "version": "15.0.23",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/badge.js CHANGED
@@ -1,7 +1,9 @@
1
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
2
+
3
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
4
  import React, { memo } from 'react';
2
- import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
3
- import { useGlobalTheme } from '@atlaskit/theme/components';
4
- import { backgroundColors, textColors } from './internal/theme';
5
+ import Box from '@atlaskit/ds-explorations/box';
6
+ import Text from '@atlaskit/ds-explorations/text';
5
7
  import { formatValue } from './internal/utils';
6
8
 
7
9
  /**
@@ -20,29 +22,41 @@ const Badge = /*#__PURE__*/memo(function Badge({
20
22
  style,
21
23
  testId
22
24
  }) {
23
- var _style$backgroundColo, _style$color;
24
-
25
- const {
26
- mode
27
- } = useGlobalTheme();
28
- const backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : backgroundColors[appearance][mode];
29
- const textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColors[appearance][mode];
30
25
  return /*#__PURE__*/React.createElement(Box, {
31
26
  testId: testId,
32
27
  as: "span",
28
+ backgroundColor: backgroundColors[appearance],
33
29
  borderRadius: "badge",
34
30
  display: "inlineFlex",
35
- paddingInline: "sp-75",
36
- paddingBlock: "sp-25",
37
- UNSAFE_style: {
38
- backgroundColor,
39
- color: textColor
40
- }
31
+ paddingInline: "space.075",
32
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
33
+ backgroundColor: style.backgroundColor
34
+ } : undefined
41
35
  }, /*#__PURE__*/React.createElement(Text, {
42
- fontSize: "12px",
43
- lineHeight: "12px",
44
- textAlign: "center"
36
+ fontSize: "size.075",
37
+ lineHeight: "lineHeight.100",
38
+ textAlign: "center",
39
+ color: textColors[appearance],
40
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
41
+ color: style.color
42
+ } : undefined
45
43
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
46
44
  });
47
45
  Badge.displayName = 'Badge';
48
- export default Badge;
46
+ export default Badge;
47
+ const backgroundColors = {
48
+ added: 'success',
49
+ default: 'neutral',
50
+ important: 'danger.bold',
51
+ primary: 'brand.bold',
52
+ primaryInverted: 'elevation.surface',
53
+ removed: 'danger'
54
+ };
55
+ const textColors = {
56
+ added: 'success',
57
+ default: 'color.text',
58
+ important: 'inverse',
59
+ primary: 'inverse',
60
+ primaryInverted: 'brand',
61
+ removed: 'danger'
62
+ };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "15.0.21",
3
+ "version": "15.0.23",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/badge.js CHANGED
@@ -1,7 +1,9 @@
1
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
2
+
3
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
4
  import React, { memo } from 'react';
2
- import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
3
- import { useGlobalTheme } from '@atlaskit/theme/components';
4
- import { backgroundColors, textColors } from './internal/theme';
5
+ import Box from '@atlaskit/ds-explorations/box';
6
+ import Text from '@atlaskit/ds-explorations/text';
5
7
  import { formatValue } from './internal/utils';
6
8
 
7
9
  /**
@@ -14,8 +16,6 @@ import { formatValue } from './internal/utils';
14
16
  * - [Usage](https://atlassian.design/components/badge/usage)
15
17
  */
16
18
  var Badge = /*#__PURE__*/memo(function Badge(_ref) {
17
- var _style$backgroundColo, _style$color;
18
-
19
19
  var _ref$appearance = _ref.appearance,
20
20
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
21
21
  _ref$children = _ref.children,
@@ -24,28 +24,41 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
24
24
  max = _ref$max === void 0 ? 99 : _ref$max,
25
25
  style = _ref.style,
26
26
  testId = _ref.testId;
27
-
28
- var _useGlobalTheme = useGlobalTheme(),
29
- mode = _useGlobalTheme.mode;
30
-
31
- var backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : backgroundColors[appearance][mode];
32
- var textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColors[appearance][mode];
33
27
  return /*#__PURE__*/React.createElement(Box, {
34
28
  testId: testId,
35
29
  as: "span",
30
+ backgroundColor: backgroundColors[appearance],
36
31
  borderRadius: "badge",
37
32
  display: "inlineFlex",
38
- paddingInline: "sp-75",
39
- paddingBlock: "sp-25",
40
- UNSAFE_style: {
41
- backgroundColor: backgroundColor,
42
- color: textColor
43
- }
33
+ paddingInline: "space.075",
34
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
35
+ backgroundColor: style.backgroundColor
36
+ } : undefined
44
37
  }, /*#__PURE__*/React.createElement(Text, {
45
- fontSize: "12px",
46
- lineHeight: "12px",
47
- textAlign: "center"
38
+ fontSize: "size.075",
39
+ lineHeight: "lineHeight.100",
40
+ textAlign: "center",
41
+ color: textColors[appearance],
42
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
43
+ color: style.color
44
+ } : undefined
48
45
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
49
46
  });
50
47
  Badge.displayName = 'Badge';
51
- export default Badge;
48
+ export default Badge;
49
+ var backgroundColors = {
50
+ added: 'success',
51
+ default: 'neutral',
52
+ important: 'danger.bold',
53
+ primary: 'brand.bold',
54
+ primaryInverted: 'elevation.surface',
55
+ removed: 'danger'
56
+ };
57
+ var textColors = {
58
+ added: 'success',
59
+ default: 'color.text',
60
+ important: 'inverse',
61
+ primary: 'inverse',
62
+ primaryInverted: 'brand',
63
+ removed: 'danger'
64
+ };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "15.0.21",
3
+ "version": "15.0.23",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- declare type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
2
+ export declare type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
3
3
  export interface BadgeProps {
4
4
  /**
5
5
  * Affects the visual style of the badge.
@@ -27,4 +27,3 @@ export interface BadgeProps {
27
27
  */
28
28
  testId?: string;
29
29
  }
30
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "15.0.21",
3
+ "version": "15.0.23",
4
4
  "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.0 <4.5": {
17
- "*": [
18
- "dist/types-ts4.0/*",
19
- "dist/types-ts4.0/index.d.ts"
20
- ]
21
- }
22
- },
23
15
  "sideEffects": false,
24
16
  "atlaskit:src": "src/index.tsx",
25
17
  "atlassian": {
@@ -37,24 +29,24 @@
37
29
  },
38
30
  "dependencies": {
39
31
  "@atlaskit/codemod-utils": "^4.1.0",
40
- "@atlaskit/ds-explorations": "^0.1.3",
41
- "@atlaskit/theme": "^12.2.0",
42
- "@atlaskit/tokens": "^0.10.0",
32
+ "@atlaskit/ds-explorations": "^2.0.0",
43
33
  "@babel/runtime": "^7.0.0"
44
34
  },
45
35
  "peerDependencies": {
46
36
  "react": "^16.8.0"
47
37
  },
48
38
  "devDependencies": {
49
- "@atlaskit/button": "^16.3.0",
39
+ "@atlaskit/button": "^16.5.0",
50
40
  "@atlaskit/docs": "*",
51
41
  "@atlaskit/ds-lib": "^2.1.1",
52
42
  "@atlaskit/section-message": "^6.3.0",
53
43
  "@atlaskit/ssr": "*",
44
+ "@atlaskit/theme": "*",
45
+ "@atlaskit/tokens": "*",
54
46
  "@atlaskit/visual-regression": "*",
55
47
  "@atlaskit/webdriver-runner": "*",
56
48
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
57
- "@emotion/core": "^10.0.9",
49
+ "@emotion/react": "^11.7.1",
58
50
  "@testing-library/react": "^12.1.5",
59
51
  "jscodeshift": "^0.13.0",
60
52
  "react-dom": "^16.8.0",
package/report.api.md CHANGED
@@ -1,55 +1,38 @@
1
- ## API Report File for "@atlaskit/badge".
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ ## API Report File for "@atlaskit/badge"
4
4
 
5
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
9
+
10
+ - [Main Entry Types](#main-entry-types)
11
+
12
+ ### Main Entry Types
13
+
14
+ <!--SECTION START: Main Entry Types-->
6
15
 
7
16
  ```ts
8
17
  import type { CSSProperties } from 'react';
9
18
  import { default as React_2 } from 'react';
10
19
  import type { ReactNode } from 'react';
11
20
 
12
- /**
13
- * __Badge__
14
- *
15
- * This component gives you the full badge functionality and automatically formats the number you provide in \`children\`.
16
- *
17
- * - [Examples](https://atlassian.design/components/badge/examples)
18
- * - [Code](https://atlassian.design/components/badge/code)
19
- * - [Usage](https://atlassian.design/components/badge/usage)
20
- */
21
- declare const Badge: React_2.NamedExoticComponent<BadgeProps>;
21
+ // @public
22
+ const Badge: React_2.NamedExoticComponent<BadgeProps>;
22
23
  export default Badge;
23
24
 
24
- export declare interface BadgeProps {
25
- /**
26
- * Affects the visual style of the badge.
27
- */
25
+ // @public (undocumented)
26
+ export interface BadgeProps {
28
27
  appearance?: ThemeAppearance;
29
- /**
30
- * The value displayed within the badge. A `ReactNode` can be provided for
31
- * custom-formatted numbers, however, badge should only be used in cases where you want to represent
32
- * a number.
33
- * Use a [lozenge](/packages/design-system/lozenge) for non-numeric information.
34
- */
35
- children?: number | ReactNode;
36
- /**
37
- * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
38
- * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
39
- * whether it is larger than the default maximum value.
40
- */
41
- max?: number | false;
42
- /**
43
- * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
44
- */
28
+ children?: ReactNode | number;
29
+ max?: false | number;
45
30
  style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
46
- /**
47
- * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
48
- */
49
31
  testId?: string;
50
32
  }
51
33
 
52
- declare type ThemeAppearance =
34
+ // @public (undocumented)
35
+ type ThemeAppearance =
53
36
  | 'added'
54
37
  | 'default'
55
38
  | 'important'
@@ -57,5 +40,7 @@ declare type ThemeAppearance =
57
40
  | 'primaryInverted'
58
41
  | 'removed';
59
42
 
60
- export {};
43
+ // (No @packageDocumentation comment for this package)
61
44
  ```
45
+
46
+ <!--SECTION END: Main Entry Types-->
package/dist/cjs/internal/theme.js DELETED
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.textColors = exports.backgroundColors = void 0;
7
-
8
- var _colors = require("@atlaskit/theme/colors");
9
-
10
- var backgroundColors = {
11
- added: {
12
- light: "var(--ds-background-success, ".concat(_colors.G50, ")"),
13
- dark: "var(--ds-background-success, ".concat(_colors.G50, ")")
14
- },
15
- default: {
16
- light: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
17
- dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
18
- },
19
- important: {
20
- light: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
21
- dark: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")")
22
- },
23
- primary: {
24
- light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
25
- dark: "var(--ds-background-brand-bold, ".concat(_colors.B100, ")")
26
- },
27
- primaryInverted: {
28
- light: "var(--ds-surface, ".concat(_colors.N0, ")"),
29
- dark: "var(--ds-surface, ".concat(_colors.DN400, ")")
30
- },
31
- removed: {
32
- light: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
33
- dark: "var(--ds-background-danger, ".concat(_colors.R50, ")")
34
- }
35
- };
36
- exports.backgroundColors = backgroundColors;
37
- var textColors = {
38
- added: {
39
- light: "var(--ds-text-success, ".concat(_colors.G500, ")"),
40
- dark: "var(--ds-text-success, ".concat(_colors.G500, ")")
41
- },
42
- default: {
43
- light: "var(--ds-text, ".concat(_colors.N800, ")"),
44
- dark: "var(--ds-text, ".concat(_colors.DN900, ")")
45
- },
46
- important: {
47
- light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
48
- dark: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
49
- },
50
- primary: {
51
- light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
52
- dark: "var(--ds-text-inverse, ".concat(_colors.DN0, ")")
53
- },
54
- primaryInverted: {
55
- light: "var(--ds-text-brand, ".concat(_colors.B500, ")"),
56
- dark: "var(--ds-text-brand, ".concat(_colors.DN0, ")")
57
- },
58
- removed: {
59
- light: "var(--ds-text-danger, ".concat(_colors.R500, ")"),
60
- dark: "var(--ds-text-danger, ".concat(_colors.R500, ")")
61
- }
62
- };
63
- exports.textColors = textColors;
package/dist/es2019/internal/theme.js DELETED
@@ -1,53 +0,0 @@
1
- import { B100, B400, B500, DN0, DN400, DN70, DN900, G50, G500, N0, N40, N800, R400, R50, R500 } from '@atlaskit/theme/colors';
2
- export const backgroundColors = {
3
- added: {
4
- light: `var(--ds-background-success, ${G50})`,
5
- dark: `var(--ds-background-success, ${G50})`
6
- },
7
- default: {
8
- light: `var(--ds-background-neutral, ${N40})`,
9
- dark: `var(--ds-background-neutral, ${DN70})`
10
- },
11
- important: {
12
- light: `var(--ds-background-danger-bold, ${R400})`,
13
- dark: `var(--ds-background-danger-bold, ${R400})`
14
- },
15
- primary: {
16
- light: `var(--ds-background-brand-bold, ${B400})`,
17
- dark: `var(--ds-background-brand-bold, ${B100})`
18
- },
19
- primaryInverted: {
20
- light: `var(--ds-surface, ${N0})`,
21
- dark: `var(--ds-surface, ${DN400})`
22
- },
23
- removed: {
24
- light: `var(--ds-background-danger, ${R50})`,
25
- dark: `var(--ds-background-danger, ${R50})`
26
- }
27
- };
28
- export const textColors = {
29
- added: {
30
- light: `var(--ds-text-success, ${G500})`,
31
- dark: `var(--ds-text-success, ${G500})`
32
- },
33
- default: {
34
- light: `var(--ds-text, ${N800})`,
35
- dark: `var(--ds-text, ${DN900})`
36
- },
37
- important: {
38
- light: `var(--ds-text-inverse, ${N0})`,
39
- dark: `var(--ds-text-inverse, ${N0})`
40
- },
41
- primary: {
42
- light: `var(--ds-text-inverse, ${N0})`,
43
- dark: `var(--ds-text-inverse, ${DN0})`
44
- },
45
- primaryInverted: {
46
- light: `var(--ds-text-brand, ${B500})`,
47
- dark: `var(--ds-text-brand, ${DN0})`
48
- },
49
- removed: {
50
- light: `var(--ds-text-danger, ${R500})`,
51
- dark: `var(--ds-text-danger, ${R500})`
52
- }
53
- };
package/dist/esm/internal/theme.js DELETED
@@ -1,53 +0,0 @@
1
- import { B100, B400, B500, DN0, DN400, DN70, DN900, G50, G500, N0, N40, N800, R400, R50, R500 } from '@atlaskit/theme/colors';
2
- export var backgroundColors = {
3
- added: {
4
- light: "var(--ds-background-success, ".concat(G50, ")"),
5
- dark: "var(--ds-background-success, ".concat(G50, ")")
6
- },
7
- default: {
8
- light: "var(--ds-background-neutral, ".concat(N40, ")"),
9
- dark: "var(--ds-background-neutral, ".concat(DN70, ")")
10
- },
11
- important: {
12
- light: "var(--ds-background-danger-bold, ".concat(R400, ")"),
13
- dark: "var(--ds-background-danger-bold, ".concat(R400, ")")
14
- },
15
- primary: {
16
- light: "var(--ds-background-brand-bold, ".concat(B400, ")"),
17
- dark: "var(--ds-background-brand-bold, ".concat(B100, ")")
18
- },
19
- primaryInverted: {
20
- light: "var(--ds-surface, ".concat(N0, ")"),
21
- dark: "var(--ds-surface, ".concat(DN400, ")")
22
- },
23
- removed: {
24
- light: "var(--ds-background-danger, ".concat(R50, ")"),
25
- dark: "var(--ds-background-danger, ".concat(R50, ")")
26
- }
27
- };
28
- export var textColors = {
29
- added: {
30
- light: "var(--ds-text-success, ".concat(G500, ")"),
31
- dark: "var(--ds-text-success, ".concat(G500, ")")
32
- },
33
- default: {
34
- light: "var(--ds-text, ".concat(N800, ")"),
35
- dark: "var(--ds-text, ".concat(DN900, ")")
36
- },
37
- important: {
38
- light: "var(--ds-text-inverse, ".concat(N0, ")"),
39
- dark: "var(--ds-text-inverse, ".concat(N0, ")")
40
- },
41
- primary: {
42
- light: "var(--ds-text-inverse, ".concat(N0, ")"),
43
- dark: "var(--ds-text-inverse, ".concat(DN0, ")")
44
- },
45
- primaryInverted: {
46
- light: "var(--ds-text-brand, ".concat(B500, ")"),
47
- dark: "var(--ds-text-brand, ".concat(DN0, ")")
48
- },
49
- removed: {
50
- light: "var(--ds-text-danger, ".concat(R500, ")"),
51
- dark: "var(--ds-text-danger, ".concat(R500, ")")
52
- }
53
- };
package/dist/types/internal/theme.d.ts DELETED
@@ -1,52 +0,0 @@
1
- export declare const backgroundColors: {
2
- added: {
3
- light: "var(--ds-background-success)";
4
- dark: "var(--ds-background-success)";
5
- };
6
- default: {
7
- light: "var(--ds-background-neutral)";
8
- dark: "var(--ds-background-neutral)";
9
- };
10
- important: {
11
- light: "var(--ds-background-danger-bold)";
12
- dark: "var(--ds-background-danger-bold)";
13
- };
14
- primary: {
15
- light: "var(--ds-background-brand-bold)";
16
- dark: "var(--ds-background-brand-bold)";
17
- };
18
- primaryInverted: {
19
- light: "var(--ds-surface)";
20
- dark: "var(--ds-surface)";
21
- };
22
- removed: {
23
- light: "var(--ds-background-danger)";
24
- dark: "var(--ds-background-danger)";
25
- };
26
- };
27
- export declare const textColors: {
28
- added: {
29
- light: "var(--ds-text-success)";
30
- dark: "var(--ds-text-success)";
31
- };
32
- default: {
33
- light: "var(--ds-text)";
34
- dark: "var(--ds-text)";
35
- };
36
- important: {
37
- light: "var(--ds-text-inverse)";
38
- dark: "var(--ds-text-inverse)";
39
- };
40
- primary: {
41
- light: "var(--ds-text-inverse)";
42
- dark: "var(--ds-text-inverse)";
43
- };
44
- primaryInverted: {
45
- light: "var(--ds-text-brand)";
46
- dark: "var(--ds-text-brand)";
47
- };
48
- removed: {
49
- light: "var(--ds-text-danger)";
50
- dark: "var(--ds-text-danger)";
51
- };
52
- };
package/dist/types-ts4.0/badge.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import type { BadgeProps } from './types';
3
- /**
4
- * __Badge__
5
- *
6
- * This component gives you the full badge functionality and automatically formats the number you provide in \`children\`.
7
- *
8
- * - [Examples](https://atlassian.design/components/badge/examples)
9
- * - [Code](https://atlassian.design/components/badge/code)
10
- * - [Usage](https://atlassian.design/components/badge/usage)
11
- */
12
- declare const Badge: React.NamedExoticComponent<BadgeProps>;
13
- export default Badge;
package/dist/types-ts4.0/entry-points/badge.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from '../badge';
2
- export type { BadgeProps } from '../types';
package/dist/types-ts4.0/entry-points/types.d.ts DELETED
@@ -1 +0,0 @@
1
- export type { BadgeProps } from '../types';
package/dist/types-ts4.0/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './badge';
2
- export type { BadgeProps } from './types';
package/dist/types-ts4.0/internal/theme.d.ts DELETED
@@ -1,52 +0,0 @@
1
- export declare const backgroundColors: {
2
- added: {
3
- light: "var(--ds-background-success)";
4
- dark: "var(--ds-background-success)";
5
- };
6
- default: {
7
- light: "var(--ds-background-neutral)";
8
- dark: "var(--ds-background-neutral)";
9
- };
10
- important: {
11
- light: "var(--ds-background-danger-bold)";
12
- dark: "var(--ds-background-danger-bold)";
13
- };
14
- primary: {
15
- light: "var(--ds-background-brand-bold)";
16
- dark: "var(--ds-background-brand-bold)";
17
- };
18
- primaryInverted: {
19
- light: "var(--ds-surface)";
20
- dark: "var(--ds-surface)";
21
- };
22
- removed: {
23
- light: "var(--ds-background-danger)";
24
- dark: "var(--ds-background-danger)";
25
- };
26
- };
27
- export declare const textColors: {
28
- added: {
29
- light: "var(--ds-text-success)";
30
- dark: "var(--ds-text-success)";
31
- };
32
- default: {
33
- light: "var(--ds-text)";
34
- dark: "var(--ds-text)";
35
- };
36
- important: {
37
- light: "var(--ds-text-inverse)";
38
- dark: "var(--ds-text-inverse)";
39
- };
40
- primary: {
41
- light: "var(--ds-text-inverse)";
42
- dark: "var(--ds-text-inverse)";
43
- };
44
- primaryInverted: {
45
- light: "var(--ds-text-brand)";
46
- dark: "var(--ds-text-brand)";
47
- };
48
- removed: {
49
- light: "var(--ds-text-danger)";
50
- dark: "var(--ds-text-danger)";
51
- };
52
- };
package/dist/types-ts4.0/internal/utils.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare function formatValue(value?: string | number, max?: number): string;
package/dist/types-ts4.0/types.d.ts DELETED
@@ -1,30 +0,0 @@
1
- import type { CSSProperties, ReactNode } from 'react';
2
- declare type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
3
- export interface BadgeProps {
4
- /**
5
- * Affects the visual style of the badge.
6
- */
7
- appearance?: ThemeAppearance;
8
- /**
9
- * The value displayed within the badge. A `ReactNode` can be provided for
10
- * custom-formatted numbers, however, badge should only be used in cases where you want to represent
11
- * a number.
12
- * Use a [lozenge](/packages/design-system/lozenge) for non-numeric information.
13
- */
14
- children?: number | ReactNode;
15
- /**
16
- * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
17
- * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
18
- * whether it is larger than the default maximum value.
19
- */
20
- max?: number | false;
21
- /**
22
- * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
23
- */
24
- style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
25
- /**
26
- * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
27
- */
28
- testId?: string;
29
- }
30
- export {};