@atlaskit/logo 13.7.1 → 13.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/logo
 
+## 13.8.0
+
+### Minor Changes
+
+- [`c7c2083475d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7c2083475d) - [ux] - Adds `appearance` prop that allows you to choose between three brand-approved appearances: `brand`, `neutral` and `inverse`. These will be based on design tokens and theme-responsive.
+
+  - Deprecates the `iconColor`, `iconGradientStart`, `iconGradientEnd` and `textColor` props. They will still be supported in the immediate future but the goal is to shift usages towards using the `appearance` prop.
+
 ## 13.7.1
 
 ### Patch Changes

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

@@ -13,39 +13,63 @@ 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,
+      iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor
+  };
   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    <defs>\n      <linearGradient id=\"".concat(id, "\" x1=\"14.8402\" y1=\"15.8324\" x2=\"8.6599\" y2=\"26.5369\" gradientUnits=\"userSpaceOnUse\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"0.9228\"></stop>\n      </linearGradient>\n    </defs>\n    <path fill=\"url(#").concat(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\" />\n    <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\" />\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "atlassianIcon-".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=\"14.8402\" y1=\"15.8324\" x2=\"8.6599\" y2=\"26.5369\" gradientUnits=\"userSpaceOnUse\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"0.9228\"></stop>\n      </linearGradient>\n    </defs>\n    <path fill=\"url(#").concat(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\" />\n    <path fill=\"").concat(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\" />\n  </svg>");
 };
 
-var AtlassianIcon = function AtlassianIcon(_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 ? 'Atlassian' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor,
-      testId = _ref.testId;
+var AtlassianIcon = function AtlassianIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Atlassian' : _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$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,
+      testId = _ref2.testId;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
+    textColor: textColor,
     size: size,
-    testId: testId,
-    textColor: textColor
+    testId: testId
   });
 };
 

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

@@ -13,33 +13,62 @@ 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,
+      iconColor = _ref.iconColor,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"190\" aria-hidden=\"true\"></canvas>\n  <svg viewBox=\"0 0 190 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"99.684716%\" y1=\"15.8138128%\" x2=\"39.8444399%\" y2=\"97.4388388%\" id=\"".concat(id, "\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <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(#").concat(id, ")\"></path>\n      <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>\n      <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>\n      <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>\n      <rect fill=\"inherit\" x=\"142.740005\" y=\"9.07000017\" width=\"4.45677247\" height=\"18.9338824\"></rect>\n      <path d=\"M137.600792,22.4033434 C137.600792,19.0892257 135.823862,17.5327551 130.813784,16.4668728 C128.046539,15.8615787 127.376579,15.2566375 127.376579,14.3919316 C127.376579,13.297814 128.366893,12.835814 130.201972,12.835814 C132.41591,12.835814 134.600595,13.4986375 136.668626,14.4208728 L136.668626,10.0691081 C134.685619,9.17615406 132.52591,8.73311319 130.347522,8.7724022 C125.395593,8.7724022 122.832404,10.9048728 122.832404,14.3919316 C122.832404,17.1872257 124.143073,19.4065198 129.269806,20.3862846 C132.328508,21.0215787 132.969216,21.5100493 132.969216,22.5187551 C132.969216,23.4985198 132.327081,24.1327551 130.172719,24.1327551 C127.568901,24.0864379 125.017139,23.403307 122.745003,22.1442846 L122.745003,26.6972257 C124.28898,27.4465198 126.327758,28.2822846 130.11457,28.2822846 C135.474256,28.2822846 137.600792,25.9175787 137.600792,22.4033434\" fill=\"inherit\"></path>\n      <polygon fill=\"inherit\" points=\"69.6599979 9.07000017 69.6599979 28.0038825 78.8204081 28.0038825 80.2627142 23.9115296 74.1456665 23.9115296 74.1456665 9.07000017\"></polygon>\n      <polygon fill=\"inherit\" points=\"51.5549984 9.07000017 51.5549984 13.1620002 56.5069282 13.1620002 56.5069282 28.0038825 60.9925967 28.0038825 60.9925967 13.1620002 66.2941332 13.1620002 66.2941332 9.07000017\"></polygon>\n      <path d=\"M45.0573091,9.07000017 L39.1785647,9.07000017 L32.5050001,28.0038825 L37.6014102,28.0038825 L38.5474889,24.815059 C40.877531,25.4919503 43.3551322,25.4919503 45.6851743,24.815059 L46.6312529,28.0038825 L51.7287333,28.0038825 L45.0573091,9.07000017 Z M42.1177585,21.4007061 C41.287584,21.4006584 40.4616854,21.2831148 39.6651602,21.0516472 L42.1177585,12.7889413 L44.5703569,21.0544708 C43.7736914,21.2849831 42.9477956,21.4015755 42.1177585,21.4007061 L42.1177585,21.4007061 Z\" fill=\"inherit\"></path>\n      <path d=\"M94.6019534,9.07000017 L88.7235658,9.07000017 L82.0500011,28.0038825 L87.1474815,28.0038825 L88.0935601,24.815059 C90.4236023,25.4919503 92.9012034,25.4919503 95.2312455,24.815059 L96.1773242,28.0038825 L101.274805,28.0038825 L94.6019534,9.07000017 Z M91.6627596,21.4007061 C90.8325851,21.4006584 90.0066865,21.2831148 89.2101613,21.0516472 L91.6627596,12.7889413 L94.1153579,21.0544708 C93.3186924,21.2849831 92.4927966,21.4015755 91.6627596,21.4007061 L91.6627596,21.4007061 Z\" fill=\"inherit\"></path>\n      <path d=\"M163.256954,9.07000017 L157.378566,9.07000017 L150.705002,28.0038825 L155.802482,28.0038825 L156.748561,24.815059 C159.078603,25.4919503 161.556204,25.4919503 163.886246,24.815059 L164.832325,28.0038825 L169.930162,28.0038825 L163.256954,9.07000017 Z M160.315977,21.4007061 C159.485802,21.4006584 158.659903,21.2831148 157.863378,21.0516472 L160.315977,12.7889413 L162.768575,21.0544708 C161.971909,21.2849831 161.146014,21.4015755 160.315977,21.4007061 L160.315977,21.4007061 Z\" fill=\"inherit\"></path>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "atlassianLogo-".concat(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 190 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"99.684716%\" y1=\"15.8138128%\" x2=\"39.8444399%\" y2=\"97.4388388%\" id=\"".concat(id, "\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill=\"").concat(colors.atlassianLogoTextColor, "\" >\n      <path fill=\"url(#").concat(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>\n      <path fill=\"").concat(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>\n      <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>\n      <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>\n      <rect fill=\"inherit\" x=\"142.740005\" y=\"9.07000017\" width=\"4.45677247\" height=\"18.9338824\"></rect>\n      <path d=\"M137.600792,22.4033434 C137.600792,19.0892257 135.823862,17.5327551 130.813784,16.4668728 C128.046539,15.8615787 127.376579,15.2566375 127.376579,14.3919316 C127.376579,13.297814 128.366893,12.835814 130.201972,12.835814 C132.41591,12.835814 134.600595,13.4986375 136.668626,14.4208728 L136.668626,10.0691081 C134.685619,9.17615406 132.52591,8.73311319 130.347522,8.7724022 C125.395593,8.7724022 122.832404,10.9048728 122.832404,14.3919316 C122.832404,17.1872257 124.143073,19.4065198 129.269806,20.3862846 C132.328508,21.0215787 132.969216,21.5100493 132.969216,22.5187551 C132.969216,23.4985198 132.327081,24.1327551 130.172719,24.1327551 C127.568901,24.0864379 125.017139,23.403307 122.745003,22.1442846 L122.745003,26.6972257 C124.28898,27.4465198 126.327758,28.2822846 130.11457,28.2822846 C135.474256,28.2822846 137.600792,25.9175787 137.600792,22.4033434\" fill=\"inherit\"></path>\n      <polygon fill=\"inherit\" points=\"69.6599979 9.07000017 69.6599979 28.0038825 78.8204081 28.0038825 80.2627142 23.9115296 74.1456665 23.9115296 74.1456665 9.07000017\"></polygon>\n      <polygon fill=\"inherit\" points=\"51.5549984 9.07000017 51.5549984 13.1620002 56.5069282 13.1620002 56.5069282 28.0038825 60.9925967 28.0038825 60.9925967 13.1620002 66.2941332 13.1620002 66.2941332 9.07000017\"></polygon>\n      <path d=\"M45.0573091,9.07000017 L39.1785647,9.07000017 L32.5050001,28.0038825 L37.6014102,28.0038825 L38.5474889,24.815059 C40.877531,25.4919503 43.3551322,25.4919503 45.6851743,24.815059 L46.6312529,28.0038825 L51.7287333,28.0038825 L45.0573091,9.07000017 Z M42.1177585,21.4007061 C41.287584,21.4006584 40.4616854,21.2831148 39.6651602,21.0516472 L42.1177585,12.7889413 L44.5703569,21.0544708 C43.7736914,21.2849831 42.9477956,21.4015755 42.1177585,21.4007061 L42.1177585,21.4007061 Z\" fill=\"inherit\"></path>\n      <path d=\"M94.6019534,9.07000017 L88.7235658,9.07000017 L82.0500011,28.0038825 L87.1474815,28.0038825 L88.0935601,24.815059 C90.4236023,25.4919503 92.9012034,25.4919503 95.2312455,24.815059 L96.1773242,28.0038825 L101.274805,28.0038825 L94.6019534,9.07000017 Z M91.6627596,21.4007061 C90.8325851,21.4006584 90.0066865,21.2831148 89.2101613,21.0516472 L91.6627596,12.7889413 L94.1153579,21.0544708 C93.3186924,21.2849831 92.4927966,21.4015755 91.6627596,21.4007061 L91.6627596,21.4007061 Z\" fill=\"inherit\"></path>\n      <path d=\"M163.256954,9.07000017 L157.378566,9.07000017 L150.705002,28.0038825 L155.802482,28.0038825 L156.748561,24.815059 C159.078603,25.4919503 161.556204,25.4919503 163.886246,24.815059 L164.832325,28.0038825 L169.930162,28.0038825 L163.256954,9.07000017 Z M160.315977,21.4007061 C159.485802,21.4006584 158.659903,21.2831148 157.863378,21.0516472 L160.315977,12.7889413 L162.768575,21.0544708 C161.971909,21.2849831 161.146014,21.4015755 160.315977,21.4007061 L160.315977,21.4007061 Z\" fill=\"inherit\"></path>\n    </g>\n  </svg>");
 };
 
-var AtlassianLogo = function AtlassianLogo(_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 ? 'Atlassian' : _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 AtlassianLogo = function AtlassianLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Atlassian' : _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,
+      textColor: textColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -11,32 +11,43 @@ 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=\"158\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 158 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">>\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\" fill=\"inherit\">\n    <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>\n    <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>\n    <rect x=\"110.740005\" y=\"9.07000017\" width=\"4.45677247\" height=\"18.9338824\"></rect>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n  </g>\n</svg>";
-
-var AtlassianWordmark = function AtlassianWordmark(_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 ? 'Atlassian' : _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,
+    // We treat the word "Atlassian" differently to normal product logos
+    atlassianLogoTextColor: textColor
+  };
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 158 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\" fill=\"".concat(colors.atlassianLogoTextColor, "\">\n      <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>\n      <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>\n      <rect x=\"110.740005\" y=\"9.07000017\" width=\"4.45677247\" height=\"18.9338824\"></rect>\n      <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>\n      <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>\n      <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>\n      <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>\n      <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>\n      <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>\n    </g>\n  </svg>");
+};
+
+var AtlassianWordmark = function AtlassianWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Atlassian' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -13,36 +13,67 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
-var svg = function svg(iconGradientStart, iconGradientStop) {
+/* eslint-disable max-len */
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      iconColor = _ref.iconColor,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor,
+    // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
+    atlassianLogoTextColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"270\" aria-hidden=\"true\"></canvas>\n<svg\n  fill=\"none\"\n  viewBox=\"0 0 270 32\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  focusable=\"false\"\n  aria-hidden=\"true\"\n>\n  <linearGradient\n    id=\"".concat(id, "\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"9.85184\"\n    x2=\"3.72154\"\n    y1=\"13.0072\"\n    y2=\"23.6252\"\n  >\n    <stop offset=\"0\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n    <stop offset=\"92%\" stop-color=\"").concat(iconGradientStop, "\" />\n  </linearGradient>\n  <g>\n    <path\n      d=\"m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z\"\n      fill=\"url(#").concat(id, ")\"\n    />\n    <path\n      fill=\"currentColor\"\n      d=\"m10.9326.649949c-1.44794 2.227461-2.29174 4.793151-2.4486 7.445211-.15685 2.65204.37864 5.29934 1.5539 7.68194l3.8972 7.798c.0579.1154.1469.2124.2569.28.11.0677.2367.1033.3658.1029h8.0878c.1182.0004.2346-.0295.3379-.0868.1033-.0574.1902-.1403.2523-.2409.0621-.1005.0974-.2153.1025-.3334.0051-.118-.0203-.2355-.0735-.3409l-11.1513-22.309629c-.0537-.111145-.1377-.204841-.2424-.270285-.1047-.065443-.2257-.099968-.3492-.099594-.1234.000374-.2442.035633-.3485.101709-.1043.066077-.1878.16028-.2408.271748z\"\n    />\n    <g fill=\"").concat(iconGradientStart, "\">\n      <path\n        clip-rule=\"evenodd\"\n        d=\"m139.715 18.207c0-3.4105-1.807-5.0102-6.906-6.1088-2.82-.6227-3.5-1.2454-3.5-2.14723 0-1.12729 1.009-1.60326 2.863-1.60326 2.251 0 4.477.68353 6.581 1.63189v-4.46263c-2.021-.92008-4.222-1.37618-6.442-1.33486-5.042 0-7.651 2.19374-7.651 5.78317 0 2.86292 1.335 5.15692 6.553 6.16612 3.113.6513 3.768 1.1559 3.768 2.1937s-.655 1.6605-2.863 1.6605c-2.651-.0477-5.249-.751-7.562-2.047v4.6881c1.575.7694 3.65 1.6283 7.515 1.6283 5.454 0 7.619-2.4299 7.619-6.048zm-25.788-6.1088c5.1 1.0987 6.911 2.6983 6.911 6.1088 0 3.6181-2.165 6.048-7.623 6.048-3.868 0-5.944-.8589-7.515-1.6283v-4.6881c2.309 1.2953 4.904 1.9986 7.551 2.047 2.212 0 2.863-.6227 2.863-1.6605s-.651-1.5424-3.765-2.1937c-5.213-1.0083-6.55-3.299-6.552-6.15828l-.015-.00783c0-3.58943 2.609-5.78317 7.652-5.78317 2.219-.04048 4.42.41558 6.441 1.33485v4.46263c-2.108-.94835-4.33-1.63188-6.585-1.63188-1.853 0-2.863.47597-2.863 1.60326 0 .90182.684 1.52452 3.5 2.14722zm61.966-7.61904v19.47884h4.151v-14.85517l1.75 3.94377 5.869 10.9114h5.221v-19.47884h-4.155v12.57194l-1.571-3.6467-4.713-8.92524zm-30.942 0h4.538v19.48244h-4.538zm-74.3973 19.47884v-19.47884h4.5664v15.27024h6.227l-1.4709 4.2086zm-18.4231-19.47884v4.20854h5.0388v15.2703h4.5664v-15.2703h5.3967v-4.20854zm-12.6077-.00716h5.9836l6.7888 19.4788h-5.1927l-.9627-3.2781c-2.3714.6969-4.8933.6969-7.2647 0l-.9627 3.2781h-5.1891zm.4867 12.3286c.8135.239 1.6572.3595 2.5051.3579v.0071c.8482-.001 1.6919-.124 2.5051-.365l-2.5051-8.50298zm55.9457-12.3286h-6.0015l-6.7995 19.4788h5.1891l.9627-3.2781c2.3725.6976 4.8957.6976 7.2683 0l.9627 3.2781h5.1889zm-2.9954 12.6936c-.8479.0017-1.6916-.1189-2.5051-.3578l2.5051-8.50302 2.5051 8.50302c-.8135.2388-1.6572.3594-2.5051.3578zm66.8931-12.6936h5.969l6.8 19.4788h-5.19l-.962-3.2781c-2.372.6969-4.894.6969-7.265 0l-.963 3.2781h-5.189zm.472 12.3286c.814.2384 1.657.3589 2.505.3579l.015.0071c.843-.0026 1.682-.1255 2.49-.365l-2.505-8.50298z\"\n        fill-rule=\"evenodd\"\n      />\n    </g>\n    <g fill=\"inherit\">\n      <path\n        clip-rule=\"evenodd\"\n        d=\"m210.985 24.2765c-4.047 0-5.926-.7981-7.551-1.6247v-2.931c1.943 1.0199 4.939 1.75 7.709 1.75 3.152 0 4.333-1.2418 4.333-3.0884s-1.148-2.8164-5.131-3.7899c-4.714-1.1487-6.8-2.7734-6.8-6.21257 0-3.24945 2.487-5.67223 7.361-5.67223 3.024 0 4.968.71574 6.403 1.52811v2.86295c-1.997-1.10283-4.251-1.65375-6.531-1.5961-2.738 0-4.363.95909-4.363 2.86296 0 1.71778 1.339 2.58028 5.032 3.50358 4.427 1.1129 6.914 2.548 6.914 6.3056-.018 3.6467-2.183 6.1017-7.376 6.1017zm17.042-2.8987c.579-.0169 1.154-.0924 1.718-.2255v2.6447c-.6.1729-1.222.2585-1.847.254-3.407 0-5.064-2.004-5.064-4.9672v-8.5065h-2.58v-2.54807h2.58v-3.37829h2.674v3.37829h4.237v2.54807h-4.237v8.4421c0 1.4028.83 2.3584 2.519 2.3584zm10.017 2.8987c2.437 0 4.348-1.0844 5.368-3.1851l.014 2.8666h2.741v-15.92879h-2.741v2.80209c-.955-2.07203-2.738-3.12059-5.064-3.12059-4.462 0-6.692 3.78979-6.692 8.28109 0 4.6845 2.137 8.2847 6.374 8.2847zm5.368-7.6477c0 3.5358-2.197 5.0997-4.652 5.0997-2.835 0-4.363-1.9146-4.363-5.7438 0-3.6861 1.593-5.726 4.685-5.726 2.322 0 4.33 1.5604 4.33 5.0961zm9.555 7.3292h-2.688v-15.92878h2.674v2.80208c.926-1.87878 2.505-3.22079 5.64-3.02754v2.67684c-3.504-.3578-5.64.7158-5.64 4.0797zm16.025-2.8057c-.564.1328-1.141.2083-1.721.2255-1.689 0-2.516-.9556-2.516-2.3584v-8.4421h4.248v-2.54807h-4.237v-3.37829h-2.677v3.37829h-2.591v2.54807h2.58v8.5065c0 2.9632 1.657 4.9672 5.064 4.9672.626.0042 1.249-.0814 1.85-.254z\"\n        fill-rule=\"evenodd\"\n      />\n    </g>\n  </g>\n</svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "atlassianLogo-".concat(appearance);
+  }
+
+  return "\n<svg fill=\"none\" viewBox=\"0 0 270 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\"2>\n  <defs>\n    <linearGradient\n      id=\"".concat(id, "\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"9.85184\"\n      x2=\"3.72154\"\n      y1=\"13.0072\"\n      y2=\"23.6252\"\n    >\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"92%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n    </linearGradient>\n  </defs>\n  <g>\n    <path\n      d=\"m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z\"\n      fill=\"url(#").concat(id, ")\"\n    />\n    <path\n      fill=\"").concat(colors.iconColor, "\"\n      d=\"m10.9326.649949c-1.44794 2.227461-2.29174 4.793151-2.4486 7.445211-.15685 2.65204.37864 5.29934 1.5539 7.68194l3.8972 7.798c.0579.1154.1469.2124.2569.28.11.0677.2367.1033.3658.1029h8.0878c.1182.0004.2346-.0295.3379-.0868.1033-.0574.1902-.1403.2523-.2409.0621-.1005.0974-.2153.1025-.3334.0051-.118-.0203-.2355-.0735-.3409l-11.1513-22.309629c-.0537-.111145-.1377-.204841-.2424-.270285-.1047-.065443-.2257-.099968-.3492-.099594-.1234.000374-.2442.035633-.3485.101709-.1043.066077-.1878.16028-.2408.271748z\"\n    />\n    <g fill=\"").concat(colors.atlassianLogoTextColor, "\">\n      <path\n        clip-rule=\"evenodd\"\n        d=\"m139.715 18.207c0-3.4105-1.807-5.0102-6.906-6.1088-2.82-.6227-3.5-1.2454-3.5-2.14723 0-1.12729 1.009-1.60326 2.863-1.60326 2.251 0 4.477.68353 6.581 1.63189v-4.46263c-2.021-.92008-4.222-1.37618-6.442-1.33486-5.042 0-7.651 2.19374-7.651 5.78317 0 2.86292 1.335 5.15692 6.553 6.16612 3.113.6513 3.768 1.1559 3.768 2.1937s-.655 1.6605-2.863 1.6605c-2.651-.0477-5.249-.751-7.562-2.047v4.6881c1.575.7694 3.65 1.6283 7.515 1.6283 5.454 0 7.619-2.4299 7.619-6.048zm-25.788-6.1088c5.1 1.0987 6.911 2.6983 6.911 6.1088 0 3.6181-2.165 6.048-7.623 6.048-3.868 0-5.944-.8589-7.515-1.6283v-4.6881c2.309 1.2953 4.904 1.9986 7.551 2.047 2.212 0 2.863-.6227 2.863-1.6605s-.651-1.5424-3.765-2.1937c-5.213-1.0083-6.55-3.299-6.552-6.15828l-.015-.00783c0-3.58943 2.609-5.78317 7.652-5.78317 2.219-.04048 4.42.41558 6.441 1.33485v4.46263c-2.108-.94835-4.33-1.63188-6.585-1.63188-1.853 0-2.863.47597-2.863 1.60326 0 .90182.684 1.52452 3.5 2.14722zm61.966-7.61904v19.47884h4.151v-14.85517l1.75 3.94377 5.869 10.9114h5.221v-19.47884h-4.155v12.57194l-1.571-3.6467-4.713-8.92524zm-30.942 0h4.538v19.48244h-4.538zm-74.3973 19.47884v-19.47884h4.5664v15.27024h6.227l-1.4709 4.2086zm-18.4231-19.47884v4.20854h5.0388v15.2703h4.5664v-15.2703h5.3967v-4.20854zm-12.6077-.00716h5.9836l6.7888 19.4788h-5.1927l-.9627-3.2781c-2.3714.6969-4.8933.6969-7.2647 0l-.9627 3.2781h-5.1891zm.4867 12.3286c.8135.239 1.6572.3595 2.5051.3579v.0071c.8482-.001 1.6919-.124 2.5051-.365l-2.5051-8.50298zm55.9457-12.3286h-6.0015l-6.7995 19.4788h5.1891l.9627-3.2781c2.3725.6976 4.8957.6976 7.2683 0l.9627 3.2781h5.1889zm-2.9954 12.6936c-.8479.0017-1.6916-.1189-2.5051-.3578l2.5051-8.50302 2.5051 8.50302c-.8135.2388-1.6572.3594-2.5051.3578zm66.8931-12.6936h5.969l6.8 19.4788h-5.19l-.962-3.2781c-2.372.6969-4.894.6969-7.265 0l-.963 3.2781h-5.189zm.472 12.3286c.814.2384 1.657.3589 2.505.3579l.015.0071c.843-.0026 1.682-.1255 2.49-.365l-2.505-8.50298z\"\n        fill-rule=\"evenodd\"\n      />\n    </g>\n    <g fill=\"").concat(colors.textColor, "\">\n      <path\n        clip-rule=\"evenodd\"\n        d=\"m210.985 24.2765c-4.047 0-5.926-.7981-7.551-1.6247v-2.931c1.943 1.0199 4.939 1.75 7.709 1.75 3.152 0 4.333-1.2418 4.333-3.0884s-1.148-2.8164-5.131-3.7899c-4.714-1.1487-6.8-2.7734-6.8-6.21257 0-3.24945 2.487-5.67223 7.361-5.67223 3.024 0 4.968.71574 6.403 1.52811v2.86295c-1.997-1.10283-4.251-1.65375-6.531-1.5961-2.738 0-4.363.95909-4.363 2.86296 0 1.71778 1.339 2.58028 5.032 3.50358 4.427 1.1129 6.914 2.548 6.914 6.3056-.018 3.6467-2.183 6.1017-7.376 6.1017zm17.042-2.8987c.579-.0169 1.154-.0924 1.718-.2255v2.6447c-.6.1729-1.222.2585-1.847.254-3.407 0-5.064-2.004-5.064-4.9672v-8.5065h-2.58v-2.54807h2.58v-3.37829h2.674v3.37829h4.237v2.54807h-4.237v8.4421c0 1.4028.83 2.3584 2.519 2.3584zm10.017 2.8987c2.437 0 4.348-1.0844 5.368-3.1851l.014 2.8666h2.741v-15.92879h-2.741v2.80209c-.955-2.07203-2.738-3.12059-5.064-3.12059-4.462 0-6.692 3.78979-6.692 8.28109 0 4.6845 2.137 8.2847 6.374 8.2847zm5.368-7.6477c0 3.5358-2.197 5.0997-4.652 5.0997-2.835 0-4.363-1.9146-4.363-5.7438 0-3.6861 1.593-5.726 4.685-5.726 2.322 0 4.33 1.5604 4.33 5.0961zm9.555 7.3292h-2.688v-15.92878h2.674v2.80208c.926-1.87878 2.505-3.22079 5.64-3.02754v2.67684c-3.504-.3578-5.64.7158-5.64 4.0797zm16.025-2.8057c-.564.1328-1.141.2083-1.721.2255-1.689 0-2.516-.9556-2.516-2.3584v-8.4421h4.248v-2.54807h-4.237v-3.37829h-2.677v3.37829h-2.591v2.54807h2.58v8.5065c0 2.9632 1.657 4.9672 5.064 4.9672.626.0042 1.249-.0814 1.85-.254z\"\n        fill-rule=\"evenodd\"\n      />\n    </g>\n  </g>\n</svg>");
 };
 
-var AtlassianStartLogo = function AtlassianStartLogo(_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 ? 'Atlassian Start' : _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 AtlassianStartLogo = function AtlassianStartLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Atlassian Start' : _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,
+      label: label,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -13,33 +13,57 @@ 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,
+      iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor
+  };
   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    <defs>\n      <linearGradient x1=\"100%\" x2=\"45.339%\" y1=\"29.23%\" y2=\"75.038%\" id=\"".concat(id, "\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path d=\"M4.78580435,5 C4.55423538,4.99701333 4.33319771,5.09657765 4.18198458,5.27198488 C4.03077145,5.44739211 3.96486141,5.68068714 4.00193478,5.9092887 L7.32946109,26.1096074 C7.3703589,26.355373 7.49665951,26.578828 7.68612174,26.7406224 C7.87680866,26.9055104 8.11992598,26.9972003 8.37200761,26.9992993 L14.5488998,19.5995707 L13.6827239,19.5995707 L12.3227102,12.3958093 L27.3886833,12.3958093 L28.4469072,5.91712739 C28.4862006,5.68935393 28.4229655,5.45584955 28.2741046,5.27903 C28.1252437,5.10221045 27.9059335,5.00010264 27.6747957,5 L4.78580435,5 Z\" fill=\"currentColor\"/>\n      <path fill=\"url(#").concat(id, ")\" d=\"M27.3886833,12.3958093 L20.0320674,12.3958093 L18.7974728,19.5995707 L13.7023207,19.5995707 L7.68612174,26.7445417 C7.87680866,26.9094297 8.11992598,27.0011197 8.37200761,27.0032187 L24.3394307,27.0032187 C24.727754,27.0082167 25.0611955,26.7281258 25.1233002,26.3447683 L27.3886833,12.3958093 Z\"/>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "bitbucketIcon-".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=\"100%\" x2=\"45.339%\" y1=\"29.23%\" y2=\"75.038%\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path fill=\"").concat(colors.iconColor, "\" d=\"M4.78580435,5 C4.55423538,4.99701333 4.33319771,5.09657765 4.18198458,5.27198488 C4.03077145,5.44739211 3.96486141,5.68068714 4.00193478,5.9092887 L7.32946109,26.1096074 C7.3703589,26.355373 7.49665951,26.578828 7.68612174,26.7406224 C7.87680866,26.9055104 8.11992598,26.9972003 8.37200761,26.9992993 L14.5488998,19.5995707 L13.6827239,19.5995707 L12.3227102,12.3958093 L27.3886833,12.3958093 L28.4469072,5.91712739 C28.4862006,5.68935393 28.4229655,5.45584955 28.2741046,5.27903 C28.1252437,5.10221045 27.9059335,5.00010264 27.6747957,5 L4.78580435,5 Z\" />\n      <path fill=\"url(#").concat(id, ")\" d=\"M27.3886833,12.3958093 L20.0320674,12.3958093 L18.7974728,19.5995707 L13.7023207,19.5995707 L7.68612174,26.7445417 C7.87680866,26.9094297 8.11992598,27.0011197 8.37200761,27.0032187 L24.3394307,27.0032187 C24.727754,27.0082167 25.0611955,26.7281258 25.1233002,26.3447683 L27.3886833,12.3958093 Z\"/>\n    </g>\n  </svg>");
 };
 
-var BitbucketIcon = function BitbucketIcon(_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 ? 'Bitbucket' : _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 BitbucketIcon = function BitbucketIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Bitbucket' : _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
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -13,37 +13,64 @@ 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,
+      iconColor = _ref.iconColor,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"137\" aria-hidden=\"true\"></canvas>\n  <svg viewBox=\"0 0 137 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"100.866322%\" y1=\"25.6261254%\" x2=\"46.5685299%\" y2=\"75.2076031%\" id=\"".concat(id, "\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n      <path d=\"M22.38125,13.1176316 L15.3425,13.1176316 L14.16125,20.0504386 L9.28624997,20.0504386 L3.52999997,26.9266667 C3.71244766,27.0853527 3.94506033,27.173594 4.18624997,27.175614 L19.46375,27.175614 C19.8352946,27.180424 20.1543287,26.9108682 20.21375,26.5419298 L22.38125,13.1176316 Z\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"></path>\n      <path d=\"M0.759678147,6 C0.53811485,5.99712567 0.326627812,6.09294508 0.181948325,6.26175474 C0.0372688368,6.4305644 -0.0257933559,6.65508453 0.00967814748,6.87508772 L3.19342815,26.315614 C3.23255884,26.5521357 3.35340224,26.7671859 3.53467815,26.9228947 L3.53467815,26.9228947 C3.71712584,27.0815808 3.94973851,27.169822 4.19092815,27.1718421 L10.1009281,20.0504386 L9.27217815,20.0504386 L7.97092815,13.1176316 L22.3859281,13.1176316 L23.3984281,6.88263158 C23.4360238,6.66342534 23.375521,6.43870373 23.2330921,6.26853487 C23.0906632,6.09836602 22.880829,6.00009878 22.6596781,6 L0.759678147,6 Z\" fill=\"currentColor\" fill-rule=\"nonzero\"></path>\n      <path d=\"M32,8.352 L38.63,8.352 C42.114,8.352 43.804,10.068 43.804,12.824 C43.804,14.878 42.868,16.152 40.944,16.62 C43.466,17.036 44.714,18.414 44.714,20.832 C44.714,23.562 42.868,25.434 39.046,25.434 L32,25.434 L32,8.352 Z M38.318,10.588 L34.34,10.588 L34.34,15.684 L38.318,15.684 C40.528,15.684 41.438,14.67 41.438,13.032 C41.438,11.368 40.45,10.588 38.318,10.588 Z M39.072,17.764 L34.34,17.764 L34.34,23.094 L39.124,23.094 C41.36,23.094 42.374,22.288 42.374,20.572 C42.374,18.752 41.412,17.764 39.072,17.764 Z M47.236,9.002 C47.236,9.99 47.886,10.562 48.796,10.562 C49.706,10.562 50.356,9.99 50.356,9.002 C50.356,8.014 49.706,7.442 48.796,7.442 C47.886,7.442 47.236,8.014 47.236,9.002 Z M47.652,25.434 L49.888,25.434 L49.888,12.434 L47.652,12.434 L47.652,25.434 Z M56.362,21.326 L56.362,14.514 L59.82,14.514 L59.82,12.434 L56.362,12.434 L56.362,9.678 L54.178,9.678 L54.178,12.434 L52.072,12.434 L52.072,14.514 L54.178,14.514 L54.178,21.378 C54.178,23.796 55.53,25.434 58.312,25.434 C58.988,25.434 59.43,25.33 59.82,25.226 L59.82,23.068 C59.43,23.146 58.936,23.25 58.416,23.25 C57.038,23.25 56.362,22.47 56.362,21.326 Z M74.51,18.934 C74.51,22.6 72.69,25.694 69.05,25.694 C67.152,25.694 65.696,24.836 64.916,23.146 L64.916,25.434 L62.68,25.434 L62.68,7 L64.916,7 L64.916,14.774 C65.748,13.058 67.308,12.174 69.31,12.174 C72.768,12.174 74.51,15.112 74.51,18.934 Z M72.274,18.934 C72.274,15.814 71.026,14.254 68.712,14.254 C66.71,14.254 64.916,15.528 64.916,18.414 L64.916,19.454 C64.916,22.34 66.554,23.614 68.452,23.614 C70.974,23.614 72.274,21.95 72.274,18.934 Z M76.85,20.052 C76.85,23.64 78.566,25.694 81.556,25.694 C83.298,25.694 84.832,24.836 85.664,23.302 L85.664,25.434 L87.9,25.434 L87.9,12.434 L85.664,12.434 L85.664,19.662 C85.664,22.288 84.234,23.666 82.154,23.666 C80.022,23.666 79.086,22.626 79.086,20.286 L79.086,12.434 L76.85,12.434 L76.85,20.052 Z M100.458,23.094 C99.652,23.38 98.82,23.562 97.494,23.562 C94.088,23.562 92.684,21.43 92.684,18.908 C92.684,16.386 94.062,14.254 97.442,14.254 C98.664,14.254 99.548,14.488 100.38,14.878 L100.38,12.798 C99.366,12.33 98.456,12.174 97.286,12.174 C92.658,12.174 90.5,14.982 90.5,18.908 C90.5,22.886 92.658,25.694 97.286,25.694 C98.482,25.694 99.678,25.512 100.458,25.096 L100.458,23.094 Z M105.242,25.434 L105.242,19.35 L110.962,25.434 L114.004,25.434 L107.634,18.83 L113.744,12.434 L110.832,12.434 L105.242,18.518 L105.242,7 L103.006,7 L103.006,25.434 L105.242,25.434 Z M126.224,24.914 C125.158,25.486 123.52,25.694 122.194,25.694 C117.332,25.694 115.2,22.886 115.2,18.908 C115.2,14.982 117.384,12.174 121.336,12.174 C125.34,12.174 126.952,14.956 126.952,18.908 L126.952,19.922 L117.462,19.922 C117.774,22.132 119.204,23.562 122.272,23.562 C123.78,23.562 125.054,23.276 126.224,22.86 L126.224,24.914 Z M121.232,14.202 C118.866,14.202 117.67,15.736 117.436,17.998 L124.69,17.998 C124.56,15.58 123.468,14.202 121.232,14.202 Z M132.698,21.326 L132.698,14.514 L136.156,14.514 L136.156,12.434 L132.698,12.434 L132.698,9.678 L130.514,9.678 L130.514,12.434 L128.408,12.434 L128.408,14.514 L130.514,14.514 L130.514,21.378 C130.514,23.796 131.866,25.434 134.648,25.434 C135.324,25.434 135.766,25.33 136.156,25.226 L136.156,23.068 C135.766,23.146 135.272,23.25 134.752,23.25 C133.374,23.25 132.698,22.47 132.698,21.326 Z\" fill=\"inherit\"></path>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "bitbucketLogo-".concat(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 137 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"100.866322%\" y1=\"25.6261254%\" x2=\"46.5685299%\" y2=\"75.2076031%\" id=\"".concat(id, "\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n      <path d=\"M22.38125,13.1176316 L15.3425,13.1176316 L14.16125,20.0504386 L9.28624997,20.0504386 L3.52999997,26.9266667 C3.71244766,27.0853527 3.94506033,27.173594 4.18624997,27.175614 L19.46375,27.175614 C19.8352946,27.180424 20.1543287,26.9108682 20.21375,26.5419298 L22.38125,13.1176316 Z\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"></path>\n      <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M0.759678147,6 C0.53811485,5.99712567 0.326627812,6.09294508 0.181948325,6.26175474 C0.0372688368,6.4305644 -0.0257933559,6.65508453 0.00967814748,6.87508772 L3.19342815,26.315614 C3.23255884,26.5521357 3.35340224,26.7671859 3.53467815,26.9228947 L3.53467815,26.9228947 C3.71712584,27.0815808 3.94973851,27.169822 4.19092815,27.1718421 L10.1009281,20.0504386 L9.27217815,20.0504386 L7.97092815,13.1176316 L22.3859281,13.1176316 L23.3984281,6.88263158 C23.4360238,6.66342534 23.375521,6.43870373 23.2330921,6.26853487 C23.0906632,6.09836602 22.880829,6.00009878 22.6596781,6 L0.759678147,6 Z\"></path>\n      <path fill=\"").concat(colors.textColor, "\" d=\"M32,8.352 L38.63,8.352 C42.114,8.352 43.804,10.068 43.804,12.824 C43.804,14.878 42.868,16.152 40.944,16.62 C43.466,17.036 44.714,18.414 44.714,20.832 C44.714,23.562 42.868,25.434 39.046,25.434 L32,25.434 L32,8.352 Z M38.318,10.588 L34.34,10.588 L34.34,15.684 L38.318,15.684 C40.528,15.684 41.438,14.67 41.438,13.032 C41.438,11.368 40.45,10.588 38.318,10.588 Z M39.072,17.764 L34.34,17.764 L34.34,23.094 L39.124,23.094 C41.36,23.094 42.374,22.288 42.374,20.572 C42.374,18.752 41.412,17.764 39.072,17.764 Z M47.236,9.002 C47.236,9.99 47.886,10.562 48.796,10.562 C49.706,10.562 50.356,9.99 50.356,9.002 C50.356,8.014 49.706,7.442 48.796,7.442 C47.886,7.442 47.236,8.014 47.236,9.002 Z M47.652,25.434 L49.888,25.434 L49.888,12.434 L47.652,12.434 L47.652,25.434 Z M56.362,21.326 L56.362,14.514 L59.82,14.514 L59.82,12.434 L56.362,12.434 L56.362,9.678 L54.178,9.678 L54.178,12.434 L52.072,12.434 L52.072,14.514 L54.178,14.514 L54.178,21.378 C54.178,23.796 55.53,25.434 58.312,25.434 C58.988,25.434 59.43,25.33 59.82,25.226 L59.82,23.068 C59.43,23.146 58.936,23.25 58.416,23.25 C57.038,23.25 56.362,22.47 56.362,21.326 Z M74.51,18.934 C74.51,22.6 72.69,25.694 69.05,25.694 C67.152,25.694 65.696,24.836 64.916,23.146 L64.916,25.434 L62.68,25.434 L62.68,7 L64.916,7 L64.916,14.774 C65.748,13.058 67.308,12.174 69.31,12.174 C72.768,12.174 74.51,15.112 74.51,18.934 Z M72.274,18.934 C72.274,15.814 71.026,14.254 68.712,14.254 C66.71,14.254 64.916,15.528 64.916,18.414 L64.916,19.454 C64.916,22.34 66.554,23.614 68.452,23.614 C70.974,23.614 72.274,21.95 72.274,18.934 Z M76.85,20.052 C76.85,23.64 78.566,25.694 81.556,25.694 C83.298,25.694 84.832,24.836 85.664,23.302 L85.664,25.434 L87.9,25.434 L87.9,12.434 L85.664,12.434 L85.664,19.662 C85.664,22.288 84.234,23.666 82.154,23.666 C80.022,23.666 79.086,22.626 79.086,20.286 L79.086,12.434 L76.85,12.434 L76.85,20.052 Z M100.458,23.094 C99.652,23.38 98.82,23.562 97.494,23.562 C94.088,23.562 92.684,21.43 92.684,18.908 C92.684,16.386 94.062,14.254 97.442,14.254 C98.664,14.254 99.548,14.488 100.38,14.878 L100.38,12.798 C99.366,12.33 98.456,12.174 97.286,12.174 C92.658,12.174 90.5,14.982 90.5,18.908 C90.5,22.886 92.658,25.694 97.286,25.694 C98.482,25.694 99.678,25.512 100.458,25.096 L100.458,23.094 Z M105.242,25.434 L105.242,19.35 L110.962,25.434 L114.004,25.434 L107.634,18.83 L113.744,12.434 L110.832,12.434 L105.242,18.518 L105.242,7 L103.006,7 L103.006,25.434 L105.242,25.434 Z M126.224,24.914 C125.158,25.486 123.52,25.694 122.194,25.694 C117.332,25.694 115.2,22.886 115.2,18.908 C115.2,14.982 117.384,12.174 121.336,12.174 C125.34,12.174 126.952,14.956 126.952,18.908 L126.952,19.922 L117.462,19.922 C117.774,22.132 119.204,23.562 122.272,23.562 C123.78,23.562 125.054,23.276 126.224,22.86 L126.224,24.914 Z M121.232,14.202 C118.866,14.202 117.67,15.736 117.436,17.998 L124.69,17.998 C124.56,15.58 123.468,14.202 121.232,14.202 Z M132.698,21.326 L132.698,14.514 L136.156,14.514 L136.156,12.434 L132.698,12.434 L132.698,9.678 L130.514,9.678 L130.514,12.434 L128.408,12.434 L128.408,14.514 L130.514,14.514 L130.514,21.378 C130.514,23.796 131.866,25.434 134.648,25.434 C135.324,25.434 135.766,25.33 136.156,25.226 L136.156,23.068 C135.766,23.146 135.272,23.25 134.752,23.25 C133.374,23.25 132.698,22.47 132.698,21.326 Z\"></path>\n    </g>\n  </svg>");
 };
 
-var BitbucketLogo = function BitbucketLogo(_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 ? 'Bitbucket' : _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 BitbucketLogo = function BitbucketLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Bitbucket' : _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,
+      iconColor: iconColor,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });