@atlaskit/avatar-group 8.5.7 → 8.5.8

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 8.5.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
8
+ - Updated dependencies
9
+
3
10
  ## 8.5.7
4
11
 
5
12
  ### Patch Changes
@@ -44,9 +44,9 @@ var getButtonStyles = function getButtonStyles(css, _ref) {
44
44
  var size = _ref.size,
45
45
  isActive = _ref.isActive;
46
46
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
47
- var activeStyles = css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-selected-resting, ".concat(_colors.B50, ")"), _avatar.ACTIVE_SCALE_FACTOR, _avatar.BORDER_WIDTH, "var(--ds-text-selected, ".concat(_colors.B300, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
47
+ var activeStyles = css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-brand, ".concat(_colors.B50, ")"), _avatar.ACTIVE_SCALE_FACTOR, _avatar.BORDER_WIDTH, "var(--ds-text-brand, ".concat(_colors.B300, ")"), "var(--ds-text-brand, ".concat(_colors.B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
48
48
 
49
- return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"), "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")"), FONT_SIZE[size], "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30, ")"), "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"), "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30A, ")"), "var(--ds-background-subtleNeutral-pressed, ".concat(_colors.B50, ")"), "var(--ds-text-highEmphasis, ".concat(_colors.B400, ")"), isActive && activeStyles);
49
+ return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text, ".concat(_colors.N500, ")"), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), FONT_SIZE[size], "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"), "var(--ds-text, ".concat(_colors.N500, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"), "var(--ds-background-neutral-pressed, ".concat(_colors.B50, ")"), "var(--ds-text, ".concat(_colors.B400, ")"), isActive && activeStyles);
50
50
  };
51
51
 
52
52
  var MAX_DISPLAY_COUNT = 99;
@@ -54,7 +54,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
54
54
  var _ref2$appearance = _ref2.appearance,
55
55
  appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
56
56
  _ref2$borderColor = _ref2.borderColor,
57
- borderColor = _ref2$borderColor === void 0 ? "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")") : _ref2$borderColor,
57
+ borderColor = _ref2$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref2$borderColor,
58
58
  _ref2$size = _ref2.size,
59
59
  size = _ref2$size === void 0 ? 'medium' : _ref2$size,
60
60
  _ref2$count = _ref2.count,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.7",
3
+ "version": "8.5.8",
4
4
  "sideEffects": false
5
5
  }
@@ -20,31 +20,31 @@ const getButtonStyles = (css, {
20
20
  }) => {
21
21
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
22
22
  const activeStyles = css`
23
- background-color: ${`var(--ds-background-selected-resting, ${B50})`};
23
+ background-color: ${`var(--ds-background-brand, ${B50})`};
24
24
  transform: scale(${ACTIVE_SCALE_FACTOR});
25
- box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-selected, ${B300})`};
26
- color: ${`var(--ds-text-selected, ${B400})`};
25
+ box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-brand, ${B300})`};
26
+ color: ${`var(--ds-text-brand, ${B400})`};
27
27
  `; // eslint-disable-next-line @repo/internal/react/no-css-string-literals
28
28
 
