@atlaskit/logo 13.7.1 → 13.8.2

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

@@ -13,37 +13,77 @@ 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
+  }; // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<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    <defs>\n      <linearGradient x1=\"99.140087%\" y1=\"112.745465%\" x2=\"33.8589812%\" y2=\"37.7675389%\" id=\"".concat(id, "-1\">\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      <linearGradient x1=\"14.1838118%\" y1=\"5.80047897%\" x2=\"61.141783%\" y2=\"70.9663868%\" id=\"").concat(id, "-2\">\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=\"M45.312,20.984 C44.064,21.608 42.66,22.024 40.866,22.024 C36.81,22.024 34.34,19.424 34.34,15.498 C34.34,11.572 36.732,8.92 40.736,8.92 C42.712,8.92 44.064,9.336 45.286,10.116 L45.286,7.854 C44.064,6.97 42.4,6.658 40.736,6.658 C35.172,6.658 32,10.298 32,15.498 C32,20.88 35.172,24.26 40.788,24.26 C42.556,24.26 44.246,23.948 45.312,23.246 L45.312,20.984 Z M53.918,24.26 C50.018,24.26 47.73,21.374 47.73,17.474 C47.73,13.574 50.018,10.74 53.918,10.74 C57.792,10.74 60.054,13.574 60.054,17.474 C60.054,21.374 57.792,24.26 53.918,24.26 Z M53.918,12.82 C51.136,12.82 49.914,15.004 49.914,17.474 C49.914,19.944 51.136,22.18 53.918,22.18 C56.674,22.18 57.87,19.944 57.87,17.474 C57.87,15.004 56.674,12.82 53.918,12.82 Z M73.704,16.382 C73.704,12.794 71.988,10.74 68.998,10.74 C67.256,10.74 65.722,11.598 64.89,13.132 L64.89,11 L62.654,11 L62.654,24 L64.89,24 L64.89,16.772 C64.89,14.146 66.32,12.768 68.4,12.768 C70.532,12.768 71.468,13.808 71.468,16.148 L71.468,24 L73.704,24 L73.704,16.382 Z M79.918,9.622 C79.918,8.452 80.594,7.646 81.972,7.646 C82.492,7.646 82.986,7.698 83.376,7.776 L83.376,5.722 C82.986,5.618 82.544,5.514 81.868,5.514 C79.086,5.514 77.734,7.152 77.734,9.57 L77.734,11 L75.628,11 L75.628,13.08 L77.734,13.08 L77.734,24 L79.918,24 L79.918,13.08 L83.272,13.08 L83.272,11 L79.918,11 L79.918,9.622 Z M90.318,23.974 L90.318,21.972 C90.058,21.998 89.902,21.998 89.668,21.998 C88.706,21.998 87.926,21.582 87.926,20.412 L87.926,5.566 L85.69,5.566 L85.69,20.672 C85.69,23.064 87.042,24.078 89.174,24.078 C89.746,24.078 90.136,24.026 90.318,23.974 Z M92.216,18.618 C92.216,22.206 93.932,24.26 96.922,24.26 C98.664,24.26 100.198,23.402 101.03,21.868 L101.03,24 L103.266,24 L103.266,11 L101.03,11 L101.03,18.228 C101.03,20.854 99.6,22.232 97.52,22.232 C95.388,22.232 94.452,21.192 94.452,18.852 L94.452,11 L92.216,11 L92.216,18.618 Z M116.89,23.48 C115.824,24.052 114.186,24.26 112.86,24.26 C107.998,24.26 105.866,21.452 105.866,17.474 C105.866,13.548 108.05,10.74 112.002,10.74 C116.006,10.74 117.618,13.522 117.618,17.474 L117.618,18.488 L108.128,18.488 C108.44,20.698 109.87,22.128 112.938,22.128 C114.446,22.128 115.72,21.842 116.89,21.426 L116.89,23.48 Z M111.898,12.768 C109.532,12.768 108.336,14.302 108.102,16.564 L115.356,16.564 C115.226,14.146 114.134,12.768 111.898,12.768 Z M131.32,16.382 C131.32,12.794 129.604,10.74 126.614,10.74 C124.872,10.74 123.338,11.598 122.506,13.132 L122.506,11 L120.27,11 L120.27,24 L122.506,24 L122.506,16.772 C122.506,14.146 123.936,12.768 126.016,12.768 C128.148,12.768 129.084,13.808 129.084,16.148 L129.084,24 L131.32,24 L131.32,16.382 Z M143.618,21.66 C142.812,21.946 141.98,22.128 140.654,22.128 C137.248,22.128 135.844,19.996 135.844,17.474 C135.844,14.952 137.222,12.82 140.602,12.82 C141.824,12.82 142.708,13.054 143.54,13.444 L143.54,11.364 C142.526,10.896 141.616,10.74 140.446,10.74 C135.818,10.74 133.66,13.548 133.66,17.474 C133.66,21.452 135.818,24.26 140.446,24.26 C141.642,24.26 142.838,24.078 143.618,23.662 L143.618,21.66 Z M156.41,23.48 C155.344,24.052 153.706,24.26 152.38,24.26 C147.518,24.26 145.386,21.452 145.386,17.474 C145.386,13.548 147.57,10.74 151.522,10.74 C155.526,10.74 157.138,13.522 157.138,17.474 L157.138,18.488 L147.648,18.488 C147.96,20.698 149.39,22.128 152.458,22.128 C153.966,22.128 155.24,21.842 156.41,21.426 L156.41,23.48 Z M151.418,12.768 C149.052,12.768 147.856,14.302 147.622,16.564 L154.876,16.564 C154.746,14.146 153.654,12.768 151.418,12.768 Z\" fill=\"inherit\" fill-rule=\"evenodd\"></path>\n      <path d=\"M0.85465057,21.7022581 C0.61090057,22.0783871 0.33715057,22.5148387 0.10465057,22.8625806 C-0.10345498,23.195346 0.00826440879,23.6245091 0.35590057,23.8277419 L5.23090057,26.6664516 C5.40202309,26.7664253 5.60840847,26.7971801 5.80372052,26.7518112 C5.99903257,26.7064423 6.16690583,26.5887513 6.26965057,26.4251613 C6.46465057,26.1164516 6.71590057,25.7154839 6.98965057,25.286129 C8.92090057,22.27 10.8634006,22.6390323 14.3659006,24.2216129 L19.1996506,26.3967742 C19.3827218,26.4792261 19.5932727,26.4880304 19.7833166,26.4211804 C19.9733605,26.3543303 20.1267047,26.2175221 20.2084006,26.0419355 L22.5296506,21.0741935 C22.6936507,20.7193919 22.5267777,20.3056906 22.1546506,20.1445161 C21.1346506,19.6903226 19.1059006,18.7854839 17.2796506,17.9516129 C10.7096506,14.9354839 5.12590057,15.1341935 0.85465057,21.7022581 Z\" fill=\"url(#").concat(id, "-1)\"></path>\n      <path d=\"M22.7130274,10.4325806 C22.9567774,10.0564516 23.2305274,9.62 23.4630274,9.27225806 C23.6711329,8.93949274 23.5594135,8.51032964 23.2117774,8.30709677 L18.3367774,5.4683871 C18.1633186,5.35902032 17.9495842,5.32289142 17.7468362,5.36866556 C17.5440883,5.4144397 17.3706168,5.53798759 17.2680274,5.70967742 C17.0730274,6.0183871 16.8217774,6.41935484 16.5480274,6.84870968 C14.6167774,9.86483871 12.6742774,9.49580645 9.17177736,7.91322581 L4.35302736,5.7416129 C4.16995613,5.65916098 3.95940527,5.65035674 3.76936133,5.71720675 C3.5793174,5.78405675 3.42597321,5.92086501 3.34427736,6.09645161 L1.02302736,11.0641935 C0.85902727,11.4189952 1.02590019,11.8326965 1.39802736,11.993871 C2.41802736,12.4480645 4.44677736,13.3529032 6.27302736,14.1867742 C12.8580274,17.1993548 18.4417774,17.0006452 22.7130274,10.4325806 Z\" fill=\"url(#").concat(id, "-2)\"></path>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "confluenceLogo-".concat(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 158 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"99.140087%\" y1=\"112.745465%\" x2=\"33.8589812%\" y2=\"37.7675389%\" id=\"".concat(id, "-1\">\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      <linearGradient x1=\"14.1838118%\" y1=\"5.80047897%\" x2=\"61.141783%\" y2=\"70.9663868%\" id=\"").concat(id, "-2\">\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.textColor, "\" fill-rule=\"evenodd\" d=\"M45.312,20.984 C44.064,21.608 42.66,22.024 40.866,22.024 C36.81,22.024 34.34,19.424 34.34,15.498 C34.34,11.572 36.732,8.92 40.736,8.92 C42.712,8.92 44.064,9.336 45.286,10.116 L45.286,7.854 C44.064,6.97 42.4,6.658 40.736,6.658 C35.172,6.658 32,10.298 32,15.498 C32,20.88 35.172,24.26 40.788,24.26 C42.556,24.26 44.246,23.948 45.312,23.246 L45.312,20.984 Z M53.918,24.26 C50.018,24.26 47.73,21.374 47.73,17.474 C47.73,13.574 50.018,10.74 53.918,10.74 C57.792,10.74 60.054,13.574 60.054,17.474 C60.054,21.374 57.792,24.26 53.918,24.26 Z M53.918,12.82 C51.136,12.82 49.914,15.004 49.914,17.474 C49.914,19.944 51.136,22.18 53.918,22.18 C56.674,22.18 57.87,19.944 57.87,17.474 C57.87,15.004 56.674,12.82 53.918,12.82 Z M73.704,16.382 C73.704,12.794 71.988,10.74 68.998,10.74 C67.256,10.74 65.722,11.598 64.89,13.132 L64.89,11 L62.654,11 L62.654,24 L64.89,24 L64.89,16.772 C64.89,14.146 66.32,12.768 68.4,12.768 C70.532,12.768 71.468,13.808 71.468,16.148 L71.468,24 L73.704,24 L73.704,16.382 Z M79.918,9.622 C79.918,8.452 80.594,7.646 81.972,7.646 C82.492,7.646 82.986,7.698 83.376,7.776 L83.376,5.722 C82.986,5.618 82.544,5.514 81.868,5.514 C79.086,5.514 77.734,7.152 77.734,9.57 L77.734,11 L75.628,11 L75.628,13.08 L77.734,13.08 L77.734,24 L79.918,24 L79.918,13.08 L83.272,13.08 L83.272,11 L79.918,11 L79.918,9.622 Z M90.318,23.974 L90.318,21.972 C90.058,21.998 89.902,21.998 89.668,21.998 C88.706,21.998 87.926,21.582 87.926,20.412 L87.926,5.566 L85.69,5.566 L85.69,20.672 C85.69,23.064 87.042,24.078 89.174,24.078 C89.746,24.078 90.136,24.026 90.318,23.974 Z M92.216,18.618 C92.216,22.206 93.932,24.26 96.922,24.26 C98.664,24.26 100.198,23.402 101.03,21.868 L101.03,24 L103.266,24 L103.266,11 L101.03,11 L101.03,18.228 C101.03,20.854 99.6,22.232 97.52,22.232 C95.388,22.232 94.452,21.192 94.452,18.852 L94.452,11 L92.216,11 L92.216,18.618 Z M116.89,23.48 C115.824,24.052 114.186,24.26 112.86,24.26 C107.998,24.26 105.866,21.452 105.866,17.474 C105.866,13.548 108.05,10.74 112.002,10.74 C116.006,10.74 117.618,13.522 117.618,17.474 L117.618,18.488 L108.128,18.488 C108.44,20.698 109.87,22.128 112.938,22.128 C114.446,22.128 115.72,21.842 116.89,21.426 L116.89,23.48 Z M111.898,12.768 C109.532,12.768 108.336,14.302 108.102,16.564 L115.356,16.564 C115.226,14.146 114.134,12.768 111.898,12.768 Z M131.32,16.382 C131.32,12.794 129.604,10.74 126.614,10.74 C124.872,10.74 123.338,11.598 122.506,13.132 L122.506,11 L120.27,11 L120.27,24 L122.506,24 L122.506,16.772 C122.506,14.146 123.936,12.768 126.016,12.768 C128.148,12.768 129.084,13.808 129.084,16.148 L129.084,24 L131.32,24 L131.32,16.382 Z M143.618,21.66 C142.812,21.946 141.98,22.128 140.654,22.128 C137.248,22.128 135.844,19.996 135.844,17.474 C135.844,14.952 137.222,12.82 140.602,12.82 C141.824,12.82 142.708,13.054 143.54,13.444 L143.54,11.364 C142.526,10.896 141.616,10.74 140.446,10.74 C135.818,10.74 133.66,13.548 133.66,17.474 C133.66,21.452 135.818,24.26 140.446,24.26 C141.642,24.26 142.838,24.078 143.618,23.662 L143.618,21.66 Z M156.41,23.48 C155.344,24.052 153.706,24.26 152.38,24.26 C147.518,24.26 145.386,21.452 145.386,17.474 C145.386,13.548 147.57,10.74 151.522,10.74 C155.526,10.74 157.138,13.522 157.138,17.474 L157.138,18.488 L147.648,18.488 C147.96,20.698 149.39,22.128 152.458,22.128 C153.966,22.128 155.24,21.842 156.41,21.426 L156.41,23.48 Z M151.418,12.768 C149.052,12.768 147.856,14.302 147.622,16.564 L154.876,16.564 C154.746,14.146 153.654,12.768 151.418,12.768 Z\"></path>\n      <path fill=\"url(#").concat(id, "-1)\" d=\"M0.85465057,21.7022581 C0.61090057,22.0783871 0.33715057,22.5148387 0.10465057,22.8625806 C-0.10345498,23.195346 0.00826440879,23.6245091 0.35590057,23.8277419 L5.23090057,26.6664516 C5.40202309,26.7664253 5.60840847,26.7971801 5.80372052,26.7518112 C5.99903257,26.7064423 6.16690583,26.5887513 6.26965057,26.4251613 C6.46465057,26.1164516 6.71590057,25.7154839 6.98965057,25.286129 C8.92090057,22.27 10.8634006,22.6390323 14.3659006,24.2216129 L19.1996506,26.3967742 C19.3827218,26.4792261 19.5932727,26.4880304 19.7833166,26.4211804 C19.9733605,26.3543303 20.1267047,26.2175221 20.2084006,26.0419355 L22.5296506,21.0741935 C22.6936507,20.7193919 22.5267777,20.3056906 22.1546506,20.1445161 C21.1346506,19.6903226 19.1059006,18.7854839 17.2796506,17.9516129 C10.7096506,14.9354839 5.12590057,15.1341935 0.85465057,21.7022581 Z\"></path>\n      <path fill=\"url(#").concat(id, "-2)\" d=\"M22.7130274,10.4325806 C22.9567774,10.0564516 23.2305274,9.62 23.4630274,9.27225806 C23.6711329,8.93949274 23.5594135,8.51032964 23.2117774,8.30709677 L18.3367774,5.4683871 C18.1633186,5.35902032 17.9495842,5.32289142 17.7468362,5.36866556 C17.5440883,5.4144397 17.3706168,5.53798759 17.2680274,5.70967742 C17.0730274,6.0183871 16.8217774,6.41935484 16.5480274,6.84870968 C14.6167774,9.86483871 12.6742774,9.49580645 9.17177736,7.91322581 L4.35302736,5.7416129 C4.16995613,5.65916098 3.95940527,5.65035674 3.76936133,5.71720675 C3.5793174,5.78405675 3.42597321,5.92086501 3.34427736,6.09645161 L1.02302736,11.0641935 C0.85902727,11.4189952 1.02590019,11.8326965 1.39802736,11.993871 C2.41802736,12.4480645 4.44677736,13.3529032 6.27302736,14.1867742 C12.8580274,17.1993548 18.4417774,17.0006452 22.7130274,10.4325806 Z\"></path>\n    </g>\n  </svg>");
 };
