@atlaskit/logo 15.2.2 → 15.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/logo
 
+## 15.4.0
+
+### Minor Changes
+
+- [#116138](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116138)
+  [`b50c5d5d65ae2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b50c5d5d65ae2) -
+  Bump to the latest version of @compiled/react
+
+## 15.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.3.0
+
+### Minor Changes
+
+- [#115211](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115211)
+  [`3ef7f182f166b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ef7f182f166b) -
+  [ux] Updated Atlassian Analytics logo and icon to support `iconColor` and `textColor` to align
+  with others.
+
 ## 15.2.2
 
 ### Patch Changes

package/dist/cjs/atlassian-analytics-logo/icon.js

@@ -14,8 +14,16 @@ var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
 var svg = function svg(_ref, colorMode, id) {
-  var appearance = _ref.appearance;
-  var colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    iconColor: iconColor
+  };
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
+  }
   return "<svg height=\"32\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"12.595\" x2=\"12.595\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\" x1=\"28.595\" x2=\"28.595\" y1=\"40\" y2=\"27\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-c\" x1=\"20.595\" x2=\"20.595\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-d\" x1=\"36.595\" x2=\"36.595\" y2=\"20\"/>\n  </defs>\n  <path d=\"M10.595 30h4v10h-4z\" fill=\"url(#").concat(id, "-a)\"/>\n  <path d=\"M26.595 27h4v13h-4z\" fill=\"url(#").concat(id, "-b)\"/>\n  <path d=\"M18.595 22h4v18h-4z\" fill=\"url(#").concat(id, "-c)\"/>\n  <path d=\"M34.595 20h4v20h-4z\" fill=\"url(#").concat(id, "-d)\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m9.009 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\" />\n</svg>");
 };
 
@@ -34,6 +42,10 @@ var AtlassianAnalyticsIcon = exports.AtlassianAnalyticsIcon = function Atlassian
     label = _ref2$label === void 0 ? 'Atlassian Analytics' : _ref2$label,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor,
     testId = _ref2.testId;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
@@ -42,8 +54,11 @@ var AtlassianAnalyticsIcon = exports.AtlassianAnalyticsIcon = function Atlassian
     appearance: appearance,
     label: label,
     svg: svg({
-      appearance: appearance
+      appearance: appearance,
+      iconColor: iconColor
     }, colorMode, id),
+    iconColor: iconColor,
+    textColor: textColor,
     size: size,
     testId: testId
   });

package/dist/cjs/atlassian-analytics-logo/logo.js

