@atlaskit/logo 13.7.1 → 13.8.0

package/dist/cjs/trello-logo/icon.js

@@ -13,33 +13,54 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = function svg(iconGradientStart, iconGradientStop) {
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"32\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M23.4579 7H9.21854C8.63014 7 8.06585 7.23374 7.64979 7.64979C7.23374 8.06585 7 8.63014 7 9.21854V23.4669C7 24.0553 7.23374 24.6196 7.64979 25.0356C8.06585 25.4517 8.63014 25.6854 9.21854 25.6854H23.4579C24.0463 25.6854 24.6106 25.4517 25.0266 25.0356C25.4427 24.6196 25.6764 24.0553 25.6764 23.4669V9.22452C25.6772 8.93268 25.6204 8.64354 25.5093 8.37369C25.3981 8.10383 25.2348 7.85855 25.0287 7.65191C24.8227 7.44527 24.5778 7.28131 24.3083 7.16945C24.0387 7.05758 23.7497 7 23.4579 7V7ZM15.0448 20.4729C15.0448 20.6685 14.9673 20.8561 14.8293 20.9947C14.6912 21.1333 14.5039 21.2116 14.3083 21.2124H11.1856C10.9897 21.2116 10.802 21.1334 10.6635 20.9949C10.525 20.8564 10.4469 20.6688 10.4461 20.4729V11.1916C10.4469 10.9957 10.525 10.808 10.6635 10.6695C10.802 10.531 10.9897 10.4528 11.1856 10.4521H14.3083C14.5039 10.4528 14.6912 10.5311 14.8293 10.6697C14.9673 10.8083 15.0448 10.996 15.0448 11.1916V20.4729ZM22.2304 16.2185C22.2296 16.4143 22.1514 16.602 22.0129 16.7405C21.8744 16.879 21.6867 16.9572 21.4908 16.958H18.3681C18.1725 16.9572 17.9852 16.8789 17.8471 16.7403C17.7091 16.6017 17.6316 16.4141 17.6316 16.2185V11.1916C17.6316 10.996 17.7091 10.8083 17.8471 10.6697C17.9852 10.5311 18.1725 10.4528 18.3681 10.4521H21.4908C21.6867 10.4528 21.8744 10.531 22.0129 10.6695C22.1514 10.808 22.2296 10.9957 22.2304 11.1916V16.2185Z\"\n    fill=\"url(#".concat(id, ")\"\n  />\n  <defs>\n    <linearGradient id=\"").concat(id, "\" x1=\"16.3382\" y1=\"25.6824\" x2=\"16.3382\" y2=\"7.00599\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"").concat(iconGradientStart, " \"").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"100%\" stop-color=\"").concat(iconGradientStop, "\"/>\n    </linearGradient>\n  </defs>\n</svg>\n");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "trelloIcon-".concat(appearance);
+  }
+
+  return "\n<svg viewBox=\"0 0 32 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <defs>\n    <linearGradient id=\"".concat(id, "\" x1=\"16.3382\" y1=\"25.6824\" x2=\"16.3382\" y2=\"7.00599\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"").concat(colors.iconGradientStart, " \"").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"100%\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n  </defs>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M23.4579 7H9.21854C8.63014 7 8.06585 7.23374 7.64979 7.64979C7.23374 8.06585 7 8.63014 7 9.21854V23.4669C7 24.0553 7.23374 24.6196 7.64979 25.0356C8.06585 25.4517 8.63014 25.6854 9.21854 25.6854H23.4579C24.0463 25.6854 24.6106 25.4517 25.0266 25.0356C25.4427 24.6196 25.6764 24.0553 25.6764 23.4669V9.22452C25.6772 8.93268 25.6204 8.64354 25.5093 8.37369C25.3981 8.10383 25.2348 7.85855 25.0287 7.65191C24.8227 7.44527 24.5778 7.28131 24.3083 7.16945C24.0387 7.05758 23.7497 7 23.4579 7V7ZM15.0448 20.4729C15.0448 20.6685 14.9673 20.8561 14.8293 20.9947C14.6912 21.1333 14.5039 21.2116 14.3083 21.2124H11.1856C10.9897 21.2116 10.802 21.1334 10.6635 20.9949C10.525 20.8564 10.4469 20.6688 10.4461 20.4729V11.1916C10.4469 10.9957 10.525 10.808 10.6635 10.6695C10.802 10.531 10.9897 10.4528 11.1856 10.4521H14.3083C14.5039 10.4528 14.6912 10.5311 14.8293 10.6697C14.9673 10.8083 15.0448 10.996 15.0448 11.1916V20.4729ZM22.2304 16.2185C22.2296 16.4143 22.1514 16.602 22.0129 16.7405C21.8744 16.879 21.6867 16.9572 21.4908 16.958H18.3681C18.1725 16.9572 17.9852 16.8789 17.8471 16.7403C17.7091 16.6017 17.6316 16.4141 17.6316 16.2185V11.1916C17.6316 10.996 17.7091 10.8083 17.8471 10.6697C17.9852 10.5311 18.1725 10.4528 18.3681 10.4521H21.4908C21.6867 10.4528 21.8744 10.531 22.0129 10.6695C22.1514 10.808 22.2296 10.9957 22.2304 11.1916V16.2185Z\"\n    fill=\"url(#").concat(id, ")\"\n  />\n</svg>\n");
 };
 