+/**
+ * __Confluence logo__
+ *
+ * The Confluence logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
 
-var ConfluenceLogo = function ConfluenceLogo(_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 ? 'Confluence' : _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 ConfluenceLogo = function ConfluenceLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Confluence' : _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
   });

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

@@ -11,32 +11,51 @@ 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=\"126\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 126 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"inherit\">\n    <path d=\"M13.312,20.984 C12.064,21.608 10.66,22.024 8.866,22.024 C4.81,22.024 2.34,19.424 2.34,15.498 C2.34,11.572 4.732,8.92 8.736,8.92 C10.712,8.92 12.064,9.336 13.286,10.116 L13.286,7.854 C12.064,6.97 10.4,6.658 8.736,6.658 C3.172,6.658 -2.04281037e-14,10.298 -2.04281037e-14,15.498 C-2.04281037e-14,20.88 3.172,24.26 8.788,24.26 C10.556,24.26 12.246,23.948 13.312,23.246 L13.312,20.984 Z M21.918,24.26 C18.018,24.26 15.73,21.374 15.73,17.474 C15.73,13.574 18.018,10.74 21.918,10.74 C25.792,10.74 28.054,13.574 28.054,17.474 C28.054,21.374 25.792,24.26 21.918,24.26 Z M21.918,12.82 C19.136,12.82 17.914,15.004 17.914,17.474 C17.914,19.944 19.136,22.18 21.918,22.18 C24.674,22.18 25.87,19.944 25.87,17.474 C25.87,15.004 24.674,12.82 21.918,12.82 Z M41.704,16.382 C41.704,12.794 39.988,10.74 36.998,10.74 C35.256,10.74 33.722,11.598 32.89,13.132 L32.89,11 L30.654,11 L30.654,24 L32.89,24 L32.89,16.772 C32.89,14.146 34.32,12.768 36.4,12.768 C38.532,12.768 39.468,13.808 39.468,16.148 L39.468,24 L41.704,24 L41.704,16.382 Z M47.918,9.622 C47.918,8.452 48.594,7.646 49.972,7.646 C50.492,7.646 50.986,7.698 51.376,7.776 L51.376,5.722 C50.986,5.618 50.544,5.514 49.868,5.514 C47.086,5.514 45.734,7.152 45.734,9.57 L45.734,11 L43.628,11 L43.628,13.08 L45.734,13.08 L45.734,24 L47.918,24 L47.918,13.08 L51.272,13.08 L51.272,11 L47.918,11 L47.918,9.622 Z M58.318,23.974 L58.318,21.972 C58.058,21.998 57.902,21.998 57.668,21.998 C56.706,21.998 55.926,21.582 55.926,20.412 L55.926,5.566 L53.69,5.566 L53.69,20.672 C53.69,23.064 55.042,24.078 57.174,24.078 C57.746,24.078 58.136,24.026 58.318,23.974 Z M60.216,18.618 C60.216,22.206 61.932,24.26 64.922,24.26 C66.664,24.26 68.198,23.402 69.03,21.868 L69.03,24 L71.266,24 L71.266,11 L69.03,11 L69.03,18.228 C69.03,20.854 67.6,22.232 65.52,22.232 C63.388,22.232 62.452,21.192 62.452,18.852 L62.452,11 L60.216,11 L60.216,18.618 Z M84.89,23.48 C83.824,24.052 82.186,24.26 80.86,24.26 C75.998,24.26 73.866,21.452 73.866,17.474 C73.866,13.548 76.05,10.74 80.002,10.74 C84.006,10.74 85.618,13.522 85.618,17.474 L85.618,18.488 L76.128,18.488 C76.44,20.698 77.87,22.128 80.938,22.128 C82.446,22.128 83.72,21.842 84.89,21.426 L84.89,23.48 Z M79.898,12.768 C77.532,12.768 76.336,14.302 76.102,16.564 L83.356,16.564 C83.226,14.146 82.134,12.768 79.898,12.768 Z M99.32,16.382 C99.32,12.794 97.604,10.74 94.614,10.74 C92.872,10.74 91.338,11.598 90.506,13.132 L90.506,11 L88.27,11 L88.27,24 L90.506,24 L90.506,16.772 C90.506,14.146 91.936,12.768 94.016,12.768 C96.148,12.768 97.084,13.808 97.084,16.148 L97.084,24 L99.32,24 L99.32,16.382 Z M111.618,21.66 C110.812,21.946 109.98,22.128 108.654,22.128 C105.248,22.128 103.844,19.996 103.844,17.474 C103.844,14.952 105.222,12.82 108.602,12.82 C109.824,12.82 110.708,13.054 111.54,13.444 L111.54,11.364 C110.526,10.896 109.616,10.74 108.446,10.74 C103.818,10.74 101.66,13.548 101.66,17.474 C101.66,21.452 103.818,24.26 108.446,24.26 C109.642,24.26 110.838,24.078 111.618,23.662 L111.618,21.66 Z M124.41,23.48 C123.344,24.052 121.706,24.26 120.38,24.26 C115.518,24.26 113.386,21.452 113.386,17.474 C113.386,13.548 115.57,10.74 119.522,10.74 C123.526,10.74 125.138,13.522 125.138,17.474 L125.138,18.488 L115.648,18.488 C115.96,20.698 117.39,22.128 120.458,22.128 C121.966,22.128 123.24,21.842 124.41,21.426 L124.41,23.48 Z M119.418,12.768 C117.052,12.768 115.856,14.302 115.622,16.564 L122.876,16.564 C122.746,14.146 121.654,12.768 119.418,12.768 Z\"></path>\n  </g>\n</svg>";
-
-var ConfluenceWordmark = function ConfluenceWordmark(_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 ? 'Confluence' : _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 126 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"".concat(colors.textColor, "\">\n    <path d=\"M13.312,20.984 C12.064,21.608 10.66,22.024 8.866,22.024 C4.81,22.024 2.34,19.424 2.34,15.498 C2.34,11.572 4.732,8.92 8.736,8.92 C10.712,8.92 12.064,9.336 13.286,10.116 L13.286,7.854 C12.064,6.97 10.4,6.658 8.736,6.658 C3.172,6.658 -2.04281037e-14,10.298 -2.04281037e-14,15.498 C-2.04281037e-14,20.88 3.172,24.26 8.788,24.26 C10.556,24.26 12.246,23.948 13.312,23.246 L13.312,20.984 Z M21.918,24.26 C18.018,24.26 15.73,21.374 15.73,17.474 C15.73,13.574 18.018,10.74 21.918,10.74 C25.792,10.74 28.054,13.574 28.054,17.474 C28.054,21.374 25.792,24.26 21.918,24.26 Z M21.918,12.82 C19.136,12.82 17.914,15.004 17.914,17.474 C17.914,19.944 19.136,22.18 21.918,22.18 C24.674,22.18 25.87,19.944 25.87,17.474 C25.87,15.004 24.674,12.82 21.918,12.82 Z M41.704,16.382 C41.704,12.794 39.988,10.74 36.998,10.74 C35.256,10.74 33.722,11.598 32.89,13.132 L32.89,11 L30.654,11 L30.654,24 L32.89,24 L32.89,16.772 C32.89,14.146 34.32,12.768 36.4,12.768 C38.532,12.768 39.468,13.808 39.468,16.148 L39.468,24 L41.704,24 L41.704,16.382 Z M47.918,9.622 C47.918,8.452 48.594,7.646 49.972,7.646 C50.492,7.646 50.986,7.698 51.376,7.776 L51.376,5.722 C50.986,5.618 50.544,5.514 49.868,5.514 C47.086,5.514 45.734,7.152 45.734,9.57 L45.734,11 L43.628,11 L43.628,13.08 L45.734,13.08 L45.734,24 L47.918,24 L47.918,13.08 L51.272,13.08 L51.272,11 L47.918,11 L47.918,9.622 Z M58.318,23.974 L58.318,21.972 C58.058,21.998 57.902,21.998 57.668,21.998 C56.706,21.998 55.926,21.582 55.926,20.412 L55.926,5.566 L53.69,5.566 L53.69,20.672 C53.69,23.064 55.042,24.078 57.174,24.078 C57.746,24.078 58.136,24.026 58.318,23.974 Z M60.216,18.618 C60.216,22.206 61.932,24.26 64.922,24.26 C66.664,24.26 68.198,23.402 69.03,21.868 L69.03,24 L71.266,24 L71.266,11 L69.03,11 L69.03,18.228 C69.03,20.854 67.6,22.232 65.52,22.232 C63.388,22.232 62.452,21.192 62.452,18.852 L62.452,11 L60.216,11 L60.216,18.618 Z M84.89,23.48 C83.824,24.052 82.186,24.26 80.86,24.26 C75.998,24.26 73.866,21.452 73.866,17.474 C73.866,13.548 76.05,10.74 80.002,10.74 C84.006,10.74 85.618,13.522 85.618,17.474 L85.618,18.488 L76.128,18.488 C76.44,20.698 77.87,22.128 80.938,22.128 C82.446,22.128 83.72,21.842 84.89,21.426 L84.89,23.48 Z M79.898,12.768 C77.532,12.768 76.336,14.302 76.102,16.564 L83.356,16.564 C83.226,14.146 82.134,12.768 79.898,12.768 Z M99.32,16.382 C99.32,12.794 97.604,10.74 94.614,10.74 C92.872,10.74 91.338,11.598 90.506,13.132 L90.506,11 L88.27,11 L88.27,24 L90.506,24 L90.506,16.772 C90.506,14.146 91.936,12.768 94.016,12.768 C96.148,12.768 97.084,13.808 97.084,16.148 L97.084,24 L99.32,24 L99.32,16.382 Z M111.618,21.66 C110.812,21.946 109.98,22.128 108.654,22.128 C105.248,22.128 103.844,19.996 103.844,17.474 C103.844,14.952 105.222,12.82 108.602,12.82 C109.824,12.82 110.708,13.054 111.54,13.444 L111.54,11.364 C110.526,10.896 109.616,10.74 108.446,10.74 C103.818,10.74 101.66,13.548 101.66,17.474 C101.66,21.452 103.818,24.26 108.446,24.26 C109.642,24.26 110.838,24.078 111.618,23.662 L111.618,21.66 Z M124.41,23.48 C123.344,24.052 121.706,24.26 120.38,24.26 C115.518,24.26 113.386,21.452 113.386,17.474 C113.386,13.548 115.57,10.74 119.522,10.74 C123.526,10.74 125.138,13.522 125.138,17.474 L125.138,18.488 L115.648,18.488 C115.96,20.698 117.39,22.128 120.458,22.128 C121.966,22.128 123.24,21.842 124.41,21.426 L124.41,23.48 Z M119.418,12.768 C117.052,12.768 115.856,14.302 115.622,16.564 L122.876,16.564 C122.746,14.146 121.654,12.768 119.418,12.768 Z\"></path>\n  </g>\n</svg>");
+};
+/**
+ * __Confluence wordmark__
+ *
+ * The Confluence brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
+
+var ConfluenceWordmark = function ConfluenceWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Confluence' : _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/constants.js

@@ -42,6 +42,7 @@ var sizes = {
 /**
  * @deprecated This has been renamed, please import `LogoProps` instead.
  */
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
 exports.sizes = sizes;
 

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