@@ -14,8 +14,20 @@ var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
 var svg = function svg(_ref, colorMode, id) {
-  var appearance = _ref.appearance;
-  var colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    textColor: textColor,
+    iconColor: iconColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
+  }
   return "\n  <svg height=\"32\" viewBox=\"0 0 477 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"447.285\" x2=\"447.285\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-b\" x1=\"463.285\" x2=\"463.285\" y2=\"27\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-c\" x1=\"455.285\" x2=\"455.285\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-d\" x1=\"471.285\" x2=\"471.285\" y2=\"20\"/>\n  </defs>\n  <g fill=\"").concat(colors.atlassianLogoTextColor, "\">\n    <path d=\"M106.72 18.359c0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835m0 0c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445M209.1 10.346v28.455h6.063V17.103l2.556 5.76 8.575 15.938h7.623V10.346h-6.064V28.71l-2.295-5.327-6.886-13.037H209.1zM163.909 10.346h6.626v28.455h-6.626zM156.263 30.399c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445 0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835M55.243 10.346v28.455h13.62l2.145-6.15h-9.095V10.346h-6.67zM28.334 10.346v6.15h7.363v22.305h6.67V16.496h7.882v-6.15H28.334zM18.663 10.346h-8.74L0 38.801h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM92.344 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM194.414 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524Z\"/>\n  </g>\n  <g fill=\"").concat(colors.textColor, "\">\n    <path d=\"m254.776 31.987-2.53 6.809H247.6l11.916-30.225h5.244l11.916 30.225h-4.646l-2.53-6.855c-2.714.552-5.061.828-7.499.828-2.3 0-4.646-.276-7.223-.782Zm13.479-3.496-6.119-16.562-6.119 16.608c2.254.368 4.141.552 5.98.552 1.933 0 3.911-.23 6.257-.598ZM298.984 38.796h-3.957V24.902c0-4.141-1.656-5.981-5.428-5.981-3.681 0-6.211 2.438-6.211 7.085v12.79h-3.957V15.794h3.957v3.772c1.472-2.715 4.187-4.232 7.269-4.232 5.291 0 8.327 3.634 8.327 9.983v13.479ZM320.097 34.656c-1.472 3.036-4.232 4.6-7.775 4.6-6.119 0-9.201-5.199-9.201-11.961 0-6.486 3.22-11.961 9.661-11.961 3.358 0 5.935 1.518 7.314 4.508v-4.048h3.957v23.002h-3.957v-4.14Zm-6.717.92c3.542 0 6.717-2.254 6.717-7.361v-1.84c0-5.106-2.898-7.361-6.256-7.361-4.463 0-6.763 2.944-6.763 8.281 0 5.521 2.208 8.281 6.303 8.281ZM336.196 38.935c-3.772 0-6.165-1.794-6.165-6.027V6.179h3.957v26.269c0 2.07 1.38 2.806 3.083 2.806.414 0 .69 0 1.15-.046v3.542c-.322.092-1.012.184-2.024.184ZM347.328 37.324l-8.327-21.53h4.232l7.361 19.69 7.361-19.69h4.232l-8.695 22.267c-2.576 6.579-4.048 9.983-9.891 9.983-1.979 0-3.083-.184-4.232-.644v-3.404c1.334.414 2.852.552 4.002.552 3.22 0 4.646-2.208 6.533-7.223h-2.576ZM374.698 35.07c.92 0 1.794-.185 2.484-.322v3.818c-.69.184-1.472.368-2.668.368-4.923 0-7.315-2.898-7.315-7.177V19.473h-3.727v-3.68h3.727v-4.877h3.864v4.877h6.119v3.68h-6.119v12.191c0 2.024 1.196 3.405 3.635 3.405ZM384.265 6.961c1.61 0 2.76 1.012 2.76 2.76s-1.15 2.76-2.76 2.76-2.76-1.012-2.76-2.76 1.15-2.76 2.76-2.76Zm-2.024 8.833h3.957v23.002h-3.957V15.794ZM408.416 38.198c-1.38.736-3.496 1.058-5.612 1.058-8.189 0-12.007-4.968-12.007-12.007 0-6.947 3.818-11.915 12.007-11.915 2.07 0 3.68.276 5.475 1.104v3.681c-1.472-.69-3.037-1.104-5.199-1.104-5.98 0-8.419 3.772-8.419 8.235s2.484 8.235 8.511 8.235c2.346 0 3.818-.322 5.244-.828v3.542ZM420.144 39.256c-3.451 0-6.257-.782-8.005-1.702v-4.187c1.978 1.15 5.291 2.254 8.188 2.254 3.037 0 4.601-1.242 4.601-3.036 0-1.749-1.334-2.761-5.705-3.818-5.106-1.242-7.269-3.221-7.269-6.993 0-4.002 3.082-6.44 8.327-6.44 2.99 0 5.705.736 7.407 1.656v4.094c-2.76-1.38-5.014-2.117-7.453-2.117-2.898 0-4.462 1.013-4.462 2.807 0 1.61 1.104 2.622 5.336 3.635 5.106 1.242 7.683 3.128 7.683 7.13 0 3.819-2.484 6.717-8.649 6.717Z\"/>\n  </g>\n  <path fill=\"url(#").concat(id, "-a)\" d=\"M445.285 30h4v10h-4z\"/>\n  <path fill=\"url(#").concat(id, "-b)\" d=\"M461.285 27h4v13h-4z\"/>\n  <path fill=\"url(#").concat(id, "-c)\" d=\"M453.285 22h4v18h-4z\"/>\n  <path fill=\"url(#").concat(id, "-d)\" d=\"M469.285 20h4v20h-4z\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m443.699 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\"/>\n</svg>");
 };
 
