@atlaskit/badge 15.0.21 → 15.0.22

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 (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/badge.js +38 -22
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/badge.js +33 -18
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/badge.js +33 -19
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/types.d.ts +1 -2
  9. package/dist/types-ts4.0/types.d.ts +1 -2
  10. package/package.json +6 -6
  11. package/report.api.md +13 -35
  12. package/dist/cjs/internal/theme.js +0 -63
  13. package/dist/es2019/internal/theme.js +0 -53
  14. package/dist/esm/internal/theme.js +0 -53
  15. package/dist/types/internal/theme.d.ts +0 -52
  16. package/dist/types-ts4.0/internal/theme.d.ts +0 -52
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/badge
2
2
 
3
+ ## 15.0.22
4
+
5
+ ### Patch Changes
6
+
7
+ - [`936d6bccf4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936d6bccf4f) - Update to emotion v11. No expected behaviour change.
8
+ - [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
9
+ - Updated dependencies
10
+
3
11
  ## 15.0.21
4
12
 
5
13
  ### 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,43 @@ 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, {
52
+ paddingInline: "scale.075",
53
+ paddingBlock: "scale.025",
54
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
55
+ backgroundColor: style.backgroundColor
56
+ } : undefined
57
+ }, /*#__PURE__*/_react.default.createElement(_text.default, {
62
58
  fontSize: "12px",
63
59
  lineHeight: "12px",
64
- textAlign: "center"
60
+ textAlign: "center",
61
+ color: textColors[appearance],
62
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
63
+ color: style.color
64
+ } : undefined
65
65
  }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
66
66
  });
67
67
  Badge.displayName = 'Badge';
68
68
  var _default = Badge;
69
- exports.default = _default;
69
+ exports.default = _default;
70
+ var backgroundColors = {
71
+ added: 'success',
72
+ default: 'neutral',
73
+ important: 'danger.bold',
74
+ primary: 'brand.bold',
75
+ primaryInverted: 'elevation.surface',
76
+ removed: 'danger'
77
+ };
78
+ var textColors = {
79
+ added: 'success',
80
+ default: 'color.text',
81
+ important: 'inverse',
82
+ primary: 'inverse',
83
+ primaryInverted: 'brand',
84
+ removed: 'danger'
85
+ };
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.22",
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,42 @@ 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: "scale.075",
32
+ paddingBlock: "scale.025",
33
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
34
+ backgroundColor: style.backgroundColor
35
+ } : undefined
41
36
  }, /*#__PURE__*/React.createElement(Text, {
42
37
  fontSize: "12px",
43
38
  lineHeight: "12px",
44
- textAlign: "center"
39
+ textAlign: "center",
40
+ color: textColors[appearance],
41
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
42
+ color: style.color
43
+ } : undefined
45
44
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
46
45
  });
47
46
  Badge.displayName = 'Badge';
48
- export default Badge;
47
+ export default Badge;
48
+ const backgroundColors = {
49
+ added: 'success',
50
+ default: 'neutral',
51
+ important: 'danger.bold',
52
+ primary: 'brand.bold',
53
+ primaryInverted: 'elevation.surface',
54
+ removed: 'danger'
55
+ };
56
+ const textColors = {
57
+ added: 'success',
58
+ default: 'color.text',
59
+ important: 'inverse',
60
+ primary: 'inverse',
61
+ primaryInverted: 'brand',
62
+ removed: 'danger'
63
+ };
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.22",
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,42 @@ 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: "scale.075",
34
+ paddingBlock: "scale.025",
35
+ UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
36
+ backgroundColor: style.backgroundColor
37
+ } : undefined
44
38
  }, /*#__PURE__*/React.createElement(Text, {
45
39
  fontSize: "12px",
46
40
  lineHeight: "12px",
47
- textAlign: "center"
41
+ textAlign: "center",
42
+ color: textColors[appearance],
43
+ UNSAFE_style: style !== null && style !== void 0 && style.color ? {
44
+ color: style.color
45
+ } : undefined
48
46
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
49
47
  });
50
48
  Badge.displayName = 'Badge';
51
- export default Badge;
49
+ export default Badge;
50
+ var backgroundColors = {
51
+ added: 'success',
52
+ default: 'neutral',
53
+ important: 'danger.bold',
54
+ primary: 'brand.bold',
55
+ primaryInverted: 'elevation.surface',
56
+ removed: 'danger'
57
+ };
58
+ var textColors = {
59
+ added: 'success',
60
+ default: 'color.text',
61
+ important: 'inverse',
62
+ primary: 'inverse',
63
+ primaryInverted: 'brand',
64
+ removed: 'danger'
65
+ };
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.22",
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/dist/types-ts4.0/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.22",
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/"
@@ -37,24 +37,24 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@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",
40
+ "@atlaskit/ds-explorations": "^1.0.0",
43
41
  "@babel/runtime": "^7.0.0"
44
42
  },
45
43
  "peerDependencies": {
46
44
  "react": "^16.8.0"
47
45
  },
48
46
  "devDependencies": {
49
- "@atlaskit/button": "^16.3.0",
47
+ "@atlaskit/button": "^16.4.0",
50
48
  "@atlaskit/docs": "*",
51
49
  "@atlaskit/ds-lib": "^2.1.1",
52
50
  "@atlaskit/section-message": "^6.3.0",
53
51
  "@atlaskit/ssr": "*",
52
+ "@atlaskit/theme": "*",
53
+ "@atlaskit/tokens": "*",
54
54
  "@atlaskit/visual-regression": "*",
55
55
  "@atlaskit/webdriver-runner": "*",
56
56
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
57
- "@emotion/core": "^10.0.9",
57
+ "@emotion/react": "^11.7.1",
58
58
  "@testing-library/react": "^12.1.5",
59
59
  "jscodeshift": "^0.13.0",
60
60
  "react-dom": "^16.8.0",
package/report.api.md CHANGED
@@ -1,6 +1,10 @@
1
- ## API Report File for "@atlaskit/badge".
1
+ ## API Report File for "@atlaskit/badge"
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ <!--
6
+ Generated API Report version: 2.0
7
+ -->
4
8
 
5
9
  [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
6
10
 
@@ -9,47 +13,21 @@ import type { CSSProperties } from 'react';
9
13
  import { default as React_2 } from 'react';
10
14
  import type { ReactNode } from 'react';
11
15
 
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>;
16
+ // @public
17
+ const Badge: React_2.NamedExoticComponent<BadgeProps>;
22
18
  export default Badge;
23
19
 
24
- export declare interface BadgeProps {
25
- /**
26
- * Affects the visual style of the badge.
27
- */
20
+ // @public (undocumented)
21
+ export interface BadgeProps {
28
22
  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
23
  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
24
  max?: number | false;
42
- /**
43
- * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
44
- */
45
25
  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
26
  testId?: string;
50
27
  }
51
28
 
52
- declare type ThemeAppearance =
29
+ // @public (undocumented)
30
+ type ThemeAppearance =
53
31
  | 'added'
54
32
  | 'default'
55
33
  | 'important'
@@ -57,5 +35,5 @@ declare type ThemeAppearance =
57
35
  | 'primaryInverted'
58
36
  | 'removed';
59
37
 
60
- export {};
38
+ // (No @packageDocumentation comment for this package)
61
39
  ```
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/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
- };