@@ -13,33 +13,70 @@ 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
+  }; // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "\n  <canvas\n    height=\"32\"\n    width=\"32\"\n    aria-hidden=\"true\"\n  >\n  </canvas>\n  <svg\n    fill=\"none\"\n    height=\"32\"\n    viewBox=\"0 0 32 32\"\n    width=\"32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n  <radialGradient id=\"".concat(id, "\" cx=\"0\" cy=\"0\" gradientTransform=\"matrix(9.99792 0 0 10.02 15.9984 16.0001)\" gradientUnits=\"userSpaceOnUse\" r=\"1\">\n  <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0\"/>\n  <stop offset=\"1\" stop-color=\"").concat(iconGradientStop, "\"/>\n  </radialGradient>\n  <g clip-rule=\"evenodd\" fill-rule=\"evenodd\">\n    <path d=\"m23.072 8.91718c1.3975 1.40162 2.3491 3.18702 2.7343 5.13052s.1868 3.9578-.5701 5.7884c-.7569 1.8305-2.0383 3.395-3.6824 4.4957-1.644 1.1007-3.5767 1.6882-5.5538 1.6882s-3.9098-.5875-5.5539-1.6882c-1.64396-1.1007-2.92542-2.6652-3.68233-4.4957-.75692-1.8306-.9553-3.8449-.57007-5.7884s1.33677-3.7289 2.73433-5.13052c.92848-.93116 2.03097-1.66983 3.24437-2.1738 1.2135-.50397 2.5141-.76337 3.8276-.76337s2.6141.2594 3.8276.76337c1.2134.50397 2.3159 1.24264 3.2444 2.1738zm-12.4506 12.49372-.0281-.0282.0188.0188zm8.0546-9.638 1.8746-1.87877c-1.3177-.98501-2.9176-1.51713-4.5615-1.51713s-3.2439.53212-4.5616 1.51713l1.8746 1.87877-1.5372 1.5406-1.87457-1.8788c-.98401 1.3196-1.51571 2.9227-1.51571 4.5701 0 1.6473.5317 3.2505 1.51571 4.57l1.87457-1.8787 1.5372 1.5468-1.8746 1.8788c1.3177.985 2.9177 1.5171 4.5616 1.5171s3.2438-.5321 4.5615-1.5171l-1.8746-1.8788 1.5372-1.5468 1.8746 1.8787c.984-1.3195 1.5157-2.9227 1.5157-4.57 0-1.6474-.5317-3.2505-1.5157-4.5701l-1.8746 1.8788z\" fill=\"url(#").concat(id, ")\"/>\n    <path d=\"m15.9984 10.9901c-.9887 0-1.9552.2938-2.7772.8443-.8221.5505-1.4628 1.3329-1.8412 2.2484s-.4773 1.9228-.2845 2.8947c.1929.9718.669 1.8645 1.3681 2.5652.6992.7006 1.5899 1.1778 2.5596 1.3711s1.9748.0941 2.8883-.2851c.9134-.3792 1.6941-1.0214 2.2434-1.8452.5493-.8239.8425-1.7926.8425-2.7834 0-1.3288-.5267-2.6031-1.4642-3.5427-.9374-.9395-2.209-1.4673-3.5348-1.4673zm0 7.8281c-.5561 0-1.0998-.1653-1.5622-.475-.4624-.3096-.8228-.7498-1.0356-1.2647-.2129-.5149-.2685-1.0816-.16-1.6282.1085-.5467.3763-1.0488.7695-1.443.3933-.3941.8943-.6625 1.4398-.7712.5454-.1088 1.1108-.053 1.6246.1603s.953.5745 1.262 1.038c.3089.4634.4739 1.0083.4739 1.5657.0004.3703-.0721.7371-.2132 1.0794-.1411.3422-.3482.6533-.6093.9153-.2612.262-.5713.4699-.9127.6117-.3413.1418-.7072.2148-1.0768.2148z\" fill=\"currentColor\"/>\n  </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "halpIcon-".concat(appearance);
+  }
+
+  return "\n  <svg\n    fill=\"none\"\n    height=\"32\"\n    viewBox=\"0 0 32 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n  <radialGradient id=\"".concat(id, "\" cx=\"0\" cy=\"0\" gradientTransform=\"matrix(9.99792 0 0 10.02 15.9984 16.0001)\" gradientUnits=\"userSpaceOnUse\" r=\"1\">\n  <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0\"/>\n  <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n  </radialGradient>\n  <g clip-rule=\"evenodd\" fill-rule=\"evenodd\">\n    <path fill=\"url(#").concat(id, ")\" d=\"m23.072 8.91718c1.3975 1.40162 2.3491 3.18702 2.7343 5.13052s.1868 3.9578-.5701 5.7884c-.7569 1.8305-2.0383 3.395-3.6824 4.4957-1.644 1.1007-3.5767 1.6882-5.5538 1.6882s-3.9098-.5875-5.5539-1.6882c-1.64396-1.1007-2.92542-2.6652-3.68233-4.4957-.75692-1.8306-.9553-3.8449-.57007-5.7884s1.33677-3.7289 2.73433-5.13052c.92848-.93116 2.03097-1.66983 3.24437-2.1738 1.2135-.50397 2.5141-.76337 3.8276-.76337s2.6141.2594 3.8276.76337c1.2134.50397 2.3159 1.24264 3.2444 2.1738zm-12.4506 12.49372-.0281-.0282.0188.0188zm8.0546-9.638 1.8746-1.87877c-1.3177-.98501-2.9176-1.51713-4.5615-1.51713s-3.2439.53212-4.5616 1.51713l1.8746 1.87877-1.5372 1.5406-1.87457-1.8788c-.98401 1.3196-1.51571 2.9227-1.51571 4.5701 0 1.6473.5317 3.2505 1.51571 4.57l1.87457-1.8787 1.5372 1.5468-1.8746 1.8788c1.3177.985 2.9177 1.5171 4.5616 1.5171s3.2438-.5321 4.5615-1.5171l-1.8746-1.8788 1.5372-1.5468 1.8746 1.8787c.984-1.3195 1.5157-2.9227 1.5157-4.57 0-1.6474-.5317-3.2505-1.5157-4.5701l-1.8746 1.8788z\"/>\n    <path fill=\"").concat(colors.iconColor, "\" d=\"m15.9984 10.9901c-.9887 0-1.9552.2938-2.7772.8443-.8221.5505-1.4628 1.3329-1.8412 2.2484s-.4773 1.9228-.2845 2.8947c.1929.9718.669 1.8645 1.3681 2.5652.6992.7006 1.5899 1.1778 2.5596 1.3711s1.9748.0941 2.8883-.2851c.9134-.3792 1.6941-1.0214 2.2434-1.8452.5493-.8239.8425-1.7926.8425-2.7834 0-1.3288-.5267-2.6031-1.4642-3.5427-.9374-.9395-2.209-1.4673-3.5348-1.4673zm0 7.8281c-.5561 0-1.0998-.1653-1.5622-.475-.4624-.3096-.8228-.7498-1.0356-1.2647-.2129-.5149-.2685-1.0816-.16-1.6282.1085-.5467.3763-1.0488.7695-1.443.3933-.3941.8943-.6625 1.4398-.7712.5454-.1088 1.1108-.053 1.6246.1603s.953.5745 1.262 1.038c.3089.4634.4739 1.0083.4739 1.5657.0004.3703-.0721.7371-.2132 1.0794-.1411.3422-.3482.6533-.6093.9153-.2612.262-.5713.4699-.9127.6117-.3413.1418-.7072.2148-1.0768.2148z\"/>\n  </g>\n  </svg>");
 };