@@ -34,7 +46,11 @@ var AtlassianAnalyticsLogo = exports.AtlassianAnalyticsLogo = function Atlassian
     label = _ref2$label === void 0 ? 'Atlassian Analytics' : _ref2$label,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
-    testId = _ref2.testId;
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
   var id = (0, _useId.useId)();
@@ -42,9 +58,13 @@ var AtlassianAnalyticsLogo = exports.AtlassianAnalyticsLogo = function Atlassian
     appearance: appearance,
     label: label,
     size: size,
+    iconColor: iconColor,
     svg: svg({
-      appearance: appearance
+      appearance: appearance,
+      iconColor: iconColor,
+      textColor: textColor
     }, colorMode, id),
-    testId: testId
+    testId: testId,
+    textColor: textColor
   });
 };

package/dist/cjs/wrapper.js

@@ -1,4 +1,4 @@
-/* wrapper.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/atlassian-analytics-logo/icon.js

@@ -6,9 +6,17 @@ import { defaultLogoParams } from '../constants';
 import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
-  appearance
+  appearance,
+  iconColor
 }, colorMode, id) => {
-  const colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  let colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    iconColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  }
   return `<svg height="32" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="${id}-a" x1="12.595" x2="12.595" y1="40" y2="30" gradientUnits="userSpaceOnUse">
@@ -43,6 +51,8 @@ export const AtlassianAnalyticsIcon = ({
   appearance,
   label = 'Atlassian Analytics',
   size = defaultLogoParams.size,
+  iconColor = defaultLogoParams.iconColor,
+  textColor = defaultLogoParams.textColor,
   testId
 }) => {
   const {
@@ -53,8 +63,11 @@ export const AtlassianAnalyticsIcon = ({
     appearance: appearance,
     label: label,
     svg: svg({
-      appearance
+      appearance,
+      iconColor
     }, colorMode, id),
+    iconColor: iconColor,
+    textColor: textColor,
     size: size,
     testId: testId
   });

package/dist/es2019/atlassian-analytics-logo/logo.js

@@ -6,9 +6,21 @@ import { defaultLogoParams } from '../constants';
 import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
-  appearance
+  appearance,
+  iconColor,
+  textColor
 }, colorMode, id) => {
-  const colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  let colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    textColor,
+    iconColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  }
   return `
   <svg height="32" viewBox="0 0 477 48" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -47,7 +59,9 @@ export const AtlassianAnalyticsLogo = ({
   appearance,
   label = 'Atlassian Analytics',
   size = defaultLogoParams.size,
-  testId
+  testId,
+  iconColor = defaultLogoParams.iconColor,
+  textColor = defaultLogoParams.textColor
 }) => {
   const {
     colorMode
@@ -57,9 +71,13 @@ export const AtlassianAnalyticsLogo = ({
     appearance: appearance,
     label: label,
     size: size,
+    iconColor: iconColor,
     svg: svg({
-      appearance
+      appearance,
+      iconColor,
+      textColor
     }, colorMode, id),
-    testId: testId
+    testId: testId,
+    textColor: textColor
   });
 };

package/dist/es2019/wrapper.js

@@ -1,4 +1,4 @@
-/* wrapper.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./wrapper.compiled.css";
 import * as React from 'react';

package/dist/esm/atlassian-analytics-logo/icon.js

@@ -6,8 +6,16 @@ import { defaultLogoParams } from '../constants';
 import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 var svg = function svg(_ref, colorMode, id) {
-  var appearance = _ref.appearance;
-  var colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    iconColor: iconColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  }
   return "<svg height=\"32\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"12.595\" x2=\"12.595\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\" x1=\"28.595\" x2=\"28.595\" y1=\"40\" y2=\"27\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-c\" x1=\"20.595\" x2=\"20.595\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-d\" x1=\"36.595\" x2=\"36.595\" y2=\"20\"/>\n  </defs>\n  <path d=\"M10.595 30h4v10h-4z\" fill=\"url(#").concat(id, "-a)\"/>\n  <path d=\"M26.595 27h4v13h-4z\" fill=\"url(#").concat(id, "-b)\"/>\n  <path d=\"M18.595 22h4v18h-4z\" fill=\"url(#").concat(id, "-c)\"/>\n  <path d=\"M34.595 20h4v20h-4z\" fill=\"url(#").concat(id, "-d)\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m9.009 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\" />\n</svg>");
 };
 
@@ -26,6 +34,10 @@ export var AtlassianAnalyticsIcon = function AtlassianAnalyticsIcon(_ref2) {
     label = _ref2$label === void 0 ? 'Atlassian Analytics' : _ref2$label,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor,
     testId = _ref2.testId;
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
@@ -34,8 +46,11 @@ export var AtlassianAnalyticsIcon = function AtlassianAnalyticsIcon(_ref2) {
     appearance: appearance,
     label: label,
     svg: svg({
-      appearance: appearance
+      appearance: appearance,
+      iconColor: iconColor
     }, colorMode, id),
+    iconColor: iconColor,
+    textColor: textColor,
     size: size,
     testId: testId
   });

package/dist/esm/atlassian-analytics-logo/logo.js

@@ -6,8 +6,20 @@ import { defaultLogoParams } from '../constants';
 import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 var svg = function svg(_ref, colorMode, id) {
-  var appearance = _ref.appearance;
-  var colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconColor,
+    iconGradientStop: iconColor,
+    textColor: textColor,
+    iconColor: iconColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
+  if (appearance) {
+    colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
+  }
   return "\n  <svg height=\"32\" viewBox=\"0 0 477 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"447.285\" x2=\"447.285\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-b\" x1=\"463.285\" x2=\"463.285\" y2=\"27\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-c\" x1=\"455.285\" x2=\"455.285\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-d\" x1=\"471.285\" x2=\"471.285\" y2=\"20\"/>\n  </defs>\n  <g fill=\"").concat(colors.atlassianLogoTextColor, "\">\n    <path d=\"M106.72 18.359c0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835m0 0c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445M209.1 10.346v28.455h6.063V17.103l2.556 5.76 8.575 15.938h7.623V10.346h-6.064V28.71l-2.295-5.327-6.886-13.037H209.1zM163.909 10.346h6.626v28.455h-6.626zM156.263 30.399c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445 0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835M55.243 10.346v28.455h13.62l2.145-6.15h-9.095V10.346h-6.67zM28.334 10.346v6.15h7.363v22.305h6.67V16.496h7.882v-6.15H28.334zM18.663 10.346h-8.74L0 38.801h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM92.344 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM194.414 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524Z\"/>\n  </g>\n  <g fill=\"").concat(colors.textColor, "\">\n    <path d=\"m254.776 31.987-2.53 6.809H247.6l11.916-30.225h5.244l11.916 30.225h-4.646l-2.53-6.855c-2.714.552-5.061.828-7.499.828-2.3 0-4.646-.276-7.223-.782Zm13.479-3.496-6.119-16.562-6.119 16.608c2.254.368 4.141.552 5.98.552 1.933 0 3.911-.23 6.257-.598ZM298.984 38.796h-3.957V24.902c0-4.141-1.656-5.981-5.428-5.981-3.681 0-6.211 2.438-6.211 7.085v12.79h-3.957V15.794h3.957v3.772c1.472-2.715 4.187-4.232 7.269-4.232 5.291 0 8.327 3.634 8.327 9.983v13.479ZM320.097 34.656c-1.472 3.036-4.232 4.6-7.775 4.6-6.119 0-9.201-5.199-9.201-11.961 0-6.486 3.22-11.961 9.661-11.961 3.358 0 5.935 1.518 7.314 4.508v-4.048h3.957v23.002h-3.957v-4.14Zm-6.717.92c3.542 0 6.717-2.254 6.717-7.361v-1.84c0-5.106-2.898-7.361-6.256-7.361-4.463 0-6.763 2.944-6.763 8.281 0 5.521 2.208 8.281 6.303 8.281ZM336.196 38.935c-3.772 0-6.165-1.794-6.165-6.027V6.179h3.957v26.269c0 2.07 1.38 2.806 3.083 2.806.414 0 .69 0 1.15-.046v3.542c-.322.092-1.012.184-2.024.184ZM347.328 37.324l-8.327-21.53h4.232l7.361 19.69 7.361-19.69h4.232l-8.695 22.267c-2.576 6.579-4.048 9.983-9.891 9.983-1.979 0-3.083-.184-4.232-.644v-3.404c1.334.414 2.852.552 4.002.552 3.22 0 4.646-2.208 6.533-7.223h-2.576ZM374.698 35.07c.92 0 1.794-.185 2.484-.322v3.818c-.69.184-1.472.368-2.668.368-4.923 0-7.315-2.898-7.315-7.177V19.473h-3.727v-3.68h3.727v-4.877h3.864v4.877h6.119v3.68h-6.119v12.191c0 2.024 1.196 3.405 3.635 3.405ZM384.265 6.961c1.61 0 2.76 1.012 2.76 2.76s-1.15 2.76-2.76 2.76-2.76-1.012-2.76-2.76 1.15-2.76 2.76-2.76Zm-2.024 8.833h3.957v23.002h-3.957V15.794ZM408.416 38.198c-1.38.736-3.496 1.058-5.612 1.058-8.189 0-12.007-4.968-12.007-12.007 0-6.947 3.818-11.915 12.007-11.915 2.07 0 3.68.276 5.475 1.104v3.681c-1.472-.69-3.037-1.104-5.199-1.104-5.98 0-8.419 3.772-8.419 8.235s2.484 8.235 8.511 8.235c2.346 0 3.818-.322 5.244-.828v3.542ZM420.144 39.256c-3.451 0-6.257-.782-8.005-1.702v-4.187c1.978 1.15 5.291 2.254 8.188 2.254 3.037 0 4.601-1.242 4.601-3.036 0-1.749-1.334-2.761-5.705-3.818-5.106-1.242-7.269-3.221-7.269-6.993 0-4.002 3.082-6.44 8.327-6.44 2.99 0 5.705.736 7.407 1.656v4.094c-2.76-1.38-5.014-2.117-7.453-2.117-2.898 0-4.462 1.013-4.462 2.807 0 1.61 1.104 2.622 5.336 3.635 5.106 1.242 7.683 3.128 7.683 7.13 0 3.819-2.484 6.717-8.649 6.717Z\"/>\n  </g>\n  <path fill=\"url(#").concat(id, "-a)\" d=\"M445.285 30h4v10h-4z\"/>\n  <path fill=\"url(#").concat(id, "-b)\" d=\"M461.285 27h4v13h-4z\"/>\n  <path fill=\"url(#").concat(id, "-c)\" d=\"M453.285 22h4v18h-4z\"/>\n  <path fill=\"url(#").concat(id, "-d)\" d=\"M469.285 20h4v20h-4z\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m443.699 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\"/>\n</svg>");
 };
 
@@ -26,7 +38,11 @@ export var AtlassianAnalyticsLogo = function AtlassianAnalyticsLogo(_ref2) {
     label = _ref2$label === void 0 ? 'Atlassian Analytics' : _ref2$label,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? defaultLogoParams.size : _ref2$size,
-    testId = _ref2.testId;
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
   var id = useId();
@@ -34,9 +50,13 @@ export var AtlassianAnalyticsLogo = function AtlassianAnalyticsLogo(_ref2) {
     appearance: appearance,
     label: label,
     size: size,
+    iconColor: iconColor,
     svg: svg({
-      appearance: appearance
+      appearance: appearance,
+      iconColor: iconColor,
+      textColor: textColor
     }, colorMode, id),
-    testId: testId
+    testId: testId,
+    textColor: textColor
   });
 };

package/dist/esm/wrapper.js

@@ -1,4 +1,4 @@
-/* wrapper.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

package/dist/types/atlassian-analytics-logo/icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogoPropsAppearanceRequired } from '../types';
+import type { LogoProps } from '../types';
 /**
  * __Atlassian Analytics icon__
  *
@@ -9,4 +9,4 @@ import type { LogoPropsAppearanceRequired } from '../types';
  * - [Code](https://atlassian.design/components/logo/code)
  * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const AtlassianAnalyticsIcon: ({ appearance, label, size, testId, }: LogoPropsAppearanceRequired) => React.JSX.Element;
+export declare const AtlassianAnalyticsIcon: ({ appearance, label, size, iconColor, textColor, testId, }: LogoProps) => React.JSX.Element;

package/dist/types/atlassian-analytics-logo/logo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogoPropsAppearanceRequired } from '../types';
+import type { LogoProps } from '../types';
 /**
  * __Atlassian Analytics logo__
  *
@@ -9,4 +9,4 @@ import type { LogoPropsAppearanceRequired } from '../types';
  * - [Code](https://atlassian.design/components/logo/code)
  * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const AtlassianAnalyticsLogo: ({ appearance, label, size, testId, }: LogoPropsAppearanceRequired) => React.JSX.Element;
+export declare const AtlassianAnalyticsLogo: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => React.JSX.Element;

package/dist/types-ts4.5/atlassian-analytics-logo/icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogoPropsAppearanceRequired } from '../types';
+import type { LogoProps } from '../types';
 /**
  * __Atlassian Analytics icon__
  *
@@ -9,4 +9,4 @@ import type { LogoPropsAppearanceRequired } from '../types';
  * - [Code](https://atlassian.design/components/logo/code)
  * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const AtlassianAnalyticsIcon: ({ appearance, label, size, testId, }: LogoPropsAppearanceRequired) => React.JSX.Element;
+export declare const AtlassianAnalyticsIcon: ({ appearance, label, size, iconColor, textColor, testId, }: LogoProps) => React.JSX.Element;

package/dist/types-ts4.5/atlassian-analytics-logo/logo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogoPropsAppearanceRequired } from '../types';
+import type { LogoProps } from '../types';
 /**
  * __Atlassian Analytics logo__
  *
@@ -9,4 +9,4 @@ import type { LogoPropsAppearanceRequired } from '../types';
  * - [Code](https://atlassian.design/components/logo/code)
  * - [Usage](https://atlassian.design/components/logo/usage)
  */