29
29
  return css`
30
- color: ${`var(--ds-text-highEmphasis, ${N500})`};
31
- background-color: ${`var(--ds-background-subtleNeutral-resting, ${N20})`};
30
+ color: ${`var(--ds-text, ${N500})`};
31
+ background-color: ${`var(--ds-background-neutral, ${N20})`};
32
32
  font-size: ${FONT_SIZE[size]}px;
33
33
  font-family: inherit;
34
34
  font-weight: 500;
35
35
 
36
36
  &:hover {
37
- background-color: ${`var(--ds-background-subtleNeutral-hover, ${N30})`};
38
- color: ${`var(--ds-text-highEmphasis, ${N500})`};
37
+ background-color: ${`var(--ds-background-neutral-hovered, ${N30})`};
38
+ color: ${`var(--ds-text, ${N500})`};
39
39
  &:after {
40
- background-color: ${`var(--ds-background-subtleNeutral-hover, ${N30A})`};
40
+ background-color: ${`var(--ds-background-neutral-hovered, ${N30A})`};
41
41
  opacity: 1;
42
42
  }
43
43
  }
44
44
 
45
45
  &:active {
46
- background-color: ${`var(--ds-background-subtleNeutral-pressed, ${B50})`};
47
- color: ${`var(--ds-text-highEmphasis, ${B400})`};
46
+ background-color: ${`var(--ds-background-neutral-pressed, ${B50})`};
47
+ color: ${`var(--ds-text, ${B400})`};
48
48
  &:after {
49
49
  background-color: transparent;
50
50
  }
@@ -57,7 +57,7 @@ const getButtonStyles = (css, {
57
57
  const MAX_DISPLAY_COUNT = 99;
58
58
  const MoreIndicator = /*#__PURE__*/forwardRef(({
59
59
  appearance = 'circle',
60
- borderColor = `var(--ds-background-overlay, ${background()})`,
60
+ borderColor = `var(--ds-surface-overlay, ${background()})`,
61
61
  size = 'medium',
62
62
  count = 0,
63
63
  testId,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.7",
3
+ "version": "8.5.8",
4
4
  "sideEffects": false
5
5
  }
@@ -23,9 +23,9 @@ var getButtonStyles = function getButtonStyles(css, _ref) {
23
23
  var size = _ref.size,
24
24
  isActive = _ref.isActive;
25
25
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
26
- var activeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-selected-resting, ".concat(B50, ")"), ACTIVE_SCALE_FACTOR, BORDER_WIDTH, "var(--ds-text-selected, ".concat(B300, ")"), "var(--ds-text-selected, ".concat(B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
26
+ var activeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-brand, ".concat(B50, ")"), ACTIVE_SCALE_FACTOR, BORDER_WIDTH, "var(--ds-text-brand, ".concat(B300, ")"), "var(--ds-text-brand, ".concat(B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
27
27
 
28
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text-highEmphasis, ".concat(N500, ")"), "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")"), FONT_SIZE[size], "var(--ds-background-subtleNeutral-hover, ".concat(N30, ")"), "var(--ds-text-highEmphasis, ".concat(N500, ")"), "var(--ds-background-subtleNeutral-hover, ".concat(N30A, ")"), "var(--ds-background-subtleNeutral-pressed, ".concat(B50, ")"), "var(--ds-text-highEmphasis, ".concat(B400, ")"), isActive && activeStyles);
28
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N20, ")"), FONT_SIZE[size], "var(--ds-background-neutral-hovered, ".concat(N30, ")"), "var(--ds-text, ".concat(N500, ")"), "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), "var(--ds-background-neutral-pressed, ".concat(B50, ")"), "var(--ds-text, ".concat(B400, ")"), isActive && activeStyles);
29
29
  };
30
30
 
31
31
  var MAX_DISPLAY_COUNT = 99;
@@ -33,7 +33,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref2, ref) {
33
33
  var _ref2$appearance = _ref2.appearance,
34
34
  appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
35
35
  _ref2$borderColor = _ref2.borderColor,
36
- borderColor = _ref2$borderColor === void 0 ? "var(--ds-background-overlay, ".concat(background(), ")") : _ref2$borderColor,
36
+ borderColor = _ref2$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref2$borderColor,
37
37
  _ref2$size = _ref2.size,
38
38
  size = _ref2$size === void 0 ? 'medium' : _ref2$size,
39
39
  _ref2$count = _ref2.count,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.7",
3
+ "version": "8.5.8",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.7",
3
+ "version": "8.5.8",
4
4
  "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
27
27
  "@atlaskit/menu": "^1.2.0",
28
28
  "@atlaskit/popup": "^1.3.0",
29
29
  "@atlaskit/theme": "^12.1.0",
30
- "@atlaskit/tokens": "^0.5.0",
30
+ "@atlaskit/tokens": "^0.6.0",
31
31
  "@atlaskit/tooltip": "^17.5.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/core": "^10.0.9"