+/**
+ * __Halp icon__
+ *
+ * The Halp icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
 
-var HalpIcon = function HalpIcon(_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 ? 'Halp' : _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 HalpIcon = function HalpIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Halp' : _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,
+      _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;
   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/halp-logo/logo.js

@@ -13,37 +13,77 @@ 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
+  }; // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"83\" aria-hidden=\"true\"></canvas>\n    <svg\n      fill=\"none\"\n      height=\"32\"\n      viewBox=\"0 0 83 32\"\n      width=\"83\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <radialGradient\n      id=\"".concat(id, "\"\n      cx=\"0\"\n      cy=\"0\"\n      gradientTransform=\"matrix(9.99792 0 0 10.02 9.99636 14.7546)\"\n      gradientUnits=\"userSpaceOnUse\"\n      r=\"1\"\n      >\n     <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0\"/>\n      <stop offset=\"1\" stop-color=\"").concat(iconGradientStop, "\"/>\n      </radialGradient>\n        <g\n          clip-rule=\"evenodd\"\n          fill-rule=\"evenodd\"\n        >\n        <path\n          d=\"m66.9971 23.9197c-2.2527 0-3.6836-1.0771-3.6836-3.6103v-16.01008h2.3651v15.73458c0 1.2525.8248 1.6814 1.8434 1.6814.2295.0042.459-.0052.6873-.0281v2.1198c-.3979.0875-.805.1254-1.2122.1127zm-22.9014-.0845v-18.10177h-2.4745v7.90637h-9.5137v-7.90637h-2.4744v18.10177h2.4744v-7.8281h9.5137v7.8281zm8.6324.2755c2.1183 0 3.768-.9362 4.6459-2.7555l.0031 2.48h2.3652v-13.7775h-2.3652v2.4267c-.8279-1.7911-2.3651-2.70226-4.3741-2.70226-3.8492 0-5.7738 3.28156-5.7738 7.16426 0 4.0519 1.8434 7.1643 5.4989 7.1643zm4.6459-6.6132c0 3.0593-1.8965 4.4088-4.0117 4.4088-2.4494 0-3.7804-1.6533-3.7804-4.9599 0-3.1938 1.3747-4.9599 4.0429-4.9599 2.0183 0 3.7492 1.3527 3.7492 4.4088zm15.4811 11.7109v-7.7968c.8248 1.7911 2.362 2.6991 4.371 2.6991 3.8492 0 5.7738-3.2784 5.7738-7.1643 0-4.033-1.8434-7.16426-5.4989-7.16426-2.1183 0-3.7679.93936-4.6459 2.75546v-2.4799h-2.3651v19.1507zm0-12.8131c0-3.0561 1.8965-4.4088 4.0117-4.4088 2.4495 0 3.7679 1.6533 3.7804 4.9599 0 3.197-1.3747 4.9599-4.0429 4.9599-2.0183 0-3.7492-1.3495-3.7492-4.4088z\"\n          fill=\"inherit\"\n        />\n        <path\n          d=\"m17.0699 7.67166c1.3976 1.40159 2.3491 3.18704 2.7343 5.13054.3853 1.9435.1869 3.9578-.57 5.7883-.757 1.8306-2.0384 3.3951-3.6824 4.4958s-3.5768 1.6882-5.55388 1.6882c-1.97711 0-3.90984-.5875-5.55385-1.6882-1.644-1.1007-2.92546-2.6652-3.682378-4.4958-.75691561-1.8305-.955299-3.8448-.57007-5.7883.385228-1.9435 1.336768-3.72895 2.734338-5.13054.92848-.93115 2.03094-1.66982 3.24438-2.17379 1.21344-.50398 2.51407-.76337 3.82758-.76337 1.31348 0 2.61418.25939 3.82758.76337 1.2134.50397 2.3159 1.24264 3.2444 2.17379zm-12.45054 12.49374-.02812-.0282.01874.0188zm8.05454-9.638 1.8746-1.87879c-1.3177-.985-2.9176-1.51712-4.56151-1.51712-1.64389 0-3.24382.53212-4.56155 1.51712l1.87461 1.87879-1.53718 1.5405-1.87461-1.8787c-.98401 1.3195-1.51572 2.9227-1.51572 4.5701 0 1.6473.53171 3.2505 1.51572 4.57l1.87461-1.8787 1.53718 1.5468-1.87461 1.8788c1.31773.985 2.91766 1.5171 4.56155 1.5171 1.64391 0 3.24381-.5321 4.56151-1.5171l-1.8746-1.8788 1.5372-1.5468 1.8746 1.8787c.984-1.3195 1.5157-2.9227 1.5157-4.57 0-1.6474-.5317-3.2506-1.5157-4.5701l-1.8746 1.8787z\"\n          fill=\"url(#").concat(id, ")\"\n          />\n          <path d=\"m9.99628 9.74454c-.9887 0-1.9552.29386-2.77728.84436-.82207.5505-1.4628 1.3329-1.84116 2.2484s-.47736 1.9228-.28447 2.8946c.19289.9719.66899 1.8646 1.36811 2.5652.69912.7007 1.58984 1.1779 2.55955 1.3712.9697.1933 1.97487.0941 2.88827-.2851s1.6942-1.0214 2.2435-1.8453c.5493-.8238.8424-1.7925.8424-2.7834 0-1.3287-.5266-2.603-1.4641-3.5426-.9375-.9395-2.209-1.46736-3.53482-1.46736zm0 7.82816c-.55615 0-1.0998-.1653-1.56222-.475-.46242-.3096-.82283-.7498-1.03565-1.2647-.21283-.515-.26852-1.0816-.16002-1.6283.1085-.5466.37631-1.0488.76956-1.4429.39326-.3941.89429-.6625 1.43975-.7712.54546-.1088 1.1108-.053 1.6247.1603.5138.2133.9529.5745 1.2619 1.038.309.4634.4739 1.0083.4739 1.5656.0004.3704-.072.7372-.2132 1.0794-.1411.3423-.3481.6534-.6093.9154-.2611.262-.5713.4699-.9126.6117-.3414.1418-.7073.2148-1.07682.2148z\"\n          fill=\"currentColor\"\n        />\n        </g>\n      </svg>\n    ");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "halpLogo-".concat(appearance);
+  }
+
+  return "\n    <svg\n      fill=\"none\"\n      height=\"32\"\n      viewBox=\"0 0 83 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <radialGradient\n      id=\"".concat(id, "\"\n      cx=\"0\"\n      cy=\"0\"\n      gradientTransform=\"matrix(9.99792 0 0 10.02 9.99636 14.7546)\"\n      gradientUnits=\"userSpaceOnUse\"\n      r=\"1\"\n      >\n     <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n      </radialGradient>\n        <g\n          clip-rule=\"evenodd\"\n          fill-rule=\"evenodd\"\n        >\n        <path\n          d=\"m66.9971 23.9197c-2.2527 0-3.6836-1.0771-3.6836-3.6103v-16.01008h2.3651v15.73458c0 1.2525.8248 1.6814 1.8434 1.6814.2295.0042.459-.0052.6873-.0281v2.1198c-.3979.0875-.805.1254-1.2122.1127zm-22.9014-.0845v-18.10177h-2.4745v7.90637h-9.5137v-7.90637h-2.4744v18.10177h2.4744v-7.8281h9.5137v7.8281zm8.6324.2755c2.1183 0 3.768-.9362 4.6459-2.7555l.0031 2.48h2.3652v-13.7775h-2.3652v2.4267c-.8279-1.7911-2.3651-2.70226-4.3741-2.70226-3.8492 0-5.7738 3.28156-5.7738 7.16426 0 4.0519 1.8434 7.1643 5.4989 7.1643zm4.6459-6.6132c0 3.0593-1.8965 4.4088-4.0117 4.4088-2.4494 0-3.7804-1.6533-3.7804-4.9599 0-3.1938 1.3747-4.9599 4.0429-4.9599 2.0183 0 3.7492 1.3527 3.7492 4.4088zm15.4811 11.7109v-7.7968c.8248 1.7911 2.362 2.6991 4.371 2.6991 3.8492 0 5.7738-3.2784 5.7738-7.1643 0-4.033-1.8434-7.16426-5.4989-7.16426-2.1183 0-3.7679.93936-4.6459 2.75546v-2.4799h-2.3651v19.1507zm0-12.8131c0-3.0561 1.8965-4.4088 4.0117-4.4088 2.4495 0 3.7679 1.6533 3.7804 4.9599 0 3.197-1.3747 4.9599-4.0429 4.9599-2.0183 0-3.7492-1.3495-3.7492-4.4088z\"\n          fill=\"").concat(colors.textColor, "\"\n        />\n        <path\n          d=\"m17.0699 7.67166c1.3976 1.40159 2.3491 3.18704 2.7343 5.13054.3853 1.9435.1869 3.9578-.57 5.7883-.757 1.8306-2.0384 3.3951-3.6824 4.4958s-3.5768 1.6882-5.55388 1.6882c-1.97711 0-3.90984-.5875-5.55385-1.6882-1.644-1.1007-2.92546-2.6652-3.682378-4.4958-.75691561-1.8305-.955299-3.8448-.57007-5.7883.385228-1.9435 1.336768-3.72895 2.734338-5.13054.92848-.93115 2.03094-1.66982 3.24438-2.17379 1.21344-.50398 2.51407-.76337 3.82758-.76337 1.31348 0 2.61418.25939 3.82758.76337 1.2134.50397 2.3159 1.24264 3.2444 2.17379zm-12.45054 12.49374-.02812-.0282.01874.0188zm8.05454-9.638 1.8746-1.87879c-1.3177-.985-2.9176-1.51712-4.56151-1.51712-1.64389 0-3.24382.53212-4.56155 1.51712l1.87461 1.87879-1.53718 1.5405-1.87461-1.8787c-.98401 1.3195-1.51572 2.9227-1.51572 4.5701 0 1.6473.53171 3.2505 1.51572 4.57l1.87461-1.8787 1.53718 1.5468-1.87461 1.8788c1.31773.985 2.91766 1.5171 4.56155 1.5171 1.64391 0 3.24381-.5321 4.56151-1.5171l-1.8746-1.8788 1.5372-1.5468 1.8746 1.8787c.984-1.3195 1.5157-2.9227 1.5157-4.57 0-1.6474-.5317-3.2506-1.5157-4.5701l-1.8746 1.8787z\"\n          fill=\"url(#").concat(id, ")\"\n          />\n          <path d=\"m9.99628 9.74454c-.9887 0-1.9552.29386-2.77728.84436-.82207.5505-1.4628 1.3329-1.84116 2.2484s-.47736 1.9228-.28447 2.8946c.19289.9719.66899 1.8646 1.36811 2.5652.69912.7007 1.58984 1.1779 2.55955 1.3712.9697.1933 1.97487.0941 2.88827-.2851s1.6942-1.0214 2.2435-1.8453c.5493-.8238.8424-1.7925.8424-2.7834 0-1.3287-.5266-2.603-1.4641-3.5426-.9375-.9395-2.209-1.46736-3.53482-1.46736zm0 7.82816c-.55615 0-1.0998-.1653-1.56222-.475-.46242-.3096-.82283-.7498-1.03565-1.2647-.21283-.515-.26852-1.0816-.16002-1.6283.1085-.5466.37631-1.0488.76956-1.4429.39326-.3941.89429-.6625 1.43975-.7712.54546-.1088 1.1108-.053 1.6247.1603.5138.2133.9529.5745 1.2619 1.038.309.4634.4739 1.0083.4739 1.5656.0004.3704-.072.7372-.2132 1.0794-.1411.3423-.3481.6534-.6093.9154-.2611.262-.5713.4699-.9126.6117-.3414.1418-.7073.2148-1.07682.2148z\"\n          fill=\"").concat(colors.iconColor, "\"\n        />\n        </g>\n      </svg>\n    ");
 };
+/**
+ * __Halp logo__
+ *
+ * The Halp logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
 
-var HalpLogo = function HalpLogo(_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 ? 'Halp' : _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 HalpLogo = function HalpLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Halp' : _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
   });

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

@@ -11,32 +11,52 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = "\n  <canvas height=\"32\" width=\"54\" aria-hidden=\"true\"></canvas>\n  <svg\n    fill=\"none\"\n    height=\"32\"\n    viewBox=\"0 0 54 32\"\n    width=\"54\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      clip-rule=\"evenodd\"\n      d=\"m37.364 24.0872c-2.2526 0-3.6836-1.0771-3.6836-3.6103v-16.01007h2.3652v15.73457c0 1.2525.8248 1.6815 1.8433 1.6815.2295.0041.459-.0053.6874-.0282v2.1198c-.3979.0875-.8051.1254-1.2123.1127zm-22.9014-.0845v-18.10176h-2.4745v7.90646h-9.51362v-7.90646h-2.47448v18.10176h2.47448v-7.8281h9.51362v7.8281zm8.6324.2756c2.1184 0 3.768-.9363 4.646-2.7555l.0031 2.4799h2.3651v-13.7775h-2.3651v2.4267c-.828-1.7911-2.3652-2.70225-4.3741-2.70225-3.8492 0-5.7738 3.28155-5.7738 7.16425 0 4.0519 1.8434 7.1644 5.4988 7.1644zm4.646-6.6132c0 3.0592-1.8965 4.4088-4.0117 4.4088-2.4495 0-3.7805-1.6533-3.7805-4.96 0-3.1938 1.3747-4.9599 4.0429-4.9599 2.0184 0 3.7493 1.3527 3.7493 4.4088zm15.4811 11.7108v-7.7968c.8248 1.7911 2.362 2.6991 4.3709 2.6991 3.8492 0 5.7738-3.2784 5.7738-7.1643 0-4.033-1.8434-7.16425-5.4988-7.16425-2.1183 0-3.768.93935-4.6459 2.75545v-2.4799h-2.3652v19.1507zm0-12.8131c0-3.0561 1.8964-4.4088 4.0116-4.4088 2.4495 0 3.768 1.6533 3.7805 4.9599 0 3.1971-1.3747 4.96-4.0429 4.96-2.0183 0-3.7492-1.3496-3.7492-4.4089z\"\n      fill=\"inherit\"\n      fill-rule=\"evenodd\"\n    />\n  </svg>";
-
-var HalpWordmark = function HalpWordmark(_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 ? 'Halp' : _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\n    fill=\"none\"\n    height=\"32\"\n    viewBox=\"0 0 54 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      clip-rule=\"evenodd\"\n      d=\"m37.364 24.0872c-2.2526 0-3.6836-1.0771-3.6836-3.6103v-16.01007h2.3652v15.73457c0 1.2525.8248 1.6815 1.8433 1.6815.2295.0041.459-.0053.6874-.0282v2.1198c-.3979.0875-.8051.1254-1.2123.1127zm-22.9014-.0845v-18.10176h-2.4745v7.90646h-9.51362v-7.90646h-2.47448v18.10176h2.47448v-7.8281h9.51362v7.8281zm8.6324.2756c2.1184 0 3.768-.9363 4.646-2.7555l.0031 2.4799h2.3651v-13.7775h-2.3651v2.4267c-.828-1.7911-2.3652-2.70225-4.3741-2.70225-3.8492 0-5.7738 3.28155-5.7738 7.16425 0 4.0519 1.8434 7.1644 5.4988 7.1644zm4.646-6.6132c0 3.0592-1.8965 4.4088-4.0117 4.4088-2.4495 0-3.7805-1.6533-3.7805-4.96 0-3.1938 1.3747-4.9599 4.0429-4.9599 2.0184 0 3.7493 1.3527 3.7493 4.4088zm15.4811 11.7108v-7.7968c.8248 1.7911 2.362 2.6991 4.3709 2.6991 3.8492 0 5.7738-3.2784 5.7738-7.1643 0-4.033-1.8434-7.16425-5.4988-7.16425-2.1183 0-3.768.93935-4.6459 2.75545v-2.4799h-2.3652v19.1507zm0-12.8131c0-3.0561 1.8964-4.4088 4.0116-4.4088 2.4495 0 3.768 1.6533 3.7805 4.9599 0 3.1971-1.3747 4.96-4.0429 4.96-2.0183 0-3.7492-1.3496-3.7492-4.4089z\"\n      fill=\"".concat(colors.textColor, "\"\n      fill-rule=\"evenodd\"\n    />\n  </svg>");
+};
+/**
+ * __Halp wordmark__
+ *
+ * The Halp brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
+
+var HalpWordmark = function HalpWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Halp' : _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, {
+    appearance: appearance,
     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/hipchat-logo/icon.js

@@ -18,31 +18,36 @@ var _constants = require("../constants");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = function svg(iconGradientStart, iconGradientStop) {
+var svg = function svg(_ref) {
+  var iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop;
+  // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   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=\"50%\" x2=\"50%\" y1=\"109.344%\" y2=\"50%\" 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=\"M23.7345538,23.2663616 C23.7345538,23.2663616 23.8370709,23.1967963 24.005492,23.0649886 C26.4585812,21.1684211 28,18.415103 28,15.3505721 C28,9.63524027 22.6251716,5 15.9981693,5 C9.37116705,5 4,9.63524027 4,15.3505721 C4,21.0659039 9.37116705,25.7084668 15.9981693,25.7084668 C16.8443253,25.7085918 17.6887221,25.6313828 18.5208238,25.4778032 L18.780778,25.4302059 C20.4686499,26.5286041 22.9217391,27.421968 25.0672769,27.421968 C25.7372998,27.421968 26.0485126,26.8764302 25.6237986,26.3235698 C24.9757437,25.5034325 24.0823799,24.2475973 23.7345538,23.2663616 Z M22.2700229,18.7409611 C21.5560641,19.8100686 19.3409611,21.6297483 16.016476,21.6297483 L15.97254,21.6297483 C12.6443936,21.6297483 10.4292906,19.7990847 9.71899314,18.7409611 C9.57610016,18.5841129 9.48084942,18.3898014 9.44439359,18.180778 C9.43329033,18.0479311 9.4771359,17.9163408 9.56570231,17.8167036 C9.65426872,17.7170664 9.77981099,17.6580954 9.91304348,17.6535469 C10.030087,17.6573963 10.1434115,17.6955956 10.2389016,17.7633867 C11.8654801,19.0871958 13.8973189,19.8122986 15.994508,19.8173913 C18.1018351,19.8400381 20.1471166,19.1045684 21.7574371,17.7450801 C21.8437646,17.6671264 21.9559962,17.6240608 22.0723112,17.6242563 C22.3357824,17.6242486 22.5499338,17.8367653 22.5519451,18.1002288 C22.521169,18.3343594 22.4275401,18.5557793 22.2810069,18.7409611 L22.2700229,18.7409611 Z\" fill=\"url(#").concat(id, ")\"></path>\n    </g>\n  </svg>");
+  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 x1=\"50%\" x2=\"50%\" y1=\"109.344%\" y2=\"50%\" 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=\"M23.7345538,23.2663616 C23.7345538,23.2663616 23.8370709,23.1967963 24.005492,23.0649886 C26.4585812,21.1684211 28,18.415103 28,15.3505721 C28,9.63524027 22.6251716,5 15.9981693,5 C9.37116705,5 4,9.63524027 4,15.3505721 C4,21.0659039 9.37116705,25.7084668 15.9981693,25.7084668 C16.8443253,25.7085918 17.6887221,25.6313828 18.5208238,25.4778032 L18.780778,25.4302059 C20.4686499,26.5286041 22.9217391,27.421968 25.0672769,27.421968 C25.7372998,27.421968 26.0485126,26.8764302 25.6237986,26.3235698 C24.9757437,25.5034325 24.0823799,24.2475973 23.7345538,23.2663616 Z M22.2700229,18.7409611 C21.5560641,19.8100686 19.3409611,21.6297483 16.016476,21.6297483 L15.97254,21.6297483 C12.6443936,21.6297483 10.4292906,19.7990847 9.71899314,18.7409611 C9.57610016,18.5841129 9.48084942,18.3898014 9.44439359,18.180778 C9.43329033,18.0479311 9.4771359,17.9163408 9.56570231,17.8167036 C9.65426872,17.7170664 9.77981099,17.6580954 9.91304348,17.6535469 C10.030087,17.6573963 10.1434115,17.6955956 10.2389016,17.7633867 C11.8654801,19.0871958 13.8973189,19.8122986 15.994508,19.8173913 C18.1018351,19.8400381 20.1471166,19.1045684 21.7574371,17.7450801 C21.8437646,17.6671264 21.9559962,17.6240608 22.0723112,17.6242563 C22.3357824,17.6242486 22.5499338,17.8367653 22.5519451,18.1002288 C22.521169,18.3343594 22.4275401,18.5557793 22.2810069,18.7409611 L22.2700229,18.7409611 Z\" fill=\"url(#").concat(id, ")\"></path>\n    </g>\n  </svg>");
 };
 /**
  * @deprecated HipchatIcon will be removed from @atlaskit/logo in the next major release.
  */
 
 
-var HipchatIcon = function HipchatIcon(_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 ? 'Hipchat' : _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 HipchatIcon = function HipchatIcon(_ref2) {
+  var _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Hipchat' : _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;
 
   if (process.env.NODE_ENV !== 'production') {
     (0, _warnOnce.default)('HipchatIcon has been deprecated and will be removed from @atlaskit/logo after June 30 2021.');
@@ -50,7 +55,10 @@ var HipchatIcon = function HipchatIcon(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     label: label,
-    svg: svg,
+    svg: svg({
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,