-export declare const AtlassianAnalyticsLogo: ({ appearance, label, size, testId, }: LogoPropsAppearanceRequired) => React.JSX.Element;
+export declare const AtlassianAnalyticsLogo: ({ appearance, label, size, testId, iconColor, textColor, }: LogoProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "15.2.2",
+	"version": "15.4.0",
 	"description": "A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,10 +26,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.5.0",
-		"@atlaskit/theme": "^15.0.0",
+		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.1"
+		"@compiled/react": "^0.18.2"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -38,17 +38,18 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/code": "^15.7.1",
+		"@atlaskit/code": "^15.8.0",
 		"@atlaskit/docs": "*",
-		"@atlaskit/form": "^11.1.1",
+		"@atlaskit/form": "^11.2.0",
 		"@atlaskit/link": "*",
-		"@atlaskit/lozenge": "^11.13.2",
-		"@atlaskit/primitives": "^13.5.0",
+		"@atlaskit/lozenge": "^11.14.0",
+		"@atlaskit/primitives": "^13.6.0",
 		"@atlaskit/section-message": "*",
 		"@atlaskit/select": "^18.10.4",
 		"@atlaskit/ssr": "*",
 		"@testing-library/react": "^13.4.0",
 		"jscodeshift": "^0.13.0",
+		"lodash": "^4.17.21",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},