-var TrelloIcon = function TrelloIcon(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Trello' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var TrelloIcon = function TrelloIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Trello' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/cjs/trello-logo/logo.js

@@ -13,37 +13,61 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = function svg(iconGradientStart, iconGradientStop) {
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    textColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas width=\"94\" height=\"32\" aria-hidden=\"true\"></canvas>\n  <svg\n    viewBox=\"0 0 94 32\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M68.749 23.7902C66.249 23.7902 64.6742 22.5776 64.6742 19.7573V5H68.5155V19.2304C68.5155 20.0477 69.0574 20.3381 69.7131 20.3381C69.9021 20.3421 70.0911 20.3331 70.2789 20.3112V23.6315C69.7788 23.7552 69.2639 23.8086 68.749 23.7902ZM38.7121 9.98505V6.37431H26.0297V9.98505H30.3051V23.6825H34.4308V9.98505H38.7121ZM40.1498 23.6825H43.9641V16.6227C43.9641 14.464 45.2276 13.8053 47.9072 14.0149V10.027C45.8443 9.89522 44.6856 10.973 43.9641 12.7904V10.2096H40.1498V23.6825ZM72.6901 19.7573C72.6901 22.5776 74.2619 23.7902 76.7619 23.7902C77.2787 23.809 77.7957 23.7556 78.2978 23.6315V20.3112C78.109 20.333 77.9189 20.342 77.7289 20.3381C77.0732 20.3381 76.5313 20.0477 76.5313 19.2304V5H72.6901V19.7573ZM80.1444 16.9402C80.1444 12.7786 82.5396 9.93129 86.6653 9.93129C90.791 9.93129 93.1353 12.7845 93.1353 16.9402C93.1353 21.0958 90.764 24 86.6653 24C82.5665 24 80.1444 21.0749 80.1444 16.9402ZM83.8809 16.9402C83.8809 18.9701 84.7312 20.5749 86.6653 20.5749C88.5994 20.5749 89.3988 18.9701 89.3988 16.9402C89.3988 14.9103 88.5724 13.3474 86.6653 13.3474C84.7581 13.3474 83.8959 14.9103 83.8959 16.9402H83.8809ZM56.2777 18.3621C55.2023 18.3538 54.1281 18.2909 53.0592 18.1734C53.4124 20.0986 54.8256 20.7692 56.8795 20.7692C58.4004 20.7692 59.8854 20.3501 61.1998 19.9309V23.1734C59.7762 23.7133 58.2642 23.9824 56.7417 23.9668C51.6131 23.9668 49.3436 21.4009 49.3436 17.0806C49.3436 12.934 51.9723 9.94 56.0801 9.94C59.1309 9.94 61.6668 12.0058 61.6668 14.7513C61.6668 17.5776 59.1968 18.3621 56.2777 18.3621ZM57.9513 14.6166C57.9513 13.6136 57.0831 12.8801 56.0022 12.8801L55.9992 12.8711C55.4963 12.8789 55.0046 13.0206 54.5746 13.2816C54.1447 13.5426 53.7921 13.9135 53.5532 14.3561C53.2546 14.9118 53.0751 15.5236 53.0262 16.1525C53.686 16.2551 54.3525 16.3081 55.0202 16.3112C56.5861 16.3112 57.9513 15.91 57.9513 14.6166Z\"\n      fill=\"inherit\"\n    />\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M16.4579 5H2.21854C1.63014 5 1.06585 5.23374 0.649794 5.64979C0.233738 6.06585 0 6.63014 0 7.21854V21.4669C0 22.0553 0.233738 22.6196 0.649794 23.0356C1.06585 23.4517 1.63014 23.6854 2.21854 23.6854H16.4579C17.0463 23.6854 17.6106 23.4517 18.0266 23.0356C18.4427 22.6196 18.6764 22.0553 18.6764 21.4669V7.22452C18.6772 6.93268 18.6204 6.64354 18.5093 6.37369C18.3981 6.10383 18.2348 5.85855 18.0287 5.65191C17.8227 5.44527 17.5778 5.28131 17.3083 5.16945C17.0387 5.05758 16.7497 5 16.4579 5V5ZM8.04481 18.4729C8.04481 18.6685 7.96731 18.8561 7.82927 18.9947C7.69123 19.1333 7.50391 19.2116 7.30829 19.2124H4.18558C3.98969 19.2116 3.80205 19.1334 3.66353 18.9949C3.52502 18.8564 3.44685 18.6688 3.44607 18.4729V9.19157C3.44685 8.99568 3.52502 8.80804 3.66353 8.66952C3.80205 8.53101 3.98969 8.45284 4.18558 8.45205H7.30829C7.50391 8.45285 7.69123 8.53111 7.82927 8.66971C7.96731 8.80831 8.04481 8.99595 8.04481 9.19157V18.4729ZM15.2304 14.2185C15.2296 14.4143 15.1514 14.602 15.0129 14.7405C14.8744 14.879 14.6867 14.9572 14.4908 14.958H11.3681C11.1725 14.9572 10.9852 14.8789 10.8471 14.7403C10.7091 14.6017 10.6316 14.4141 10.6316 14.2185V9.19157C10.6316 8.99595 10.7091 8.80831 10.8471 8.66971C10.9852 8.53111 11.1725 8.45285 11.3681 8.45205H14.4908C14.6867 8.45284 14.8744 8.53101 15.0129 8.66952C15.1514 8.80804 15.2296 8.99568 15.2304 9.19157V14.2185Z\"\n      fill=\"url(#".concat(id, ")\"\n    />\n    <defs>\n      <linearGradient\n        id=\"").concat(id, "\"\n        x1=\"9.33821\"\n        y1=\"23.6824\"\n        x2=\"9.33821\"\n        y2=\"5.00599\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\" />\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\" />\n      </linearGradient>\n    </defs>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "trelloLogo-".concat(appearance);
+  }
+
+  return "\n  <svg\n    viewBox=\"0 0 94 32\"\n    height=\"32\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <defs>\n      <linearGradient\n        id=\"".concat(id, "\"\n        x1=\"9.33821\"\n        y1=\"23.6824\"\n        x2=\"9.33821\"\n        y2=\"5.00599\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\" />\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\" />\n      </linearGradient>\n  </defs>\n  <path\n    fill=\"").concat(colors.textColor, "\"\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M68.749 23.7902C66.249 23.7902 64.6742 22.5776 64.6742 19.7573V5H68.5155V19.2304C68.5155 20.0477 69.0574 20.3381 69.7131 20.3381C69.9021 20.3421 70.0911 20.3331 70.2789 20.3112V23.6315C69.7788 23.7552 69.2639 23.8086 68.749 23.7902ZM38.7121 9.98505V6.37431H26.0297V9.98505H30.3051V23.6825H34.4308V9.98505H38.7121ZM40.1498 23.6825H43.9641V16.6227C43.9641 14.464 45.2276 13.8053 47.9072 14.0149V10.027C45.8443 9.89522 44.6856 10.973 43.9641 12.7904V10.2096H40.1498V23.6825ZM72.6901 19.7573C72.6901 22.5776 74.2619 23.7902 76.7619 23.7902C77.2787 23.809 77.7957 23.7556 78.2978 23.6315V20.3112C78.109 20.333 77.9189 20.342 77.7289 20.3381C77.0732 20.3381 76.5313 20.0477 76.5313 19.2304V5H72.6901V19.7573ZM80.1444 16.9402C80.1444 12.7786 82.5396 9.93129 86.6653 9.93129C90.791 9.93129 93.1353 12.7845 93.1353 16.9402C93.1353 21.0958 90.764 24 86.6653 24C82.5665 24 80.1444 21.0749 80.1444 16.9402ZM83.8809 16.9402C83.8809 18.9701 84.7312 20.5749 86.6653 20.5749C88.5994 20.5749 89.3988 18.9701 89.3988 16.9402C89.3988 14.9103 88.5724 13.3474 86.6653 13.3474C84.7581 13.3474 83.8959 14.9103 83.8959 16.9402H83.8809ZM56.2777 18.3621C55.2023 18.3538 54.1281 18.2909 53.0592 18.1734C53.4124 20.0986 54.8256 20.7692 56.8795 20.7692C58.4004 20.7692 59.8854 20.3501 61.1998 19.9309V23.1734C59.7762 23.7133 58.2642 23.9824 56.7417 23.9668C51.6131 23.9668 49.3436 21.4009 49.3436 17.0806C49.3436 12.934 51.9723 9.94 56.0801 9.94C59.1309 9.94 61.6668 12.0058 61.6668 14.7513C61.6668 17.5776 59.1968 18.3621 56.2777 18.3621ZM57.9513 14.6166C57.9513 13.6136 57.0831 12.8801 56.0022 12.8801L55.9992 12.8711C55.4963 12.8789 55.0046 13.0206 54.5746 13.2816C54.1447 13.5426 53.7921 13.9135 53.5532 14.3561C53.2546 14.9118 53.0751 15.5236 53.0262 16.1525C53.686 16.2551 54.3525 16.3081 55.0202 16.3112C56.5861 16.3112 57.9513 15.91 57.9513 14.6166Z\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M16.4579 5H2.21854C1.63014 5 1.06585 5.23374 0.649794 5.64979C0.233738 6.06585 0 6.63014 0 7.21854V21.4669C0 22.0553 0.233738 22.6196 0.649794 23.0356C1.06585 23.4517 1.63014 23.6854 2.21854 23.6854H16.4579C17.0463 23.6854 17.6106 23.4517 18.0266 23.0356C18.4427 22.6196 18.6764 22.0553 18.6764 21.4669V7.22452C18.6772 6.93268 18.6204 6.64354 18.5093 6.37369C18.3981 6.10383 18.2348 5.85855 18.0287 5.65191C17.8227 5.44527 17.5778 5.28131 17.3083 5.16945C17.0387 5.05758 16.7497 5 16.4579 5V5ZM8.04481 18.4729C8.04481 18.6685 7.96731 18.8561 7.82927 18.9947C7.69123 19.1333 7.50391 19.2116 7.30829 19.2124H4.18558C3.98969 19.2116 3.80205 19.1334 3.66353 18.9949C3.52502 18.8564 3.44685 18.6688 3.44607 18.4729V9.19157C3.44685 8.99568 3.52502 8.80804 3.66353 8.66952C3.80205 8.53101 3.98969 8.45284 4.18558 8.45205H7.30829C7.50391 8.45285 7.69123 8.53111 7.82927 8.66971C7.96731 8.80831 8.04481 8.99595 8.04481 9.19157V18.4729ZM15.2304 14.2185C15.2296 14.4143 15.1514 14.602 15.0129 14.7405C14.8744 14.879 14.6867 14.9572 14.4908 14.958H11.3681C11.1725 14.9572 10.9852 14.8789 10.8471 14.7403C10.7091 14.6017 10.6316 14.4141 10.6316 14.2185V9.19157C10.6316 8.99595 10.7091 8.80831 10.8471 8.66971C10.9852 8.53111 11.1725 8.45285 11.3681 8.45205H14.4908C14.6867 8.45284 14.8744 8.53101 15.0129 8.66952C15.1514 8.80804 15.2296 8.99568 15.2304 9.19157V14.2185Z\"\n    fill=\"url(#").concat(id, ")\"\n  />\n</svg>");
 };
 
-var TrelloLogo = function TrelloLogo(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Trello' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var TrelloLogo = function TrelloLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Trello' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/trello-logo/wordmark.js

@@ -11,28 +11,47 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = "<canvas height=\"32\" width=\"68\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 68 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <path fill=\"inherit\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M42.7193 23.7902C40.2194 23.7902 38.6445 22.5776 38.6445 19.7573V5H42.4858V19.2304C42.4858 20.0477 43.0277 20.3381 43.6834 20.3381C43.8724 20.3421 44.0615 20.3331 44.2493 20.3112V23.6315C43.7491 23.7552 43.2342 23.8086 42.7193 23.7902ZM12.6825 9.98505V6.37431H0V9.98505H4.2754V23.6825H8.40109V9.98505H12.6825ZM14.1201 23.6825H17.9344V16.6227C17.9344 14.464 19.1979 13.8053 21.8775 14.0149V10.027C19.8147 9.89522 18.656 10.973 17.9344 12.7904V10.2096H14.1201V23.6825ZM46.6604 19.7573C46.6604 22.5776 48.2322 23.7902 50.7322 23.7902C51.2491 23.809 51.766 23.7556 52.2681 23.6315V20.3112C52.0793 20.333 51.8893 20.342 51.6993 20.3381C51.0436 20.3381 50.5017 20.0477 50.5017 19.2304V5H46.6604V19.7573ZM54.1147 16.9402C54.1147 12.7786 56.5099 9.93129 60.6356 9.93129C64.7613 9.93129 67.1056 12.7845 67.1056 16.9402C67.1056 21.0958 64.7344 24 60.6356 24C56.5369 24 54.1147 21.0749 54.1147 16.9402ZM57.8512 16.9402C57.8512 18.9701 58.7015 20.5749 60.6356 20.5749C62.5697 20.5749 63.3691 18.9701 63.3691 16.9402C63.3691 14.9103 62.5428 13.3474 60.6356 13.3474C58.7285 13.3474 57.8662 14.9103 57.8662 16.9402H57.8512ZM30.248 18.3621C29.1727 18.3538 28.0984 18.2909 27.0295 18.1734C27.3828 20.0986 28.7959 20.7692 30.8498 20.7692C32.3707 20.7692 33.8558 20.3501 35.1701 19.9309V23.1734C33.7465 23.7133 32.2345 23.9824 30.7121 23.9668C25.5834 23.9668 23.314 21.4009 23.314 17.0806C23.314 12.934 25.9427 9.94 30.0504 9.94C33.1013 9.94 35.6372 12.0058 35.6372 14.7513C35.6372 17.5776 33.1671 18.3621 30.248 18.3621ZM31.9216 14.6166C31.9216 13.6136 31.0534 12.8801 29.9726 12.8801L29.9696 12.8711C29.4667 12.8789 28.9749 13.0206 28.545 13.2816C28.115 13.5426 27.7624 13.9135 27.5235 14.3561C27.2249 14.9118 27.0455 15.5236 26.9966 16.1525C27.6563 16.2551 28.3229 16.3081 28.9905 16.3112C30.5564 16.3112 31.9216 15.91 31.9216 14.6166Z\" />\n</svg>\n";
-
-var TrelloWordmark = function TrelloWordmark(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Trello' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      textColor = _ref.textColor;
+  var colors = {
+    textColor: textColor
+  };
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 68 32\" height=\"32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <path fill=\"".concat(colors.textColor, "\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M42.7193 23.7902C40.2194 23.7902 38.6445 22.5776 38.6445 19.7573V5H42.4858V19.2304C42.4858 20.0477 43.0277 20.3381 43.6834 20.3381C43.8724 20.3421 44.0615 20.3331 44.2493 20.3112V23.6315C43.7491 23.7552 43.2342 23.8086 42.7193 23.7902ZM12.6825 9.98505V6.37431H0V9.98505H4.2754V23.6825H8.40109V9.98505H12.6825ZM14.1201 23.6825H17.9344V16.6227C17.9344 14.464 19.1979 13.8053 21.8775 14.0149V10.027C19.8147 9.89522 18.656 10.973 17.9344 12.7904V10.2096H14.1201V23.6825ZM46.6604 19.7573C46.6604 22.5776 48.2322 23.7902 50.7322 23.7902C51.2491 23.809 51.766 23.7556 52.2681 23.6315V20.3112C52.0793 20.333 51.8893 20.342 51.6993 20.3381C51.0436 20.3381 50.5017 20.0477 50.5017 19.2304V5H46.6604V19.7573ZM54.1147 16.9402C54.1147 12.7786 56.5099 9.93129 60.6356 9.93129C64.7613 9.93129 67.1056 12.7845 67.1056 16.9402C67.1056 21.0958 64.7344 24 60.6356 24C56.5369 24 54.1147 21.0749 54.1147 16.9402ZM57.8512 16.9402C57.8512 18.9701 58.7015 20.5749 60.6356 20.5749C62.5697 20.5749 63.3691 18.9701 63.3691 16.9402C63.3691 14.9103 62.5428 13.3474 60.6356 13.3474C58.7285 13.3474 57.8662 14.9103 57.8662 16.9402H57.8512ZM30.248 18.3621C29.1727 18.3538 28.0984 18.2909 27.0295 18.1734C27.3828 20.0986 28.7959 20.7692 30.8498 20.7692C32.3707 20.7692 33.8558 20.3501 35.1701 19.9309V23.1734C33.7465 23.7133 32.2345 23.9824 30.7121 23.9668C25.5834 23.9668 23.314 21.4009 23.314 17.0806C23.314 12.934 25.9427 9.94 30.0504 9.94C33.1013 9.94 35.6372 12.0058 35.6372 14.7513C35.6372 17.5776 33.1671 18.3621 30.248 18.3621ZM31.9216 14.6166C31.9216 13.6136 31.0534 12.8801 29.9726 12.8801L29.9696 12.8711C29.4667 12.8789 28.9749 13.0206 28.545 13.2816C28.115 13.5426 27.7624 13.9135 27.5235 14.3561C27.2249 14.9118 27.0455 15.5236 26.9966 16.1525C27.6563 16.2551 28.3229 16.3081 28.9905 16.3112C30.5564 16.3112 31.9216 15.91 31.9216 14.6166Z\" />\n  </svg>\n  ");
+};
+
+var TrelloWordmark = function TrelloWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Trello' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      textColor: textColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/cjs/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColorsFromAppearance = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+// TODO: This is where we need to add tokens for all appearance color values
+var getColorsFromAppearance = function getColorsFromAppearance(appearance) {
+  var iconGradientStart, iconGradientStop, iconColor, textColor, atlassianLogoTextColor;
+
+  switch (appearance) {
+    case 'brand':
+      iconGradientStart = _colors.B400;
+      iconGradientStop = _colors.B200;
+      iconColor = _colors.B200;
+      textColor = "var(--ds-text, ".concat(_colors.N800, ")"); // This is only used for the top level Atlassian wordmark (see AtlassianLogo
+      // or AtlassianStartLogo for example), and is only different for the Brand
+      // appearance - a bold brand color. For other appearances,
+      // atlassianLogoTextColor is the same as textColor.
+
+      atlassianLogoTextColor = _colors.B400;
+      break;
+
+    case 'neutral':
+      iconGradientStart = _colors.N600;
+      iconGradientStop = _colors.N100;
+      iconColor = _colors.N100;
+      textColor = _colors.N400;
+      atlassianLogoTextColor = _colors.N400;
+      break;
+
+    case 'inverse':
+      iconGradientStart = _colors.N50;
+      iconGradientStop = _colors.N0;
+      iconColor = _colors.N0;
+      textColor = "var(--ds-text-inverse, ".concat(_colors.N0, ")");
+      atlassianLogoTextColor = "var(--ds-text-inverse, ".concat(_colors.N0, ")");
+      break;
+  }
+
+  return {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor,
+    atlassianLogoTextColor: atlassianLogoTextColor
+  };
+};
+
+exports.getColorsFromAppearance = getColorsFromAppearance;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "13.7.1",
+	"version": "13.8.0",
 	"sideEffects": false
 }

package/dist/cjs/wrapper.js

@@ -19,7 +19,7 @@ var _core = require("@emotion/core");
 
 var _constants = require("./constants");
 
-var _excluded = ["label", "svg", "iconGradientStart", "iconGradientStop", "size", "iconColor", "testId", "textColor"];
+var _excluded = ["label", "svg", "size", "appearance", "iconGradientStart", "iconGradientStop", "iconColor", "textColor", "testId"];
 var CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';
 var baseWrapperStyles = (0, _core.css)({
@@ -30,18 +30,8 @@ var baseWrapperStyles = (0, _core.css)({
   userSelect: 'none',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '> svg': {
-    width: '100%',
     height: '100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
     fill: 'inherit'
-  },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '> canvas': {
-    display: 'block',
-    height: '100%',
-    visibility: 'hidden'
   }
 });
 var stopColorStyles = (0, _core.css)({
@@ -71,14 +61,15 @@ var Wrapper = function Wrapper(_ref3) {
 
   var label = _ref3.label,
       svg = _ref3.svg,
+      size = _ref3.size,
+      appearance = _ref3.appearance,
       iconGradientStart = _ref3.iconGradientStart,
       iconGradientStop = _ref3.iconGradientStop,
-      size = _ref3.size,
       iconColor = _ref3.iconColor,
-      userDefinedTestId = _ref3.testId,
       textColor = _ref3.textColor,
+      userDefinedTestId = _ref3.testId,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit';
+  var shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit' && appearance === undefined;
   var testId = userDefinedTestId && "".concat(userDefinedTestId, "--wrapper");
   return (0, _core.jsx)("span", (0, _extends2.default)({
     css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
@@ -87,7 +78,7 @@ var Wrapper = function Wrapper(_ref3) {
     "aria-label": label ? label : undefined,
     role: label ? 'img' : 'presentation',
     dangerouslySetInnerHTML: {
-      __html: typeof svg === 'function' ? svg(String(iconGradientStart), String(iconGradientStop)) : svg
+      __html: svg
     }
   }, rest));
 };

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

@@ -2,42 +2,66 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  appearance,
+  iconGradientStart,
+  iconGradientStop,
+  iconColor
+}) => {
+  let colors = {
+    iconGradientStart,
+    iconGradientStop,
+    iconColor
+  };
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="32" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `atlassianIcon-${appearance}`;
+  }
+
+  return `
+  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}" x1="14.8402" y1="15.8324" x2="8.6599" y2="26.5369" gradientUnits="userSpaceOnUse">
-        <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="0.9228"></stop>
+        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
+        <stop stop-color="${colors.iconGradientStop}" offset="0.9228"></stop>
       </linearGradient>
     </defs>
     <path fill="url(#${id})" d="M11.6397 14.0398C11.2789 13.643 10.7378 13.679 10.4852 14.148L4.64091 25.8728C4.42446 26.3418 4.74912 26.8829 5.25419 26.8829H13.4074C13.6599 26.8829 13.9125 26.7386 14.0207 26.4861C15.7885 22.8424 14.7061 17.3227 11.6397 14.0398Z" />
-    <path fill="inherit" d="M15.9343 3.36124C12.6513 8.55622 12.8678 14.2923 15.0324 18.6215C17.1969 22.9506 18.8565 26.2336 18.9647 26.4861C19.0729 26.7386 19.3254 26.8829 19.578 26.8829H27.7312C28.2363 26.8829 28.597 26.3418 28.3445 25.8728C28.3445 25.8728 17.3774 3.93846 17.0887 3.39732C16.8723 2.89225 16.259 2.85618 15.9343 3.36124Z" />
+    <path fill="${colors.iconColor}" d="M15.9343 3.36124C12.6513 8.55622 12.8678 14.2923 15.0324 18.6215C17.1969 22.9506 18.8565 26.2336 18.9647 26.4861C19.0729 26.7386 19.3254 26.8829 19.578 26.8829H27.7312C28.2363 26.8829 28.597 26.3418 28.3445 25.8728C28.3445 25.8728 17.3774 3.93846 17.0887 3.39732C16.8723 2.89225 16.259 2.85618 15.9343 3.36124Z" />
   </svg>`;
 };
 
 export const AtlassianIcon = ({
+  appearance,
+  label = 'Atlassian',
+  size = defaultLogoParams.size,
   iconColor = defaultLogoParams.iconColor,
   iconGradientStart = defaultLogoParams.iconGradientStart,
   iconGradientStop = defaultLogoParams.iconGradientStop,
-  label = 'Atlassian',
-  size = defaultLogoParams.size,
   textColor = defaultLogoParams.textColor,
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
+    textColor: textColor,
     size: size,
-    testId: testId,
-    textColor: textColor
+    testId: testId
   });
 };

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

@@ -2,23 +2,44 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  appearance,
+  iconGradientStart,
+  iconGradientStop,
+  iconColor,
+  textColor
+}) => {
+  let colors = {
+    iconGradientStart,
+    iconGradientStop,
+    iconColor,
+    textColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="190" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 190 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `atlassianLogo-${appearance}`;
+  }
+
+  return `
+  <svg viewBox="0 0 190 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="99.684716%" y1="15.8138128%" x2="39.8444399%" y2="97.4388388%" id="${id}">
-        <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="100%"></stop>
+        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
+        <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
       </linearGradient>
     </defs>
-    <g stroke="none" stroke-width="1" fill-rule="nonzero">
-      <path d="M6.90502605,15.6123193 C6.76436383,15.4302139 6.53773035,15.3340846 6.30742588,15.35884 C6.0771214,15.3835955 5.876643,15.525635 5.7787929,15.7333781 L0.0719979599,27.0218487 C-0.0337056449,27.2310259 -0.0224063827,27.4794358 0.101860917,27.6783741 C0.226128216,27.8773125 0.445645594,27.9984148 0.68202605,27.9984369 L8.62844459,27.9984369 C8.88847261,28.0044096 9.12761649,27.8581627 9.23847268,27.6253781 C10.9526159,24.1210252 9.91378448,18.7926722 6.90502605,15.6123193 Z" fill="url(#${id})"></path>
-      <path d="M11.0859556,5.33713587 C8.19309829,9.74089822 7.85921851,15.3267488 10.2073011,20.0371359 L14.0383488,27.6176065 C14.1538739,27.8462194 14.3900332,27.9906411 14.6483769,27.9906653 L22.5933685,27.9906653 C22.829749,27.9906431 23.0492663,27.8695408 23.1735336,27.6706025 C23.2978009,27.4716641 23.3091002,27.2232543 23.2033966,27.014077 C23.2033966,27.014077 12.5147056,5.8619594 12.2460792,5.33290058 C12.1377032,5.11315026 11.9118188,4.97410225 11.6646746,4.97500451 C11.4175304,4.97590676 11.1926893,5.11660025 11.0859556,5.33713587 L11.0859556,5.33713587 Z" fill="currentColor"></path>
+    <g stroke="none" stroke-width="1" fill="${colors.atlassianLogoTextColor}" >
+      <path fill="url(#${id})" d="M6.90502605,15.6123193 C6.76436383,15.4302139 6.53773035,15.3340846 6.30742588,15.35884 C6.0771214,15.3835955 5.876643,15.525635 5.7787929,15.7333781 L0.0719979599,27.0218487 C-0.0337056449,27.2310259 -0.0224063827,27.4794358 0.101860917,27.6783741 C0.226128216,27.8773125 0.445645594,27.9984148 0.68202605,27.9984369 L8.62844459,27.9984369 C8.88847261,28.0044096 9.12761649,27.8581627 9.23847268,27.6253781 C10.9526159,24.1210252 9.91378448,18.7926722 6.90502605,15.6123193 Z"></path>
+      <path fill="${colors.iconColor}" d="M11.0859556,5.33713587 C8.19309829,9.74089822 7.85921851,15.3267488 10.2073011,20.0371359 L14.0383488,27.6176065 C14.1538739,27.8462194 14.3900332,27.9906411 14.6483769,27.9906653 L22.5933685,27.9906653 C22.829749,27.9906431 23.0492663,27.8695408 23.1735336,27.6706025 C23.2978009,27.4716641 23.3091002,27.2232543 23.2033966,27.014077 C23.2033966,27.014077 12.5147056,5.8619594 12.2460792,5.33290058 C12.1377032,5.11315026 11.9118188,4.97410225 11.6646746,4.97500451 C11.4175304,4.97590676 11.1926893,5.11660025 11.0859556,5.33713587 L11.0859556,5.33713587 Z"></path>
       <path d="M104.2774,14.3919316 C104.2774,17.1872257 105.588069,19.4065198 110.714802,20.3862846 C113.773504,21.0215787 114.414212,21.5100493 114.414212,22.5187551 C114.414212,23.4985198 113.772077,24.1327551 111.617715,24.1327551 C109.013896,24.0864379 106.462135,23.403307 104.189999,22.1442846 L104.189999,26.6972257 C105.733976,27.4465198 107.772754,28.2822846 111.559566,28.2822846 C116.919251,28.2822846 119.045788,25.9175787 119.045788,22.4033434 M119.045788,22.4033434 C119.045788,19.0892257 117.268858,17.5327551 112.25878,16.4668728 C109.491535,15.8615787 108.821574,15.2566375 108.821574,14.3919316 C108.821574,13.297814 109.811889,12.835814 111.646968,12.835814 C113.860906,12.835814 116.045591,13.4986375 118.113622,14.4208728 L118.113622,10.0691081 C116.130615,9.17615406 113.970906,8.73311319 111.792518,8.7724022 C106.840589,8.7724022 104.2774,10.9048728 104.2774,14.3919316" fill="inherit"></path>
       <polygon fill="inherit" points="173.129997 9.07000017 173.129997 28.0038825 177.20791 28.0038825 177.20791 13.5657649 178.926691 17.3983531 184.694132 28.0038825 189.820865 28.0038825 189.820865 9.07000017 185.742952 9.07000017 185.742952 21.2891766 184.198975 17.7442355 179.567399 9.07000017"></polygon>
       <rect fill="inherit" x="142.740005" y="9.07000017" width="4.45677247" height="18.9338824"></rect>
@@ -33,17 +54,25 @@ const svg = (iconGradientStart, iconGradientStop) => {
 };
 
 export const AtlassianLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Atlassian',
   size = defaultLogoParams.size,
   testId,
+  iconColor = defaultLogoParams.iconColor,
+  iconGradientStart = defaultLogoParams.iconGradientStart,
+  iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor,
+      textColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -1,25 +1,41 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
-const svg = `<canvas height="32" width="158" aria-hidden="true"></canvas>
-<svg viewBox="0 0 158 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">>
-  <g stroke="none" stroke-width="1" fill-rule="nonzero" fill="inherit">
-    <path d="M72.2774003,14.3919316 C72.2774003,17.1872257 73.5880689,19.4065198 78.714802,20.3862846 C81.7735042,21.0215787 82.4142121,21.5100493 82.4142121,22.5187551 C82.4142121,23.4985198 81.7720773,24.1327551 79.6177149,24.1327551 C77.0138964,24.0864379 74.4621351,23.403307 72.1899986,22.1442846 L72.1899986,26.6972257 C73.7339762,27.4465198 75.7727542,28.2822846 79.559566,28.2822846 C84.9192514,28.2822846 87.045788,25.9175787 87.045788,22.4033434 M87.045788,22.4033434 C87.045788,19.0892257 85.2688582,17.5327551 80.2587795,16.4668728 C77.4915351,15.8615787 76.8215745,15.2566375 76.8215745,14.3919316 C76.8215745,13.297814 77.8118891,12.835814 79.6469677,12.835814 C81.8609059,12.835814 84.0455913,13.4986375 86.1136222,14.4208728 L86.1136222,10.0691081 C84.1306149,9.17615406 81.9709058,8.73311319 79.7925183,8.7724022 C74.8405885,8.7724022 72.2774003,10.9048728 72.2774003,14.3919316"></path>
-    <polygon points="141.129997 9.07000017 141.129997 28.0038825 145.20791 28.0038825 145.20791 13.5657649 146.926691 17.3983531 152.694132 28.0038825 157.820865 28.0038825 157.820865 9.07000017 153.742952 9.07000017 153.742952 21.2891766 152.198975 17.7442355 147.567399 9.07000017"></polygon>
-    <rect x="110.740005" y="9.07000017" width="4.45677247" height="18.9338824"></rect>
-    <path d="M105.600792,22.4033434 C105.600792,19.0892257 103.823862,17.5327551 98.8137836,16.4668728 C96.0465393,15.8615787 95.3765786,15.2566375 95.3765786,14.3919316 C95.3765786,13.297814 96.3668932,12.835814 98.2019718,12.835814 C100.41591,12.835814 102.600595,13.4986375 104.668626,14.4208728 L104.668626,10.0691081 C102.685619,9.17615406 100.52591,8.73311319 98.3475224,8.7724022 C93.3955926,8.7724022 90.8324044,10.9048728 90.8324044,14.3919316 C90.8324044,17.1872257 92.143073,19.4065198 97.2698061,20.3862846 C100.328508,21.0215787 100.969216,21.5100493 100.969216,22.5187551 C100.969216,23.4985198 100.327081,24.1327551 98.172719,24.1327551 C95.5689006,24.0864379 93.0171392,23.403307 90.7450027,22.1442846 L90.7450027,26.6972257 C92.2889803,27.4465198 94.3277584,28.2822846 98.1145702,28.2822846 C103.474256,28.2822846 105.600792,25.9175787 105.600792,22.4033434"></path>
-    <polygon points="37.6599979 9.07000017 37.6599979 28.0038825 46.8204081 28.0038825 48.2627142 23.9115296 42.1456665 23.9115296 42.1456665 9.07000017"></polygon>
-    <polygon points="19.5549984 9.07000017 19.5549984 13.1620002 24.5069282 13.1620002 24.5069282 28.0038825 28.9925967 28.0038825 28.9925967 13.1620002 34.2941332 13.1620002 34.2941332 9.07000017"></polygon>
-    <path d="M13.0573091,9.07000017 L7.17856472,9.07000017 L0.505000114,28.0038825 L5.60141023,28.0038825 L6.54748888,24.815059 C8.877531,25.4919503 11.3551322,25.4919503 13.6851743,24.815059 L14.6312529,28.0038825 L19.7287333,28.0038825 L13.0573091,9.07000017 Z M10.1177585,21.4007061 C9.28758405,21.4006584 8.46168544,21.2831148 7.66516023,21.0516472 L10.1177585,12.7889413 L12.5703569,21.0544708 C11.7736914,21.2849831 10.9477956,21.4015755 10.1177585,21.4007061 L10.1177585,21.4007061 Z"></path>
-    <path d="M62.6019534,9.07000017 L56.7235658,9.07000017 L50.0500011,28.0038825 L55.1474815,28.0038825 L56.0935601,24.815059 C58.4236023,25.4919503 60.9012034,25.4919503 63.2312455,24.815059 L64.1773242,28.0038825 L69.2748045,28.0038825 L62.6019534,9.07000017 Z M59.6627596,21.4007061 C58.8325851,21.4006584 58.0066865,21.2831148 57.2101613,21.0516472 L59.6627596,12.7889413 L62.1153579,21.0544708 C61.3186924,21.2849831 60.4927966,21.4015755 59.6627596,21.4007061 L59.6627596,21.4007061 Z"></path>
-    <path d="M131.256954,9.07000017 L125.378566,9.07000017 L118.705002,28.0038825 L123.802482,28.0038825 L124.748561,24.815059 C127.078603,25.4919503 129.556204,25.4919503 131.886246,24.815059 L132.832325,28.0038825 L137.930162,28.0038825 L131.256954,9.07000017 Z M128.315977,21.4007061 C127.485802,21.4006584 126.659903,21.2831148 125.863378,21.0516472 L128.315977,12.7889413 L130.768575,21.0544708 C129.971909,21.2849831 129.146014,21.4015755 128.315977,21.4007061 L128.315977,21.4007061 Z"></path>
-  </g>
-</svg>`;
+
+const svg = ({
+  appearance,
+  textColor
+}) => {
+  let colors = {
+    textColor,
+    // We treat the word "Atlassian" differently to normal product logos
+    atlassianLogoTextColor: textColor
+  };
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+  }
+
+  return `
+  <svg viewBox="0 0 158 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">>
+    <g stroke="none" stroke-width="1" fill-rule="nonzero" fill="${colors.atlassianLogoTextColor}">
+      <path d="M72.2774003,14.3919316 C72.2774003,17.1872257 73.5880689,19.4065198 78.714802,20.3862846 C81.7735042,21.0215787 82.4142121,21.5100493 82.4142121,22.5187551 C82.4142121,23.4985198 81.7720773,24.1327551 79.6177149,24.1327551 C77.0138964,24.0864379 74.4621351,23.403307 72.1899986,22.1442846 L72.1899986,26.6972257 C73.7339762,27.4465198 75.7727542,28.2822846 79.559566,28.2822846 C84.9192514,28.2822846 87.045788,25.9175787 87.045788,22.4033434 M87.045788,22.4033434 C87.045788,19.0892257 85.2688582,17.5327551 80.2587795,16.4668728 C77.4915351,15.8615787 76.8215745,15.2566375 76.8215745,14.3919316 C76.8215745,13.297814 77.8118891,12.835814 79.6469677,12.835814 C81.8609059,12.835814 84.0455913,13.4986375 86.1136222,14.4208728 L86.1136222,10.0691081 C84.1306149,9.17615406 81.9709058,8.73311319 79.7925183,8.7724022 C74.8405885,8.7724022 72.2774003,10.9048728 72.2774003,14.3919316"></path>
+      <polygon points="141.129997 9.07000017 141.129997 28.0038825 145.20791 28.0038825 145.20791 13.5657649 146.926691 17.3983531 152.694132 28.0038825 157.820865 28.0038825 157.820865 9.07000017 153.742952 9.07000017 153.742952 21.2891766 152.198975 17.7442355 147.567399 9.07000017"></polygon>
+      <rect x="110.740005" y="9.07000017" width="4.45677247" height="18.9338824"></rect>
+      <path d="M105.600792,22.4033434 C105.600792,19.0892257 103.823862,17.5327551 98.8137836,16.4668728 C96.0465393,15.8615787 95.3765786,15.2566375 95.3765786,14.3919316 C95.3765786,13.297814 96.3668932,12.835814 98.2019718,12.835814 C100.41591,12.835814 102.600595,13.4986375 104.668626,14.4208728 L104.668626,10.0691081 C102.685619,9.17615406 100.52591,8.73311319 98.3475224,8.7724022 C93.3955926,8.7724022 90.8324044,10.9048728 90.8324044,14.3919316 C90.8324044,17.1872257 92.143073,19.4065198 97.2698061,20.3862846 C100.328508,21.0215787 100.969216,21.5100493 100.969216,22.5187551 C100.969216,23.4985198 100.327081,24.1327551 98.172719,24.1327551 C95.5689006,24.0864379 93.0171392,23.403307 90.7450027,22.1442846 L90.7450027,26.6972257 C92.2889803,27.4465198 94.3277584,28.2822846 98.1145702,28.2822846 C103.474256,28.2822846 105.600792,25.9175787 105.600792,22.4033434"></path>
+      <polygon points="37.6599979 9.07000017 37.6599979 28.0038825 46.8204081 28.0038825 48.2627142 23.9115296 42.1456665 23.9115296 42.1456665 9.07000017"></polygon>
+      <polygon points="19.5549984 9.07000017 19.5549984 13.1620002 24.5069282 13.1620002 24.5069282 28.0038825 28.9925967 28.0038825 28.9925967 13.1620002 34.2941332 13.1620002 34.2941332 9.07000017"></polygon>
+      <path d="M13.0573091,9.07000017 L7.17856472,9.07000017 L0.505000114,28.0038825 L5.60141023,28.0038825 L6.54748888,24.815059 C8.877531,25.4919503 11.3551322,25.4919503 13.6851743,24.815059 L14.6312529,28.0038825 L19.7287333,28.0038825 L13.0573091,9.07000017 Z M10.1177585,21.4007061 C9.28758405,21.4006584 8.46168544,21.2831148 7.66516023,21.0516472 L10.1177585,12.7889413 L12.5703569,21.0544708 C11.7736914,21.2849831 10.9477956,21.4015755 10.1177585,21.4007061 L10.1177585,21.4007061 Z"></path>
+      <path d="M62.6019534,9.07000017 L56.7235658,9.07000017 L50.0500011,28.0038825 L55.1474815,28.0038825 L56.0935601,24.815059 C58.4236023,25.4919503 60.9012034,25.4919503 63.2312455,24.815059 L64.1773242,28.0038825 L69.2748045,28.0038825 L62.6019534,9.07000017 Z M59.6627596,21.4007061 C58.8325851,21.4006584 58.0066865,21.2831148 57.2101613,21.0516472 L59.6627596,12.7889413 L62.1153579,21.0544708 C61.3186924,21.2849831 60.4927966,21.4015755 59.6627596,21.4007061 L59.6627596,21.4007061 Z"></path>
+      <path d="M131.256954,9.07000017 L125.378566,9.07000017 L118.705002,28.0038825 L123.802482,28.0038825 L124.748561,24.815059 C127.078603,25.4919503 129.556204,25.4919503 131.886246,24.815059 L132.832325,28.0038825 L137.930162,28.0038825 L131.256954,9.07000017 Z M128.315977,21.4007061 C127.485802,21.4006584 126.659903,21.2831148 125.863378,21.0516472 L128.315977,12.7889413 L130.768575,21.0544708 C129.971909,21.2849831 129.146014,21.4015755 128.315977,21.4007061 L128.315977,21.4007061 Z"></path>
+    </g>
+  </svg>`;
+};
+
 export const AtlassianWordmark = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Atlassian',
   size = defaultLogoParams.size,
   testId,
@@ -27,11 +43,11 @@ export const AtlassianWordmark = ({
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance,
+      textColor
+    }),
     testId: testId,
     textColor: textColor
   });