@atlaskit/logo 13.15.1 → 13.15.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/logo
 
+## 13.15.3
+
+### Patch Changes
+
+- [#92971](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92971) [`89925a9d50b2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89925a9d50b2) - [ux] This release tests some Jira Align and Atlas glyph, colour and theming behaviour changes behind a feature flag. If successful, these changes will be enabled in a future release.
+- Updated dependencies
+
+## 13.15.2
+
+### Patch Changes
+
+- [#89713](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89713) [`57d3c407b13c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57d3c407b13c) - [ux] This release tests some glyph, colour and theming behaviour changes behind a feature flag. If successful, these changes will be enabled in a future release.
+
 ## 13.15.1
 
 ### Patch Changes

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

@@ -7,42 +7,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.AtlasIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactUid = require("react-uid");
-var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors2 = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
+var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref) {
+var svg = function svg(_ref, colorMode) {
   var appearance = _ref.appearance;
-  // 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)({
-    appearance: appearance
-  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    var colors = (0, _utils.getColorsFromAppearance)(appearance ? appearance : 'brand', colorMode);
+    return "<svg viewBox=\"0 0 32 32\" focusable=\"false\" aria-hidden=\"true\" height=\"32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g fill=\"".concat(colors.iconColor, "\">\n      <path d=\"M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z\"/>\n      <path d=\"M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z\"/>\n    </g>\n  </svg>");
+  } else {
+    // 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)({
+      appearance: appearance
+    });
 
-  // Brand
-  var colors = {
-    iconGradientStart: '#1D7AFC',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    iconGradientMid: _colors.B400,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    iconGradientStop: _colors.B400
-  };
-  if (appearance === 'neutral') {
-    colors = {
-      iconGradientStart: '#758195',
-      iconGradientMid: '#596A85',
-      iconGradientStop: '#2C3E5D'
+    // Brand
+    var _colors = {
+      iconGradientStart: '#1D7AFC',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      iconGradientMid: _colors2.B400,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      iconGradientStop: _colors2.B400
     };
-  }
-  var baseIconContents = "\n   <linearGradient\n    id=\"".concat(id, "-a\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"10.6592\"\n    x2=\"9.74055\"\n    y1=\"28.7353\"\n    y2=\"4.626\"\n  >\n    <stop offset=\".5\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-b\">\n    <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientMid, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-c\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"28.2733\"\n    x2=\"17.5886\"\n    xlink:href=\"#").concat(id, "-b\"\n    y1=\"17.5235\"\n    y2=\"28.5702\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-d\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"22.0338\"\n    x2=\"22.0338\"\n    y1=\"4.39582\"\n    y2=\"16.4638\"\n  >\n    <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\".59\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-e\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"4.04047\"\n    x2=\"21.5118\"\n    y1=\"17.0305\"\n    y2=\"17.0305\"\n  >\n    <stop offset=\".26\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-f\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"23.0712\"\n    x2=\"26.8865\"\n    xlink:href=\"#").concat(id, "-b\"\n    y1=\"19.8515\"\n    y2=\"15.7949\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-g\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"18.8126\"\n    x2=\"18.8126\"\n    y1=\"28.5318\"\n    y2=\"5.47314\"\n  >\n    <stop offset=\".36\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-h\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"13.0887\"\n    x2=\"13.0887\"\n    y1=\"28.5318\"\n    y2=\"5.48176\"\n  >\n    <stop offset=\".06\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\".58\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n  </linearGradient>\n  <path\n    d=\"m15.9999 28.532c-6.65602 0-12.06802-5.412-12.06802-12.068s5.412-12.068 12.06802-12.068v1.92133c-5.5973 0-10.14602 4.54867-10.14602 10.14597 0 5.5974 4.54872 10.146 10.14602 10.146v1.9214z\"\n    fill=\"url(#").concat(id, "-a)\"\n  />\n  <path\n    d=\"m15.9999 28.5322v-1.9214c5.5974 0 10.146-4.5486 10.146-10.146h1.9214c0 6.656-5.412 12.068-12.068 12.068z\"\n    fill=\"url(#").concat(id, "-c)\"\n  />\n  <path\n    d=\"m28.0678 16.4638h-1.9213c0-5.5973-4.5487-10.14598-10.146-10.14598v-1.92134c6.656 0 12.068 5.41201 12.068 12.06802z\"\n    fill=\"url(#").concat(id, "-d)\"\n  />\n  <path\n    d=\"m21.1405 20.1585c-1.2814-.2506-2.2927-.7053-3.9734-1.4666-.464-.204-.9746-.436-1.5593-.696-.3527-.158-.6773-.2974-1.0027-.436-2.534-1.1234-3.9266-1.736-5.63463-1.736-1.19733 0-2.098.3246-2.59933.9373-.34334.4087-.48267.9373-.38067 1.448l-1.88467.362c-.204-1.0767.074-2.1813.78-3.0353.61267-.7427 1.81934-1.634 4.08467-1.634 2.11663 0 3.82463.7613 6.41463 1.9033.3154.1393.6407.288.9934.436.594.26 1.114.492 1.578.7053 1.606.724 2.488 1.1234 3.5553 1.3274z\"\n    fill=\"url(#").concat(id, "-e)\"\n  />\n  <path\n    d=\"m23.0172 20.3442c-.6407 0-1.2534-.056-1.8754-.1853l.3714-1.8847c.5013.102.9933.1487 1.504.1487 1.188 0 2.0886-.2974 2.6086-.8634s.5387-1.2533.5107-1.6153l1.912-.1673c.102 1.1693-.2507 2.2653-1.0027 3.082-.622.6773-1.8193 1.4853-4.0286 1.4853z\"\n    fill=\"url(#").concat(id, "-f)\"\n  />\n  <path\n    d=\"m16 28.5318v-1.9213c2.7573 0 4.4-2.8127 4.4-7.5194 0-4.7066-1.6707-8.652-5.096-12.29996l1.402-1.318c3.778 4.01934 5.616 8.47536 5.616 13.61796 0 5.8207-2.4227 9.4407-6.322 9.4407z\"\n    fill=\"url(#").concat(id, "-g)\"\n  />\n  <path\n    d=\"m15.9987 28.5318c-4.1494 0-6.52604-3.3787-6.52604-9.2734 0-6.8786 3.00804-10.72198 5.82064-13.77598l1.4114 1.29934c-3.2767 3.56464-5.31 6.88804-5.31 12.47604 0 6.08 2.5066 7.352 4.6046 7.352v1.9213z\"\n    fill=\"url(#").concat(id, "-h)\"\n  />\n  <g fill=\"").concat(colors.iconGradientStart, "\">\n    <path\n      d=\"m10.8565 17.4665c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467c-1.24064 0-2.24664 1.006-2.24664 2.2467s1.006 2.2467 2.24664 2.2467z\"\n    />\n    <path\n      d=\"m21.2418 21.3381c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467-2.2467 1.006-2.2467 2.2467 1.006 2.2467 2.2467 2.2467z\"\n    />\n    <path\n      d=\"m15.9979 7.96062c1.2407 0 2.2467-1.006 2.2467-2.24667 0-1.24066-1.006-2.24666-2.2467-2.24666s-2.2467 1.006-2.2467 2.24666c0 1.24067 1.006 2.24667 2.2467 2.24667z\"\n    />\n  </g>");
+    if (appearance === 'neutral') {
+      _colors = {
+        iconGradientStart: '#758195',
+        iconGradientMid: '#596A85',
+        iconGradientStop: '#2C3E5D'
+      };
+    }
+    var baseIconContents = "\n    <linearGradient\n      id=\"".concat(id, "-a\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"10.6592\"\n      x2=\"9.74055\"\n      y1=\"28.7353\"\n      y2=\"4.626\"\n    >\n      <stop offset=\".5\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\">\n      <stop offset=\"0\" stop-color=\"").concat(_colors.iconGradientMid, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-c\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"28.2733\"\n      x2=\"17.5886\"\n      xlink:href=\"#").concat(id, "-b\"\n      y1=\"17.5235\"\n      y2=\"28.5702\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-d\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"22.0338\"\n      x2=\"22.0338\"\n      y1=\"4.39582\"\n      y2=\"16.4638\"\n    >\n      <stop offset=\"0\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\".59\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-e\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"4.04047\"\n      x2=\"21.5118\"\n      y1=\"17.0305\"\n      y2=\"17.0305\"\n    >\n      <stop offset=\".26\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-f\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"23.0712\"\n      x2=\"26.8865\"\n      xlink:href=\"#").concat(id, "-b\"\n      y1=\"19.8515\"\n      y2=\"15.7949\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-g\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"18.8126\"\n      x2=\"18.8126\"\n      y1=\"28.5318\"\n      y2=\"5.47314\"\n    >\n      <stop offset=\".36\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-h\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"13.0887\"\n      x2=\"13.0887\"\n      y1=\"28.5318\"\n      y2=\"5.48176\"\n    >\n      <stop offset=\".06\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\".58\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n    </linearGradient>\n    <path\n      d=\"m15.9999 28.532c-6.65602 0-12.06802-5.412-12.06802-12.068s5.412-12.068 12.06802-12.068v1.92133c-5.5973 0-10.14602 4.54867-10.14602 10.14597 0 5.5974 4.54872 10.146 10.14602 10.146v1.9214z\"\n      fill=\"url(#").concat(id, "-a)\"\n    />\n    <path\n      d=\"m15.9999 28.5322v-1.9214c5.5974 0 10.146-4.5486 10.146-10.146h1.9214c0 6.656-5.412 12.068-12.068 12.068z\"\n      fill=\"url(#").concat(id, "-c)\"\n    />\n    <path\n      d=\"m28.0678 16.4638h-1.9213c0-5.5973-4.5487-10.14598-10.146-10.14598v-1.92134c6.656 0 12.068 5.41201 12.068 12.06802z\"\n      fill=\"url(#").concat(id, "-d)\"\n    />\n    <path\n      d=\"m21.1405 20.1585c-1.2814-.2506-2.2927-.7053-3.9734-1.4666-.464-.204-.9746-.436-1.5593-.696-.3527-.158-.6773-.2974-1.0027-.436-2.534-1.1234-3.9266-1.736-5.63463-1.736-1.19733 0-2.098.3246-2.59933.9373-.34334.4087-.48267.9373-.38067 1.448l-1.88467.362c-.204-1.0767.074-2.1813.78-3.0353.61267-.7427 1.81934-1.634 4.08467-1.634 2.11663 0 3.82463.7613 6.41463 1.9033.3154.1393.6407.288.9934.436.594.26 1.114.492 1.578.7053 1.606.724 2.488 1.1234 3.5553 1.3274z\"\n      fill=\"url(#").concat(id, "-e)\"\n    />\n    <path\n      d=\"m23.0172 20.3442c-.6407 0-1.2534-.056-1.8754-.1853l.3714-1.8847c.5013.102.9933.1487 1.504.1487 1.188 0 2.0886-.2974 2.6086-.8634s.5387-1.2533.5107-1.6153l1.912-.1673c.102 1.1693-.2507 2.2653-1.0027 3.082-.622.6773-1.8193 1.4853-4.0286 1.4853z\"\n      fill=\"url(#").concat(id, "-f)\"\n    />\n    <path\n      d=\"m16 28.5318v-1.9213c2.7573 0 4.4-2.8127 4.4-7.5194 0-4.7066-1.6707-8.652-5.096-12.29996l1.402-1.318c3.778 4.01934 5.616 8.47536 5.616 13.61796 0 5.8207-2.4227 9.4407-6.322 9.4407z\"\n      fill=\"url(#").concat(id, "-g)\"\n    />\n    <path\n      d=\"m15.9987 28.5318c-4.1494 0-6.52604-3.3787-6.52604-9.2734 0-6.8786 3.00804-10.72198 5.82064-13.77598l1.4114 1.29934c-3.2767 3.56464-5.31 6.88804-5.31 12.47604 0 6.08 2.5066 7.352 4.6046 7.352v1.9213z\"\n      fill=\"url(#").concat(id, "-h)\"\n    />\n    <g fill=\"").concat(_colors.iconGradientStart, "\">\n      <path\n        d=\"m10.8565 17.4665c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467c-1.24064 0-2.24664 1.006-2.24664 2.2467s1.006 2.2467 2.24664 2.2467z\"\n      />\n      <path\n        d=\"m21.2418 21.3381c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467-2.2467 1.006-2.2467 2.2467 1.006 2.2467 2.2467 2.2467z\"\n      />\n      <path\n        d=\"m15.9979 7.96062c1.2407 0 2.2467-1.006 2.2467-2.24667 0-1.24066-1.006-2.24666-2.2467-2.24666s-2.2467 1.006-2.2467 2.24666c0 1.24067 1.006 2.24667 2.2467 2.24667z\"\n      />\n    </g>");
 
-  /**
-   * inverse icons use transparency to achieve a certain gradient effect, requiring a different SVG structure
-   */
-  var inverseIconContents = "\n    <linearGradient id=\"".concat(id, "-inverse-a\" gradientUnits=\"userSpaceOnUse\" x1=\"13.1575\" x2=\"8.62613\" y1=\"25.3248\"\n    y2=\"5.13609\">\n    <stop offset=\"0\" stop-color=\"#fff\" />\n    <stop offset=\".17\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\".92\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-b\">\n    <stop offset=\"0\" stop-color=\"#fff\" />\n    <stop offset=\".18\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".55\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".83\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-c\" gradientUnits=\"userSpaceOnUse\" x1=\"10.6926\" x2=\"20.4159\" xlink:href=\"#").concat(id, "-inverse-b\"\n    y1=\"15.0061\" y2=\"18.9068\" />\n  <linearGradient id=\"").concat(id, "-inverse-d\" gradientUnits=\"userSpaceOnUse\" x1=\"22.7236\" x2=\"20.8289\" xlink:href=\"#").concat(id, "-inverse-b\"\n    y1=\"3.59276\" y2=\"23.2521\" />\n  <linearGradient id=\"").concat(id, "-inverse-e\" gradientUnits=\"userSpaceOnUse\" x1=\"18.8186\" x2=\"18.8186\" y1=\"28.5366\"\n    y2=\"5.46924\">    <stop offset=\".1\" stop-color=\"#fff\" />\n    <stop offset=\".27\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".85\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-f\" gradientUnits=\"userSpaceOnUse\" x1=\"12.5694\" x2=\"13.9441\" y1=\"5.09736\"\n    y2=\"26.7354\">\n    <stop offset=\".03\" stop-color=\"#fff\" />\n    <stop offset=\".1\" stop-color=\"#fff\" stop-opacity=\".9\" />\n    <stop offset=\".29\" stop-color=\"#fff\" stop-opacity=\".68\" />\n    <stop offset=\".38\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    <stop offset=\".65\" stop-color=\"#fff\" stop-opacity=\".65\" />\n    <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".77\" />\n    <stop offset=\".91\" stop-color=\"#fff\" stop-opacity=\".96\" />\n    <stop offset=\".94\" stop-color=\"#fff\" />\n  </linearGradient>\n  <path\n    d=\"m16.0048 6.31409v-1.922c-6.65867 0-12.07267 5.414-12.07267 12.07201 0 .6873.06533 1.356.16733 2.0153 0 .028 0 .0654.00934.0927 1.00266 5.6553 5.9433 9.9647 11.8867 9.9647v-1.922c-5.0334 0-9.22137-3.6774-10.0107-8.488-.06534-.4827.074-.9754.39-1.3654.50133-.6126 1.402-.938 2.6-.938.63133 0 1.226.0834 1.848.2507v-1.9687c-.6033-.13-1.20734-.1953-1.848-.1953-1.30934 0-2.266.2973-2.95334.6967.882-4.71738 5.02404-8.29271 9.98264-8.29271z\"\n    fill=\"url(#").concat(id, "-inverse-a)\" />\n  <path\n    d=\"m17.9639 16.9475c-.464-.204-.9847-.446-1.5787-.706-.3433-.1487-.678-.2974-.9933-.4367-1.8013-.7987-3.1853-1.4113-4.5687-1.6993v1.9686c1.0494.2787 2.1914.78 3.7887 1.486.316.1394.65.288 1.0027.4367.5853.26 1.1053.492 1.56.6967 1.6806.752 2.6933 1.2073 3.9746 1.4673l.3714-1.8853c-1.068-.2134-1.95-.6034-3.5567-1.328z\"\n    fill=\"url(#").concat(id, "-inverse-c)\" />\n  <path\n    d=\"m28.0683 16.2508v-.4734c-.3714-6.34264-5.6367-11.38531-12.0634-11.38531v1.922c5.5254 0 10.0294 4.42931 10.1407 9.92731-.0093.3807-.1207.882-.52 1.3187-.52.5667-1.4207.8633-2.6093.8633-.5107 0-1.0027-.0466-1.5047-.1486l-.3713 1.8853c.622.1207 1.2353.186 1.876.186 1.0586 0 1.8946-.186 2.5353-.464-1.402 3.9187-5.1633 6.7327-9.556 6.7327v1.922c6.6587 0 12.0727-5.414 12.0727-12.0727 0-.074 0-.1393 0-.2133z\"\n    fill=\"url(#").concat(id, "-inverse-d)\" />\n  <path\n    d=\"m16.0046 28.5366v-1.922c2.758 0 4.402-2.814 4.402-7.522s-1.6713-8.6554-5.098-12.3047l1.402-1.31866c3.7793 4.02133 5.618 8.47866 5.618 13.62336 0 5.8226-2.424 9.4446-6.324 9.4446z\"\n    fill=\"url(#").concat(id, "-inverse-e)\" />\n  <path\n    d=\"m16.0047 28.5367c-4.1513 0-6.52863-3.38-6.52863-9.2773 0-6.8814 3.00863-10.72604 5.82263-13.78137l1.4114 1.3c-3.278 3.56597-5.312 6.89067-5.312 12.48137 0 6.0826 2.5073 7.3546 4.606 7.3546v1.922z\"\n    fill=\"url(#").concat(id, "-inverse-f)\" />\n  <g fill=\"#fff\">\n    <path\n      d=\"m10.8601 17.4673c1.2412 0 2.2474-1.0061 2.2474-2.2473s-1.0062-2.2473-2.2474-2.2473c-1.24114 0-2.24731 1.0061-2.24731 2.2473s1.00617 2.2473 2.24731 2.2473z\" />\n    <path\n      d=\"m21.2512 21.3399c1.2412 0 2.2474-1.0062 2.2474-2.2474 0-1.2411-1.0062-2.2473-2.2474-2.2473-1.2411 0-2.2473 1.0062-2.2473 2.2473 0 1.2412 1.0062 2.2474 2.2473 2.2474z\" />\n    <path\n      d=\"m16.0047 7.95805c1.2411 0 2.2473-1.00617 2.2473-2.24734s-1.0062-2.24733-2.2473-2.24733c-1.2412 0-2.2474 1.00616-2.2474 2.24733s1.0062 2.24734 2.2474 2.24734z\" />\n  </g>");
-  return "<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  ".concat(appearance === 'inverse' ? inverseIconContents : baseIconContents, "\n</svg>");
+    /**
+     * inverse icons use transparency to achieve a certain gradient effect, requiring a different SVG structure
+     */
+    var inverseIconContents = "\n      <linearGradient id=\"".concat(id, "-inverse-a\" gradientUnits=\"userSpaceOnUse\" x1=\"13.1575\" x2=\"8.62613\" y1=\"25.3248\"\n      y2=\"5.13609\">\n      <stop offset=\"0\" stop-color=\"#fff\" />\n      <stop offset=\".17\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\".92\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-b\">\n      <stop offset=\"0\" stop-color=\"#fff\" />\n      <stop offset=\".18\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".55\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".83\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-c\" gradientUnits=\"userSpaceOnUse\" x1=\"10.6926\" x2=\"20.4159\" xlink:href=\"#").concat(id, "-inverse-b\"\n      y1=\"15.0061\" y2=\"18.9068\" />\n    <linearGradient id=\"").concat(id, "-inverse-d\" gradientUnits=\"userSpaceOnUse\" x1=\"22.7236\" x2=\"20.8289\" xlink:href=\"#").concat(id, "-inverse-b\"\n      y1=\"3.59276\" y2=\"23.2521\" />\n    <linearGradient id=\"").concat(id, "-inverse-e\" gradientUnits=\"userSpaceOnUse\" x1=\"18.8186\" x2=\"18.8186\" y1=\"28.5366\"\n      y2=\"5.46924\">    <stop offset=\".1\" stop-color=\"#fff\" />\n      <stop offset=\".27\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".85\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-f\" gradientUnits=\"userSpaceOnUse\" x1=\"12.5694\" x2=\"13.9441\" y1=\"5.09736\"\n      y2=\"26.7354\">\n      <stop offset=\".03\" stop-color=\"#fff\" />\n      <stop offset=\".1\" stop-color=\"#fff\" stop-opacity=\".9\" />\n      <stop offset=\".29\" stop-color=\"#fff\" stop-opacity=\".68\" />\n      <stop offset=\".38\" stop-color=\"#fff\" stop-opacity=\".6\" />\n      <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".6\" />\n      <stop offset=\".65\" stop-color=\"#fff\" stop-opacity=\".65\" />\n      <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".77\" />\n      <stop offset=\".91\" stop-color=\"#fff\" stop-opacity=\".96\" />\n      <stop offset=\".94\" stop-color=\"#fff\" />\n    </linearGradient>\n    <path\n      d=\"m16.0048 6.31409v-1.922c-6.65867 0-12.07267 5.414-12.07267 12.07201 0 .6873.06533 1.356.16733 2.0153 0 .028 0 .0654.00934.0927 1.00266 5.6553 5.9433 9.9647 11.8867 9.9647v-1.922c-5.0334 0-9.22137-3.6774-10.0107-8.488-.06534-.4827.074-.9754.39-1.3654.50133-.6126 1.402-.938 2.6-.938.63133 0 1.226.0834 1.848.2507v-1.9687c-.6033-.13-1.20734-.1953-1.848-.1953-1.30934 0-2.266.2973-2.95334.6967.882-4.71738 5.02404-8.29271 9.98264-8.29271z\"\n      fill=\"url(#").concat(id, "-inverse-a)\" />\n    <path\n      d=\"m17.9639 16.9475c-.464-.204-.9847-.446-1.5787-.706-.3433-.1487-.678-.2974-.9933-.4367-1.8013-.7987-3.1853-1.4113-4.5687-1.6993v1.9686c1.0494.2787 2.1914.78 3.7887 1.486.316.1394.65.288 1.0027.4367.5853.26 1.1053.492 1.56.6967 1.6806.752 2.6933 1.2073 3.9746 1.4673l.3714-1.8853c-1.068-.2134-1.95-.6034-3.5567-1.328z\"\n      fill=\"url(#").concat(id, "-inverse-c)\" />\n    <path\n      d=\"m28.0683 16.2508v-.4734c-.3714-6.34264-5.6367-11.38531-12.0634-11.38531v1.922c5.5254 0 10.0294 4.42931 10.1407 9.92731-.0093.3807-.1207.882-.52 1.3187-.52.5667-1.4207.8633-2.6093.8633-.5107 0-1.0027-.0466-1.5047-.1486l-.3713 1.8853c.622.1207 1.2353.186 1.876.186 1.0586 0 1.8946-.186 2.5353-.464-1.402 3.9187-5.1633 6.7327-9.556 6.7327v1.922c6.6587 0 12.0727-5.414 12.0727-12.0727 0-.074 0-.1393 0-.2133z\"\n      fill=\"url(#").concat(id, "-inverse-d)\" />\n    <path\n      d=\"m16.0046 28.5366v-1.922c2.758 0 4.402-2.814 4.402-7.522s-1.6713-8.6554-5.098-12.3047l1.402-1.31866c3.7793 4.02133 5.618 8.47866 5.618 13.62336 0 5.8226-2.424 9.4446-6.324 9.4446z\"\n      fill=\"url(#").concat(id, "-inverse-e)\" />\n    <path\n      d=\"m16.0047 28.5367c-4.1513 0-6.52863-3.38-6.52863-9.2773 0-6.8814 3.00863-10.72604 5.82263-13.78137l1.4114 1.3c-3.278 3.56597-5.312 6.89067-5.312 12.48137 0 6.0826 2.5073 7.3546 4.606 7.3546v1.922z\"\n      fill=\"url(#").concat(id, "-inverse-f)\" />\n    <g fill=\"#fff\">\n      <path\n        d=\"m10.8601 17.4673c1.2412 0 2.2474-1.0061 2.2474-2.2473s-1.0062-2.2473-2.2474-2.2473c-1.24114 0-2.24731 1.0061-2.24731 2.2473s1.00617 2.2473 2.24731 2.2473z\" />\n      <path\n        d=\"m21.2512 21.3399c1.2412 0 2.2474-1.0062 2.2474-2.2474 0-1.2411-1.0062-2.2473-2.2474-2.2473-1.2411 0-2.2473 1.0062-2.2473 2.2473 0 1.2412 1.0062 2.2474 2.2473 2.2474z\" />\n      <path\n        d=\"m16.0047 7.95805c1.2411 0 2.2473-1.00617 2.2473-2.24734s-1.0062-2.24733-2.2473-2.24733c-1.2412 0-2.2474 1.00616-2.2474 2.24733s1.0062 2.24734 2.2474 2.24734z\" />\n    </g>");
+    return "<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    ".concat(appearance === 'inverse' ? inverseIconContents : baseIconContents, "\n  </svg>");
+  }
 };
 
 /**
@@ -61,12 +69,14 @@ var AtlasIcon = exports.AtlasIcon = function AtlasIcon(_ref2) {
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
     testId = _ref2.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance: appearance
-    }),
+    }, colorMode),
     size: size,
     testId: testId
   });

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

@@ -7,45 +7,52 @@ Object.defineProperty(exports, "__esModule", {
 exports.AtlasLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactUid = require("react-uid");
-var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors2 = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
+var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref) {
+var svg = function svg(_ref, colorMode) {
   var appearance = _ref.appearance;
-  // 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)({
-    appearance: appearance
-  });
-
-  // Brand
-  var colors = {
-    iconGradientStart: '#1d7afc',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    iconGradientMid: _colors.B400,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    iconGradientStop: _colors.B400,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    textStart: _colors.B400
-  };
-  if (appearance === 'neutral') {
-    colors = {
-      iconGradientStart: '#758195',
-      iconGradientMid: '#596a85',
-      iconGradientStop: '#2c3e5d',
-      textStart: '#758195'
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    var colors = (0, _utils.getColorsFromAppearance)(appearance ? appearance : 'brand', colorMode);
+    return "<svg viewBox=\"0 0 102 32\" focusable=\"false\" aria-hidden=\"true\" height=\"32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12.068 27.865C5.412 27.865 0 22.453 0 15.797S5.412 3.73 12.068 3.73v1.922c-5.597 0-10.146 4.548-10.146 10.146 0 5.597 4.549 10.145 10.146 10.145z M12.068 27.865v-1.92c5.597 0 10.146-4.55 10.146-10.147h1.921c0 6.656-5.412 12.068-12.068 12.068h.001Zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V3.73c6.656 0 12.068 5.412 12.068 12.068zm-6.927 3.695c-1.282-.25-2.293-.705-3.974-1.466-.464-.204-.974-.436-1.559-.696a58 58 0 0 0-1.003-.436C8.14 15.77 6.747 15.158 5.04 15.158c-1.198 0-2.098.324-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.705 1.606.724 2.488 1.124 3.555 1.328l-.371 1.884Z M19.085 19.677c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.15 1.504.15 1.188 0 2.089-.298 2.609-.864s.539-1.254.51-1.616l1.913-.167c.102 1.17-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485 M12.068 27.865v-1.92c2.757 0 4.4-2.814 4.4-7.52 0-4.707-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.475 5.616 13.618 0 5.82-2.423 9.44-6.322 9.44 M12.067 27.866c-4.15 0-6.526-3.379-6.526-9.274 0-6.878 3.008-10.722 5.82-13.776l1.412 1.3c-3.277 3.564-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352v1.921Z\" fill=\"".concat(colors.iconColor, "\"/>\n      <path d=\"M6.925 16.8a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.872a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M12.066 7.294a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494\" fill=\"").concat(colors.iconColor, "\"/>\n      <path d=\"M101.019 21.163c0 2.545-1.656 4.477-5.766 4.477-2.3 0-4.17-.521-5.336-1.135v-2.79c1.319.766 3.527 1.502 5.459 1.502 2.024 0 3.067-.828 3.067-2.024 0-1.165-.89-1.84-3.803-2.545-3.404-.828-4.845-2.147-4.845-4.661 0-2.668 2.054-4.294 5.55-4.294 1.994 0 3.803.491 4.938 1.104v2.73c-1.84-.92-3.343-1.411-4.968-1.411-1.932 0-2.975.675-2.975 1.87 0 1.074.736 1.749 3.557 2.423 3.404.828 5.122 2.086 5.122 4.754m-25.873-3.496c0 3.68 1.472 5.52 4.2 5.52 2.362 0 4.478-1.503 4.478-4.907v-1.227c0-3.404-1.932-4.906-4.17-4.906-2.975 0-4.508 1.962-4.508 5.52m8.678 7.666v-2.76c-.981 2.024-2.821 3.067-5.182 3.067-4.08 0-6.134-3.465-6.134-7.973 0-4.324 2.147-7.974 6.44-7.974 2.239 0 3.956 1.012 4.876 3.006V10h2.638v15.333zm-12.784-.03c-.214.061-.674.122-1.349.122-2.514 0-4.11-1.196-4.11-4.017V3.591h2.638V21.1c0 1.38.92 1.871 2.055 1.871.276 0 .46 0 .767-.03v2.36ZM58.12 20.58c0 1.35.798 2.27 2.423 2.27.614 0 1.196-.123 1.656-.215v2.545a6.3 6.3 0 0 1-1.779.245c-3.28 0-4.876-1.932-4.876-4.784v-8.188h-2.483V10h2.483V6.75h2.577V10h4.078v2.453h-4.078v8.127Zm-14.675.736c-1.533 0-3.097-.184-4.814-.521l-1.687 4.538h-3.097l7.942-20.148h3.496l7.943 20.148h-3.097l-1.687-4.569c-1.81.368-3.373.552-4.999.552m0-2.453c1.288 0 2.607-.154 4.171-.399l-4.079-11.04-4.078 11.07c1.502.246 2.76.369 3.986.369\" fill=\"").concat(colors.textColor, "\"/>\n    </svg>");
+  } else {
+    // 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)({
+      appearance: appearance
+    });
+    // Brand
+    var _colors = {
+      iconGradientStart: '#1d7afc',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      iconGradientStop: _colors2.B400,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      textColor: _colors2.B400,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      iconGradientMid: _colors2.B400
     };
-  }
-  var baseIconContents = "\n  <linearGradient\n    id=\"".concat(id, "-a\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"6.72733\"\n    x2=\"5.808\"\n    y1=\"28.2142\"\n    y2=\"4.10482\"\n  >\n    <stop offset=\".5\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-b\">\n    <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientMid, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-c\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"24.3414\"\n    x2=\"13.6567\"\n    xlink:href=\"#").concat(id, "-b\"\n    y1=\"17.0027\"\n    y2=\"28.0494\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-d\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"18.1021\"\n    x2=\"18.1021\"\n    y1=\"3.87549\"\n    y2=\"15.9428\"\n  >\n    <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\".59\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-e\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\".108585\"\n    x2=\"17.5793\"\n    y1=\"16.5093\"\n    y2=\"16.5093\"\n  >\n    <stop offset=\".26\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-f\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"19.1392\"\n    x2=\"22.9546\"\n    xlink:href=\"#").concat(id, "-b\"\n    y1=\"19.33\"\n    y2=\"15.2734\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-g\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"14.8807\"\n    x2=\"14.8807\"\n    y1=\"28.0108\"\n    y2=\"4.95215\"\n  >\n    <stop offset=\".36\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-h\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"9.15677\"\n    x2=\"9.15677\"\n    y1=\"28.0108\"\n    y2=\"4.96143\"\n  >\n    <stop offset=\".06\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n    <stop offset=\".58\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-i\">\n    <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n    <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStart, "\" />\n  </linearGradient>\n  <linearGradient\n    id=\"").concat(id, "-j\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"95.6987\"\n    x2=\"29.214\"\n    xlink:href=\"#").concat(id, "-i\"\n    y1=\"-1.89809\"\n    y2=\"20.5853\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-k\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"97.0621\"\n    x2=\"30.5774\"\n    xlink:href=\"#").concat(id, "-i\"\n    y1=\"2.12082\"\n    y2=\"24.6042\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-l\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"97.5167\"\n    x2=\"31.0327\"\n    xlink:href=\"#").concat(id, "-i\"\n    y1=\"3.47941\"\n    y2=\"25.9627\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-m\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"101.28\"\n    x2=\"34.7954\"\n    xlink:href=\"#").concat(id, "-i\"\n    y1=\"14.583\"\n    y2=\"37.075\"\n  />\n  <linearGradient\n    id=\"").concat(id, "-n\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"99.9401\"\n    x2=\"33.4561\"\n    xlink:href=\"#").concat(id, "-i\"\n    y1=\"10.6227\"\n    y2=\"33.106\"\n  />\n  <path\n    d=\"m12.068 28.0108c-6.656 0-12.068-5.412-12.068-12.068 0-6.65598 5.412-12.06731 12.068-12.06731v1.92133c-5.59733 0-10.146 4.54868-10.146 10.14598 0 5.5974 4.54867 10.146 10.146 10.146v1.9214z\"\n    fill=\"url(#").concat(id, "-a)\"\n  />\n  <path\n    d=\"m12.068 28.0107v-1.9213c5.5974 0 10.146-4.5487 10.146-10.146h1.9214c0 6.656-5.412 12.068-12.068 12.068z\"\n    fill=\"url(#").concat(id, "-c)\"\n  />\n  <path\n    d=\"m24.1354 15.9428h-1.9213c0-5.5973-4.5487-10.14598-10.146-10.14598v-1.92133c6.656 0 12.068 5.412 12.068 12.06801z\"\n    fill=\"url(#").concat(id, "-d)\"\n  />\n  <path\n    d=\"m17.2086 19.638c-1.2813-.2507-2.2927-.7053-3.9733-1.4667-.464-.204-.9747-.436-1.5594-.696-.3526-.158-.6773-.2973-1.0026-.436-2.53405-1.1233-3.92671-1.736-5.63471-1.736-1.19734 0-2.098.3247-2.59934.9374-.34333.4086-.48266.9373-.38066 1.448l-1.884671.362c-.2040002-1.0767.074-2.1814.78-3.0354.612671-.7426 1.819331-1.634 4.084671-1.634 2.11666 0 3.82466.7614 6.41471 1.9034.3153.1393.6406.288.9933.436.594.26 1.114.492 1.578.7053 1.606.724 2.488 1.1233 3.5553 1.3273z\"\n    fill=\"url(#").concat(id, "-e)\"\n  />\n  <path\n    d=\"m19.0846 19.8227c-.6407 0-1.2534-.056-1.8754-.1853l.3714-1.8847c.5013.102.9933.1487 1.504.1487 1.188 0 2.0886-.2974 2.6086-.8634s.5387-1.2533.5107-1.6153l1.912-.1673c.102 1.1693-.2507 2.2653-1.0027 3.082-.622.6773-1.8193 1.4853-4.0286 1.4853z\"\n    fill=\"url(#").concat(id, "-f)\"\n  />\n  <path\n    d=\"m12.0681 28.0108v-1.9213c2.7573 0 4.4-2.8127 4.4-7.5194 0-4.7066-1.6707-8.65195-5.096-12.29995l1.402-1.318c3.778 4.01933 5.616 8.47535 5.616 13.61795 0 5.8207-2.4227 9.4407-6.322 9.4407z\"\n    fill=\"url(#").concat(id, "-g)\"\n  />\n  <path\n    d=\"m12.0668 28.0108c-4.14936 0-6.52603-3.3787-6.52603-9.2734 0-6.8786 3.008-10.72197 5.82063-13.77597l1.4114 1.29933c-3.27669 3.56467-5.31003 6.88804-5.31003 12.47604 0 6.08 2.50667 7.352 4.60463 7.352v1.9213z\"\n    fill=\"url(#").concat(id, "-h)\"\n  />\n  <g fill=\"").concat(colors.iconGradientStart, "\">\n    <path\n      d=\"m6.92391 16.9455c1.24067 0 2.24667-1.006 2.24667-2.2467s-1.006-2.2467-2.24667-2.2467c-1.24066 0-2.24666 1.006-2.24666 2.2467s1.006 2.2467 2.24666 2.2467z\"\n    />\n    <path\n      d=\"m17.3094 20.8166c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467-2.2467 1.006-2.2467 2.2467 1.006 2.2467 2.2467 2.2467z\"\n    />\n    <path\n      d=\"m12.066 7.44011c1.2407 0 2.2467-1.006 2.2467-2.24667 0-1.24066-1.006-2.24666-2.2467-2.24666s-2.24666 1.006-2.24666 2.24666c0 1.24067 1.00596 2.24667 2.24666 2.24667z\"\n    />\n  </g>\n  <path\n    d=\"m34.6727 21.2726-1.68 4.53h-3.0913l7.9273-20.12535h3.4907l7.9366 20.12535h-3.0913l-1.6893-4.5674c-1.81.3714-3.37.548-4.994.548-1.532 0-3.0914-.1853-4.8087-.52zm8.9767-2.33-4.0754-11.02802-4.0753 11.05602c1.504.2413 2.7573.3713 3.9827.3713 1.29 0 2.6086-.158 4.168-.3993z\"\n    fill=\"url(#").concat(id, "-j)\"\n  />\n  <path\n    d=\"m56.3748 23.3242c.6126 0 1.1973-.1207 1.6526-.2134v2.5434c-.464.1206-.984.2413-1.7733.2413-3.2767 0-4.8733-1.9307-4.8733-4.7807v-8.178h-2.4787v-2.4506h2.4787v-3.24938h2.5713v3.24938h4.0753v2.4506h-4.0753v8.1227c0 1.346.798 2.2653 2.4227 2.2653z\"\n    fill=\"url(#").concat(id, "-k)\"\n  />\n  <path\n    d=\"m65.044 25.8947c-2.516 0-4.1033-1.1973-4.1033-4.01v-17.80462h2.6366v17.49862c0 1.3834.9194 1.866 2.0514 1.866.2786 0 .464 0 .7613-.028v2.358c-.2133.0647-.6773.1207-1.346.1207z\"\n    fill=\"url(#").concat(id, "-l)\"\n  />\n  <path\n    d=\"m90.5908 26.109c-2.302 0-4.168-.52-5.3287-1.1326v-2.7847c1.318.7613 3.5273 1.504 5.4493 1.504s3.0634-.826 3.0634-2.024-.8914-1.838-3.7967-2.5433c-3.3973-.826-4.836-2.1447-4.836-4.66 0-2.664 2.0513-4.2887 5.542-4.2887 1.996 0 3.7967.492 4.9293 1.1047v2.7293c-1.838-.9193-3.342-1.4113-4.9666-1.4113-1.9307 0-2.9707.6773-2.9707 1.866 0 1.0673.7333 1.7453 3.5553 2.4226 3.398.826 5.1154 2.0794 5.1154 4.7527s-1.6527 4.4747-5.7647 4.4747l.0093-.0094z\"\n    fill=\"url(#").concat(id, "-m)\"\n  />\n  <path\n    d=\"m82.7488 23.4447c-.7427 0-1.0767-.3067-1.0767-1.29v-11.6693h-2.6367v2.692c-.9193-1.996-2.6366-2.9987-4.8733-2.9987-4.2887 0-6.4333 3.648-6.4333 7.9647 0 4.3166 2.0886 7.9646 6.2286 7.9646 2.6087 0 4.1307-1.1326 5.124-3.1193.232 1.894 1.42 2.896 3.11 2.896.5387 0 .91-.0467 1.1694-.1207v-2.358c-.3067.028-.334.028-.6127.028v.0094zm-3.7134-4.688c0 3.3973-2.1166 4.9013-4.4746 4.9013-2.7294 0-4.196-1.838-4.196-5.514s1.532-5.514 4.502-5.514c2.2373 0 4.168 1.504 4.168 4.9014v1.2253z\"\n    fill=\"url(#").concat(id, "-n)\"\n  />");
+    if (appearance === 'neutral') {
+      _colors = {
+        iconGradientStart: '#758195',
+        iconGradientStop: '#2c3e5d',
+        textColor: '#758195',
+        iconGradientMid: '#596a85'
+      };
+    }
+    var baseIconContents = "\n    <linearGradient\n      id=\"".concat(id, "-a\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"6.72733\"\n      x2=\"5.808\"\n      y1=\"28.2142\"\n      y2=\"4.10482\"\n    >\n      <stop offset=\".5\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\">\n      <stop offset=\"0\" stop-color=\"").concat(_colors.iconGradientMid, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-c\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"24.3414\"\n      x2=\"13.6567\"\n      xlink:href=\"#").concat(id, "-b\"\n      y1=\"17.0027\"\n      y2=\"28.0494\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-d\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"18.1021\"\n      x2=\"18.1021\"\n      y1=\"3.87549\"\n      y2=\"15.9428\"\n    >\n      <stop offset=\"0\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\".59\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-e\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\".108585\"\n      x2=\"17.5793\"\n      y1=\"16.5093\"\n      y2=\"16.5093\"\n    >\n      <stop offset=\".26\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-f\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"19.1392\"\n      x2=\"22.9546\"\n      xlink:href=\"#").concat(id, "-b\"\n      y1=\"19.33\"\n      y2=\"15.2734\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-g\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"14.8807\"\n      x2=\"14.8807\"\n      y1=\"28.0108\"\n      y2=\"4.95215\"\n    >\n      <stop offset=\".36\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-h\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"9.15677\"\n      x2=\"9.15677\"\n      y1=\"28.0108\"\n      y2=\"4.96143\"\n    >\n      <stop offset=\".06\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n      <stop offset=\".58\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-i\">\n      <stop offset=\"0\" stop-color=\"").concat(_colors.iconGradientStop, "\" />\n      <stop offset=\"1\" stop-color=\"").concat(_colors.iconGradientStart, "\" />\n    </linearGradient>\n    <linearGradient\n      id=\"").concat(id, "-j\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"95.6987\"\n      x2=\"29.214\"\n      xlink:href=\"#").concat(id, "-i\"\n      y1=\"-1.89809\"\n      y2=\"20.5853\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-k\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"97.0621\"\n      x2=\"30.5774\"\n      xlink:href=\"#").concat(id, "-i\"\n      y1=\"2.12082\"\n      y2=\"24.6042\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-l\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"97.5167\"\n      x2=\"31.0327\"\n      xlink:href=\"#").concat(id, "-i\"\n      y1=\"3.47941\"\n      y2=\"25.9627\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-m\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"101.28\"\n      x2=\"34.7954\"\n      xlink:href=\"#").concat(id, "-i\"\n      y1=\"14.583\"\n      y2=\"37.075\"\n    />\n    <linearGradient\n      id=\"").concat(id, "-n\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"99.9401\"\n      x2=\"33.4561\"\n      xlink:href=\"#").concat(id, "-i\"\n      y1=\"10.6227\"\n      y2=\"33.106\"\n    />\n    <path\n      d=\"m12.068 28.0108c-6.656 0-12.068-5.412-12.068-12.068 0-6.65598 5.412-12.06731 12.068-12.06731v1.92133c-5.59733 0-10.146 4.54868-10.146 10.14598 0 5.5974 4.54867 10.146 10.146 10.146v1.9214z\"\n      fill=\"url(#").concat(id, "-a)\"\n    />\n    <path\n      d=\"m12.068 28.0107v-1.9213c5.5974 0 10.146-4.5487 10.146-10.146h1.9214c0 6.656-5.412 12.068-12.068 12.068z\"\n      fill=\"url(#").concat(id, "-c)\"\n    />\n    <path\n      d=\"m24.1354 15.9428h-1.9213c0-5.5973-4.5487-10.14598-10.146-10.14598v-1.92133c6.656 0 12.068 5.412 12.068 12.06801z\"\n      fill=\"url(#").concat(id, "-d)\"\n    />\n    <path\n      d=\"m17.2086 19.638c-1.2813-.2507-2.2927-.7053-3.9733-1.4667-.464-.204-.9747-.436-1.5594-.696-.3526-.158-.6773-.2973-1.0026-.436-2.53405-1.1233-3.92671-1.736-5.63471-1.736-1.19734 0-2.098.3247-2.59934.9374-.34333.4086-.48266.9373-.38066 1.448l-1.884671.362c-.2040002-1.0767.074-2.1814.78-3.0354.612671-.7426 1.819331-1.634 4.084671-1.634 2.11666 0 3.82466.7614 6.41471 1.9034.3153.1393.6406.288.9933.436.594.26 1.114.492 1.578.7053 1.606.724 2.488 1.1233 3.5553 1.3273z\"\n      fill=\"url(#").concat(id, "-e)\"\n    />\n    <path\n      d=\"m19.0846 19.8227c-.6407 0-1.2534-.056-1.8754-.1853l.3714-1.8847c.5013.102.9933.1487 1.504.1487 1.188 0 2.0886-.2974 2.6086-.8634s.5387-1.2533.5107-1.6153l1.912-.1673c.102 1.1693-.2507 2.2653-1.0027 3.082-.622.6773-1.8193 1.4853-4.0286 1.4853z\"\n      fill=\"url(#").concat(id, "-f)\"\n    />\n    <path\n      d=\"m12.0681 28.0108v-1.9213c2.7573 0 4.4-2.8127 4.4-7.5194 0-4.7066-1.6707-8.65195-5.096-12.29995l1.402-1.318c3.778 4.01933 5.616 8.47535 5.616 13.61795 0 5.8207-2.4227 9.4407-6.322 9.4407z\"\n      fill=\"url(#").concat(id, "-g)\"\n    />\n    <path\n      d=\"m12.0668 28.0108c-4.14936 0-6.52603-3.3787-6.52603-9.2734 0-6.8786 3.008-10.72197 5.82063-13.77597l1.4114 1.29933c-3.27669 3.56467-5.31003 6.88804-5.31003 12.47604 0 6.08 2.50667 7.352 4.60463 7.352v1.9213z\"\n      fill=\"url(#").concat(id, "-h)\"\n    />\n    <g fill=\"").concat(_colors.iconGradientStart, "\">\n      <path\n        d=\"m6.92391 16.9455c1.24067 0 2.24667-1.006 2.24667-2.2467s-1.006-2.2467-2.24667-2.2467c-1.24066 0-2.24666 1.006-2.24666 2.2467s1.006 2.2467 2.24666 2.2467z\"\n      />\n      <path\n        d=\"m17.3094 20.8166c1.2407 0 2.2467-1.006 2.2467-2.2467s-1.006-2.2467-2.2467-2.2467-2.2467 1.006-2.2467 2.2467 1.006 2.2467 2.2467 2.2467z\"\n      />\n      <path\n        d=\"m12.066 7.44011c1.2407 0 2.2467-1.006 2.2467-2.24667 0-1.24066-1.006-2.24666-2.2467-2.24666s-2.24666 1.006-2.24666 2.24666c0 1.24067 1.00596 2.24667 2.24666 2.24667z\"\n      />\n    </g>\n    <path\n      d=\"m34.6727 21.2726-1.68 4.53h-3.0913l7.9273-20.12535h3.4907l7.9366 20.12535h-3.0913l-1.6893-4.5674c-1.81.3714-3.37.548-4.994.548-1.532 0-3.0914-.1853-4.8087-.52zm8.9767-2.33-4.0754-11.02802-4.0753 11.05602c1.504.2413 2.7573.3713 3.9827.3713 1.29 0 2.6086-.158 4.168-.3993z\"\n      fill=\"url(#").concat(id, "-j)\"\n    />\n    <path\n      d=\"m56.3748 23.3242c.6126 0 1.1973-.1207 1.6526-.2134v2.5434c-.464.1206-.984.2413-1.7733.2413-3.2767 0-4.8733-1.9307-4.8733-4.7807v-8.178h-2.4787v-2.4506h2.4787v-3.24938h2.5713v3.24938h4.0753v2.4506h-4.0753v8.1227c0 1.346.798 2.2653 2.4227 2.2653z\"\n      fill=\"url(#").concat(id, "-k)\"\n    />\n    <path\n      d=\"m65.044 25.8947c-2.516 0-4.1033-1.1973-4.1033-4.01v-17.80462h2.6366v17.49862c0 1.3834.9194 1.866 2.0514 1.866.2786 0 .464 0 .7613-.028v2.358c-.2133.0647-.6773.1207-1.346.1207z\"\n      fill=\"url(#").concat(id, "-l)\"\n    />\n    <path\n      d=\"m90.5908 26.109c-2.302 0-4.168-.52-5.3287-1.1326v-2.7847c1.318.7613 3.5273 1.504 5.4493 1.504s3.0634-.826 3.0634-2.024-.8914-1.838-3.7967-2.5433c-3.3973-.826-4.836-2.1447-4.836-4.66 0-2.664 2.0513-4.2887 5.542-4.2887 1.996 0 3.7967.492 4.9293 1.1047v2.7293c-1.838-.9193-3.342-1.4113-4.9666-1.4113-1.9307 0-2.9707.6773-2.9707 1.866 0 1.0673.7333 1.7453 3.5553 2.4226 3.398.826 5.1154 2.0794 5.1154 4.7527s-1.6527 4.4747-5.7647 4.4747l.0093-.0094z\"\n      fill=\"url(#").concat(id, "-m)\"\n    />\n    <path\n      d=\"m82.7488 23.4447c-.7427 0-1.0767-.3067-1.0767-1.29v-11.6693h-2.6367v2.692c-.9193-1.996-2.6366-2.9987-4.8733-2.9987-4.2887 0-6.4333 3.648-6.4333 7.9647 0 4.3166 2.0886 7.9646 6.2286 7.9646 2.6087 0 4.1307-1.1326 5.124-3.1193.232 1.894 1.42 2.896 3.11 2.896.5387 0 .91-.0467 1.1694-.1207v-2.358c-.3067.028-.334.028-.6127.028v.0094zm-3.7134-4.688c0 3.3973-2.1166 4.9013-4.4746 4.9013-2.7294 0-4.196-1.838-4.196-5.514s1.532-5.514 4.502-5.514c2.2373 0 4.168 1.504 4.168 4.9014v1.2253z\"\n      fill=\"url(#").concat(id, "-n)\"\n    />");
 
-  /**
-   * inverse icons use transparency to achieve a certain gradient effect, requiring a different SVG structure
-   */
-  var inverseIconContents = "\n  <linearGradient id=\"".concat(id, "-inverse-a\">\n    <stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    <stop offset=\"1\" stop-color=\"#fff\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-b\" gradientUnits=\"userSpaceOnUse\" x1=\"95.6972\" x2=\"29.2126\" xlink:href=\"#").concat(id, "-inverse-a\"\n    y1=\"-1.88441\" y2=\"20.5989\" />\n  <linearGradient id=\"").concat(id, "-inverse-c\" gradientUnits=\"userSpaceOnUse\" x1=\"97.0604\" x2=\"30.5757\" xlink:href=\"#").concat(id, "-inverse-a\"\n    y1=\"2.13449\" y2=\"24.6178\" />\n  <linearGradient id=\"").concat(id, "-inverse-d\" gradientUnits=\"userSpaceOnUse\" x1=\"97.5154\" x2=\"31.0315\" xlink:href=\"#").concat(id, "-inverse-a\"\n    y1=\"3.49308\" y2=\"25.9764\" />\n  <linearGradient id=\"").concat(id, "-inverse-e\" gradientUnits=\"userSpaceOnUse\" x1=\"101.279\" x2=\"34.794\" xlink:href=\"#").concat(id, "-inverse-a\"\n    y1=\"14.5962\" y2=\"37.0882\" />\n  <linearGradient id=\"").concat(id, "-inverse-f\" gradientUnits=\"userSpaceOnUse\" x1=\"99.9384\" x2=\"33.4544\" xlink:href=\"#").concat(id, "-inverse-a\"\n    y1=\"10.6359\" y2=\"33.1192\" />\n  <linearGradient id=\"").concat(id, "-inverse-g\" gradientUnits=\"userSpaceOnUse\" x1=\"9.22533\" x2=\"4.69333\" y1=\"25.3248\"\n    y2=\"5.13609\">\n    <stop offset=\"0\" stop-color=\"#fff\" />\n    <stop offset=\".17\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\".92\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-h\">\n    <stop offset=\"0\" stop-color=\"#fff\" />\n    <stop offset=\".18\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".55\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".83\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-i\" gradientUnits=\"userSpaceOnUse\" x1=\"6.76069\" x2=\"16.4834\" xlink:href=\"#").concat(id, "-inverse-h\"\n    y1=\"15.0061\" y2=\"18.9068\" />\n  <linearGradient id=\"").concat(id, "-inverse-j\" gradientUnits=\"userSpaceOnUse\" x1=\"18.7907\" x2=\"16.8967\" xlink:href=\"#").concat(id, "-inverse-h\"\n    y1=\"3.59276\" y2=\"23.2521\" />\n  <linearGradient id=\"").concat(id, "-inverse-k\" gradientUnits=\"userSpaceOnUse\" x1=\"14.886\" x2=\"14.886\" y1=\"28.5366\"\n    y2=\"5.46924\">\n    <stop offset=\".1\" stop-color=\"#fff\" />\n    <stop offset=\".27\" stop-color=\"#fff\" stop-opacity=\".91\" />\n    <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".74\" />\n    <stop offset=\".85\" stop-color=\"#fff\" stop-opacity=\".64\" />\n    <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n  </linearGradient>\n  <linearGradient id=\"").concat(id, "-inverse-l\" gradientUnits=\"userSpaceOnUse\" x1=\"8.63728\" x2=\"10.0113\" y1=\"5.09736\"\n    y2=\"26.7354\">\n    <stop offset=\".03\" stop-color=\"#fff\" />\n    <stop offset=\".1\" stop-color=\"#fff\" stop-opacity=\".9\" />\n    <stop offset=\".29\" stop-color=\"#fff\" stop-opacity=\".68\" />\n    <stop offset=\".38\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    <stop offset=\".65\" stop-color=\"#fff\" stop-opacity=\".65\" />\n    <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".77\" />\n    <stop offset=\".91\" stop-color=\"#fff\" stop-opacity=\".96\" />\n    <stop offset=\".94\" stop-color=\"#fff\" />\n  </linearGradient>\n  <path\n    d=\"m34.6712 21.2863-1.68 4.5299h-3.0913l7.9273-20.12528h3.4907l7.9367 20.12528h-3.0914l-1.6893-4.5673c-1.81.3714-3.37.548-4.994.548-1.532 0-3.0913-.1853-4.8087-.52zm8.9767-2.33-4.0753-11.02805-4.0754 11.05605c1.504.2413 2.7574.3713 3.9827.3713 1.29 0 2.6087-.158 4.168-.3993z\"\n    fill=\"url(#").concat(id, "-inverse-b)\" />\n  <path\n    d=\"m56.3731 23.3378c.6126 0 1.1973-.1206 1.6526-.2133v2.5433c-.464.1207-.984.2414-1.7733.2414-3.2767 0-4.8733-1.9307-4.8733-4.7807v-8.178h-2.4787v-2.4507h2.4787v-3.24931h2.5713v3.24931h4.0753v2.4507h-4.0753v8.1227c0 1.346.798 2.2653 2.4227 2.2653z\"\n    fill=\"url(#").concat(id, "-inverse-c)\" />\n  <path\n    d=\"m65.0428 25.9084c-2.516 0-4.1033-1.1973-4.1033-4.01v-17.80465h2.6366v17.49865c0 1.3833.9193 1.866 2.0513 1.866.2787 0 .464 0 .7614-.028v2.358c-.2134.0647-.6774.1207-1.346.1207z\"\n    fill=\"url(#").concat(id, "-inverse-d)\" />\n  <path\n    d=\"m90.5893 26.1222c-2.302 0-4.168-.52-5.3287-1.1327v-2.7846c1.318.7613 3.5274 1.504 5.4494 1.504s3.0633-.826 3.0633-2.024-.8913-1.838-3.7967-2.5434c-3.3973-.826-4.836-2.1446-4.836-4.66 0-2.664 2.0514-4.2886 5.542-4.2886 1.996 0 3.7967.492 4.9294 1.1046v2.7294c-1.838-.9194-3.342-1.4114-4.9667-1.4114-1.9307 0-2.9707.6774-2.9707 1.866 0 1.0674.7334 1.7454 3.5554 2.4227 3.398.826 5.1153 2.0793 5.1153 4.7527 0 2.6733-1.6527 4.4746-5.7647 4.4746l.0094-.0093z\"\n    fill=\"url(#").concat(id, "-inverse-e)\" />\n  <path\n    d=\"m82.747 23.4579c-.7426 0-1.0766-.3067-1.0766-1.29v-11.6693h-2.6367v2.692c-.9193-1.996-2.6367-2.9987-4.8733-2.9987-4.2887 0-6.4333 3.648-6.4333 7.9647 0 4.3166 2.0886 7.9646 6.2286 7.9646 2.6087 0 4.1307-1.1326 5.124-3.1193.232 1.894 1.42 2.896 3.11 2.896.5387 0 .91-.0467 1.1693-.1207v-2.358c-.3066.028-.334.028-.6126.028v.0094zm-3.7133-4.688c0 3.3973-2.1166 4.9013-4.4746 4.9013-2.7294 0-4.1961-1.838-4.1961-5.514s1.5321-5.514 4.5021-5.514c2.2373 0 4.1679 1.504 4.1679 4.9014v1.2253z\"\n    fill=\"url(#").concat(id, "-inverse-f)\" />\n  <path\n    d=\"m12.0727 6.31409v-1.922c-6.6587 0-12.0727 5.414-12.0727 12.07201 0 .6873.0653333 1.356.167333 2.0153 0 .028 0 .0654.009334.0927 1.002663 5.6553 5.943333 9.9647 11.886633 9.9647v-1.922c-5.0333 0-9.2213-3.6774-10.01063-8.488-.06534-.4827.074-.9754.39-1.3654.50133-.6126 1.402-.938 2.6-.938.63133 0 1.226.0834 1.848.2507v-1.9687c-.60334-.13-1.20734-.1953-1.848-.1953-1.30934 0-2.266.2973-2.95334.6967.882-4.71738 5.024-8.29271 9.98267-8.29271z\"\n    fill=\"url(#").concat(id, "-inverse-g)\" />\n  <path\n    d=\"m14.032 16.9475c-.464-.204-.9846-.446-1.5786-.706-.3434-.1487-.678-.2974-.9934-.4367-1.80131-.7987-3.18531-1.4113-4.56864-1.6993v1.9686c1.04933.2787 2.19133.78 3.78864 1.486.316.1394.65.288 1.0027.4367.5853.26 1.1053.492 1.56.6967 1.6807.752 2.6933 1.2073 3.9747 1.4673l.3713-1.8853c-1.068-.2134-1.95-.6034-3.5567-1.328z\"\n    fill=\"url(#").concat(id, "-inverse-i)\" />\n  <path\n    d=\"m24.1354 16.2508v-.4734c-.3713-6.34264-5.6367-11.38531-12.0633-11.38531v1.922c5.5253 0 10.0293 4.42931 10.1406 9.92731-.0093.3807-.1206.882-.52 1.3187-.52.5667-1.4206.8633-2.6093.8633-.5107 0-1.0027-.0466-1.5047-.1486l-.3713 1.8853c.622.1207 1.2353.186 1.876.186 1.0587 0 1.8947-.186 2.5353-.464-1.402 3.9187-5.1633 6.7327-9.556 6.7327v1.922c6.6587 0 12.0727-5.414 12.0727-12.0727 0-.074 0-.1393 0-.2133z\"\n    fill=\"url(#").concat(id, "-inverse-j)\" />\n  <path\n    d=\"m12.0727 28.5366v-1.922c2.758 0 4.402-2.814 4.402-7.522s-1.6713-8.6554-5.098-12.3047l1.402-1.31866c3.7793 4.02133 5.618 8.47866 5.618 13.62336 0 5.8226-2.424 9.4446-6.324 9.4446z\"\n    fill=\"url(#").concat(id, "-inverse-k)\" />\n  <path\n    d=\"m12.0726 28.5367c-4.15132 0-6.52865-3.38-6.52865-9.2773 0-6.8814 3.00866-10.72604 5.82265-13.78137l1.4113 1.3c-3.27795 3.56597-5.31195 6.89067-5.31195 12.48137 0 6.0826 2.50733 7.3546 4.60595 7.3546v1.922z\"\n    fill=\"url(#").concat(id, "-inverse-l)\" />\n  <g fill=\"#fff\">\n    <path\n      d=\"m6.928 17.4673c1.24117 0 2.24733-1.0061 2.24733-2.2473s-1.00616-2.2473-2.24733-2.2473-2.24734 1.0061-2.24734 2.2473 1.00617 2.2473 2.24734 2.2473z\" />\n    <path\n      d=\"m17.3194 21.3399c1.2411 0 2.2473-1.0062 2.2473-2.2474 0-1.2411-1.0062-2.2473-2.2473-2.2473-1.2412 0-2.2474 1.0062-2.2474 2.2473 0 1.2412 1.0062 2.2474 2.2474 2.2474z\" />\n    <path\n      d=\"m12.0728 7.95805c1.2411 0 2.2473-1.00617 2.2473-2.24734s-1.0062-2.24733-2.2473-2.24733c-1.2412 0-2.24736 1.00616-2.24736 2.24733s1.00616 2.24734 2.24736 2.24734z\" />\n  </g>\n");
-  return "<svg\n  fill=\"none\"\n  height=\"32\"\n  viewBox=\"0 0 97 32\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  ".concat(appearance === 'inverse' ? inverseIconContents : baseIconContents, "\n</svg>");
+    /**
+     * inverse icons use transparency to achieve a certain gradient effect, requiring a different SVG structure
+     */
+    var inverseIconContents = "\n    <linearGradient id=\"".concat(id, "-inverse-a\">\n      <stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".6\" />\n      <stop offset=\"1\" stop-color=\"#fff\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-b\" gradientUnits=\"userSpaceOnUse\" x1=\"95.6972\" x2=\"29.2126\" xlink:href=\"#").concat(id, "-inverse-a\"\n      y1=\"-1.88441\" y2=\"20.5989\" />\n    <linearGradient id=\"").concat(id, "-inverse-c\" gradientUnits=\"userSpaceOnUse\" x1=\"97.0604\" x2=\"30.5757\" xlink:href=\"#").concat(id, "-inverse-a\"\n      y1=\"2.13449\" y2=\"24.6178\" />\n    <linearGradient id=\"").concat(id, "-inverse-d\" gradientUnits=\"userSpaceOnUse\" x1=\"97.5154\" x2=\"31.0315\" xlink:href=\"#").concat(id, "-inverse-a\"\n      y1=\"3.49308\" y2=\"25.9764\" />\n    <linearGradient id=\"").concat(id, "-inverse-e\" gradientUnits=\"userSpaceOnUse\" x1=\"101.279\" x2=\"34.794\" xlink:href=\"#").concat(id, "-inverse-a\"\n      y1=\"14.5962\" y2=\"37.0882\" />\n    <linearGradient id=\"").concat(id, "-inverse-f\" gradientUnits=\"userSpaceOnUse\" x1=\"99.9384\" x2=\"33.4544\" xlink:href=\"#").concat(id, "-inverse-a\"\n      y1=\"10.6359\" y2=\"33.1192\" />\n    <linearGradient id=\"").concat(id, "-inverse-g\" gradientUnits=\"userSpaceOnUse\" x1=\"9.22533\" x2=\"4.69333\" y1=\"25.3248\"\n      y2=\"5.13609\">\n      <stop offset=\"0\" stop-color=\"#fff\" />\n      <stop offset=\".17\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\".92\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-h\">\n      <stop offset=\"0\" stop-color=\"#fff\" />\n      <stop offset=\".18\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".55\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".83\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-i\" gradientUnits=\"userSpaceOnUse\" x1=\"6.76069\" x2=\"16.4834\" xlink:href=\"#").concat(id, "-inverse-h\"\n      y1=\"15.0061\" y2=\"18.9068\" />\n    <linearGradient id=\"").concat(id, "-inverse-j\" gradientUnits=\"userSpaceOnUse\" x1=\"18.7907\" x2=\"16.8967\" xlink:href=\"#").concat(id, "-inverse-h\"\n      y1=\"3.59276\" y2=\"23.2521\" />\n    <linearGradient id=\"").concat(id, "-inverse-k\" gradientUnits=\"userSpaceOnUse\" x1=\"14.886\" x2=\"14.886\" y1=\"28.5366\"\n      y2=\"5.46924\">\n      <stop offset=\".1\" stop-color=\"#fff\" />\n      <stop offset=\".27\" stop-color=\"#fff\" stop-opacity=\".91\" />\n      <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".74\" />\n      <stop offset=\".85\" stop-color=\"#fff\" stop-opacity=\".64\" />\n      <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".6\" />\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-inverse-l\" gradientUnits=\"userSpaceOnUse\" x1=\"8.63728\" x2=\"10.0113\" y1=\"5.09736\"\n      y2=\"26.7354\">\n      <stop offset=\".03\" stop-color=\"#fff\" />\n      <stop offset=\".1\" stop-color=\"#fff\" stop-opacity=\".9\" />\n      <stop offset=\".29\" stop-color=\"#fff\" stop-opacity=\".68\" />\n      <stop offset=\".38\" stop-color=\"#fff\" stop-opacity=\".6\" />\n      <stop offset=\".59\" stop-color=\"#fff\" stop-opacity=\".6\" />\n      <stop offset=\".65\" stop-color=\"#fff\" stop-opacity=\".65\" />\n      <stop offset=\".76\" stop-color=\"#fff\" stop-opacity=\".77\" />\n      <stop offset=\".91\" stop-color=\"#fff\" stop-opacity=\".96\" />\n      <stop offset=\".94\" stop-color=\"#fff\" />\n    </linearGradient>\n    <path\n      d=\"m34.6712 21.2863-1.68 4.5299h-3.0913l7.9273-20.12528h3.4907l7.9367 20.12528h-3.0914l-1.6893-4.5673c-1.81.3714-3.37.548-4.994.548-1.532 0-3.0913-.1853-4.8087-.52zm8.9767-2.33-4.0753-11.02805-4.0754 11.05605c1.504.2413 2.7574.3713 3.9827.3713 1.29 0 2.6087-.158 4.168-.3993z\"\n      fill=\"url(#").concat(id, "-inverse-b)\" />\n    <path\n      d=\"m56.3731 23.3378c.6126 0 1.1973-.1206 1.6526-.2133v2.5433c-.464.1207-.984.2414-1.7733.2414-3.2767 0-4.8733-1.9307-4.8733-4.7807v-8.178h-2.4787v-2.4507h2.4787v-3.24931h2.5713v3.24931h4.0753v2.4507h-4.0753v8.1227c0 1.346.798 2.2653 2.4227 2.2653z\"\n      fill=\"url(#").concat(id, "-inverse-c)\" />\n    <path\n      d=\"m65.0428 25.9084c-2.516 0-4.1033-1.1973-4.1033-4.01v-17.80465h2.6366v17.49865c0 1.3833.9193 1.866 2.0513 1.866.2787 0 .464 0 .7614-.028v2.358c-.2134.0647-.6774.1207-1.346.1207z\"\n      fill=\"url(#").concat(id, "-inverse-d)\" />\n    <path\n      d=\"m90.5893 26.1222c-2.302 0-4.168-.52-5.3287-1.1327v-2.7846c1.318.7613 3.5274 1.504 5.4494 1.504s3.0633-.826 3.0633-2.024-.8913-1.838-3.7967-2.5434c-3.3973-.826-4.836-2.1446-4.836-4.66 0-2.664 2.0514-4.2886 5.542-4.2886 1.996 0 3.7967.492 4.9294 1.1046v2.7294c-1.838-.9194-3.342-1.4114-4.9667-1.4114-1.9307 0-2.9707.6774-2.9707 1.866 0 1.0674.7334 1.7454 3.5554 2.4227 3.398.826 5.1153 2.0793 5.1153 4.7527 0 2.6733-1.6527 4.4746-5.7647 4.4746l.0094-.0093z\"\n      fill=\"url(#").concat(id, "-inverse-e)\" />\n    <path\n      d=\"m82.747 23.4579c-.7426 0-1.0766-.3067-1.0766-1.29v-11.6693h-2.6367v2.692c-.9193-1.996-2.6367-2.9987-4.8733-2.9987-4.2887 0-6.4333 3.648-6.4333 7.9647 0 4.3166 2.0886 7.9646 6.2286 7.9646 2.6087 0 4.1307-1.1326 5.124-3.1193.232 1.894 1.42 2.896 3.11 2.896.5387 0 .91-.0467 1.1693-.1207v-2.358c-.3066.028-.334.028-.6126.028v.0094zm-3.7133-4.688c0 3.3973-2.1166 4.9013-4.4746 4.9013-2.7294 0-4.1961-1.838-4.1961-5.514s1.5321-5.514 4.5021-5.514c2.2373 0 4.1679 1.504 4.1679 4.9014v1.2253z\"\n      fill=\"url(#").concat(id, "-inverse-f)\" />\n    <path\n      d=\"m12.0727 6.31409v-1.922c-6.6587 0-12.0727 5.414-12.0727 12.07201 0 .6873.0653333 1.356.167333 2.0153 0 .028 0 .0654.009334.0927 1.002663 5.6553 5.943333 9.9647 11.886633 9.9647v-1.922c-5.0333 0-9.2213-3.6774-10.01063-8.488-.06534-.4827.074-.9754.39-1.3654.50133-.6126 1.402-.938 2.6-.938.63133 0 1.226.0834 1.848.2507v-1.9687c-.60334-.13-1.20734-.1953-1.848-.1953-1.30934 0-2.266.2973-2.95334.6967.882-4.71738 5.024-8.29271 9.98267-8.29271z\"\n      fill=\"url(#").concat(id, "-inverse-g)\" />\n    <path\n      d=\"m14.032 16.9475c-.464-.204-.9846-.446-1.5786-.706-.3434-.1487-.678-.2974-.9934-.4367-1.80131-.7987-3.18531-1.4113-4.56864-1.6993v1.9686c1.04933.2787 2.19133.78 3.78864 1.486.316.1394.65.288 1.0027.4367.5853.26 1.1053.492 1.56.6967 1.6807.752 2.6933 1.2073 3.9747 1.4673l.3713-1.8853c-1.068-.2134-1.95-.6034-3.5567-1.328z\"\n      fill=\"url(#").concat(id, "-inverse-i)\" />\n    <path\n      d=\"m24.1354 16.2508v-.4734c-.3713-6.34264-5.6367-11.38531-12.0633-11.38531v1.922c5.5253 0 10.0293 4.42931 10.1406 9.92731-.0093.3807-.1206.882-.52 1.3187-.52.5667-1.4206.8633-2.6093.8633-.5107 0-1.0027-.0466-1.5047-.1486l-.3713 1.8853c.622.1207 1.2353.186 1.876.186 1.0587 0 1.8947-.186 2.5353-.464-1.402 3.9187-5.1633 6.7327-9.556 6.7327v1.922c6.6587 0 12.0727-5.414 12.0727-12.0727 0-.074 0-.1393 0-.2133z\"\n      fill=\"url(#").concat(id, "-inverse-j)\" />\n    <path\n      d=\"m12.0727 28.5366v-1.922c2.758 0 4.402-2.814 4.402-7.522s-1.6713-8.6554-5.098-12.3047l1.402-1.31866c3.7793 4.02133 5.618 8.47866 5.618 13.62336 0 5.8226-2.424 9.4446-6.324 9.4446z\"\n      fill=\"url(#").concat(id, "-inverse-k)\" />\n    <path\n      d=\"m12.0726 28.5367c-4.15132 0-6.52865-3.38-6.52865-9.2773 0-6.8814 3.00866-10.72604 5.82265-13.78137l1.4113 1.3c-3.27795 3.56597-5.31195 6.89067-5.31195 12.48137 0 6.0826 2.50733 7.3546 4.60595 7.3546v1.922z\"\n      fill=\"url(#").concat(id, "-inverse-l)\" />\n    <g fill=\"#fff\">\n      <path\n        d=\"m6.928 17.4673c1.24117 0 2.24733-1.0061 2.24733-2.2473s-1.00616-2.2473-2.24733-2.2473-2.24734 1.0061-2.24734 2.2473 1.00617 2.2473 2.24734 2.2473z\" />\n      <path\n        d=\"m17.3194 21.3399c1.2411 0 2.2473-1.0062 2.2473-2.2474 0-1.2411-1.0062-2.2473-2.2473-2.2473-1.2412 0-2.2474 1.0062-2.2474 2.2473 0 1.2412 1.0062 2.2474 2.2474 2.2474z\" />\n      <path\n        d=\"m12.0728 7.95805c1.2411 0 2.2473-1.00617 2.2473-2.24734s-1.0062-2.24733-2.2473-2.24733c-1.2412 0-2.24736 1.00616-2.24736 2.24733s1.00616 2.24734 2.24736 2.24734z\" />\n    </g>\n  ");
+    return "<svg\n      fill=\"none\"\n      height=\"32\"\n      viewBox=\"0 0 97 32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n      ".concat(appearance === 'inverse' ? inverseIconContents : baseIconContents, "\n    </svg>");
+  }
 };
 
 /**
@@ -64,13 +71,15 @@ var AtlasLogo = exports.AtlasLogo = function AtlasLogo(_ref2) {
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
     testId = _ref2.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     size: size,
     svg: svg({
       appearance: appearance
-    }),
+    }, colorMode),
     testId: testId
   });
 };

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

@@ -19,7 +19,7 @@ var svg = function svg(_ref) {
   var id = (0, _reactUid.uid)({
     appearance: appearance
   });
-  var colors = (0, _utils.getColorsFromAppearance)(appearance);
+  var colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
   return "<svg height=\"32\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"12.595\" x2=\"12.595\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\" x1=\"28.595\" x2=\"28.595\" y1=\"40\" y2=\"27\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-c\" x1=\"20.595\" x2=\"20.595\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-d\" x1=\"36.595\" x2=\"36.595\" y2=\"20\"/>\n  </defs>\n  <path d=\"M10.595 30h4v10h-4z\" fill=\"url(#").concat(id, "-a)\"/>\n  <path d=\"M26.595 27h4v13h-4z\" fill=\"url(#").concat(id, "-b)\"/>\n  <path d=\"M18.595 22h4v18h-4z\" fill=\"url(#").concat(id, "-c)\"/>\n  <path d=\"M34.595 20h4v20h-4z\" fill=\"url(#").concat(id, "-d)\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m9.009 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\" />\n</svg>");
 };
 

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

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

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.AtlassianIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactUid = require("react-uid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref) {
+var svg = function svg(_ref, colorMode) {
   var appearance = _ref.appearance,
     iconGradientStart = _ref.iconGradientStart,
     iconGradientStop = _ref.iconGradientStop,
@@ -22,16 +24,23 @@ var svg = function svg(_ref) {
     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
-  });
-  if (appearance) {
-    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
+    }
+    return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 32 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(colors.iconColor, "\" d=\"M27.545 24.378 16.96 3.208c-.208-.458-.417-.541-.667-.541-.208 0-.458.083-.708.5-1.5 2.375-2.167 5.125-2.167 8 0 4.001 2.042 7.752 5.042 13.795.334.666.584.791 1.167.791h7.335c.541 0 .833-.208.833-.625 0-.208-.042-.333-.25-.75M12.168 14.377c-.834-1.25-1.084-1.334-1.292-1.334s-.333.083-.708.834L4.875 24.46c-.167.334-.208.459-.208.625 0 .334.291.667.916.667h7.46c.5 0 .875-.416 1.083-1.208.25-1 .334-1.876.334-2.917 0-2.917-1.292-5.751-2.292-7.251\"/>\n    </svg>");
+  } else {
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    // 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    <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>");
   }
-  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>");
 };
 
 /**
@@ -58,6 +67,8 @@ var AtlassianIcon = exports.AtlassianIcon = function AtlassianIcon(_ref2) {
     _ref2$textColor = _ref2.textColor,
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor,
     testId = _ref2.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -66,7 +77,7 @@ var AtlassianIcon = exports.AtlassianIcon = function AtlassianIcon(_ref2) {
       iconGradientStart: iconGradientStart,
       iconGradientStop: iconGradientStop,
       iconColor: iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.AtlassianLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactUid = require("react-uid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref) {
+var svg = function svg(_ref, colorMode) {
   var appearance = _ref.appearance,
     iconGradientStart = _ref.iconGradientStart,
     iconGradientStop = _ref.iconGradientStop,
@@ -26,16 +28,23 @@ var svg = function svg(_ref) {
     // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
     atlassianLogoTextColor: 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
-  });
-  if (appearance) {
-    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
+    }
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 198 32\" focusable=\"false\" aria-hidden=\"true\" height=\"32\" fill=\"none\">\n      <path fill=".concat(colors.iconColor, " d=\"M22.878 24.378 12.293 3.208c-.208-.458-.416-.541-.666-.541-.209 0-.459.083-.709.5-1.5 2.375-2.167 5.125-2.167 8 0 4.001 2.042 7.752 5.043 13.794.333.667.583.792 1.166.792h7.335c.542 0 .833-.208.833-.625 0-.208-.041-.333-.25-.75M7.501 14.377c-.833-1.25-1.083-1.334-1.292-1.334s-.333.083-.708.834L.208 24.46c-.166.334-.208.459-.208.625 0 .334.292.667.917.667h7.46c.5 0 .874-.416 1.083-1.208.25-1 .333-1.876.333-2.917 0-2.917-1.292-5.751-2.292-7.251z\"/>\n      <path fill=").concat(colors.atlassianLogoTextColor, " d=\"M107.447 10.828c0 2.972 1.345 5.308 6.795 6.37 3.185.707 3.893 1.203 3.893 2.265 0 1.061-.708 1.698-2.973 1.698-2.619 0-5.733-.92-7.785-2.123v4.813c1.627.778 3.751 1.698 7.785 1.698 5.662 0 7.856-2.548 7.856-6.228m0 .07c0-3.538-1.84-5.166-7.148-6.298-2.902-.637-3.61-1.274-3.61-2.194 0-1.133 1.062-1.628 2.973-1.628 2.335 0 4.6.708 6.794 1.698v-4.6c-1.557-.779-3.892-1.345-6.653-1.345-5.237 0-7.927 2.265-7.927 5.945m72.475-5.803v20.17h4.318V9.979l1.769 4.035 6.087 11.324h5.379V5.166h-4.247v13.022l-1.628-3.821-4.883-9.201zm-27.319 0h-4.671v20.17h4.671zm-10.05 14.154c0-3.538-1.841-5.166-7.149-6.298-2.902-.637-3.609-1.274-3.609-2.194 0-1.133 1.061-1.628 2.972-1.628 2.336 0 4.601.708 6.795 1.699v-4.6c-1.557-.78-3.893-1.346-6.653-1.346-5.238 0-7.927 2.265-7.927 5.946 0 2.972 1.344 5.308 6.794 6.37 3.185.707 3.893 1.203 3.893 2.264 0 1.062-.708 1.699-2.973 1.699-2.618 0-5.733-.92-7.785-2.123v4.812c1.628.779 3.751 1.699 7.785 1.699 5.592 0 7.857-2.548 7.857-6.3M71.069 5.166v20.17h9.625l1.486-4.387h-6.44V5.166zm-19.039 0v4.317h5.167v15.854h4.741V9.483h5.592V5.166zm-6.866 0h-6.157L32 25.336h5.379l.99-3.396c1.204.353 2.478.566 3.752.566s2.548-.213 3.751-.567l.991 3.398h5.379c-.07 0-7.078-20.171-7.078-20.171M42.05 18.259c-.92 0-1.77-.141-2.548-.354L42.05 9.13l2.548 8.776a9.6 9.6 0 0 1-2.548.354zM97.326 5.166H91.17l-7.078 20.17h5.38l.99-3.396c1.203.353 2.477.566 3.751.566s2.548-.213 3.751-.567l.991 3.398h5.379zm-3.114 13.093c-.92 0-1.77-.141-2.548-.354l2.548-8.776 2.548 8.776a9.6 9.6 0 0 1-2.548.354m75.306-13.093h-6.157l-7.007 20.17h5.379l.991-3.396c1.203.353 2.477.566 3.751.566s2.548-.213 3.751-.567l.991 3.398h5.379zm-3.043 13.093c-.92 0-1.77-.141-2.548-.354l2.548-8.776 2.548 8.776a10 10 0 0 1-2.548.354\"/>\n    </svg>");
+  } else {
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    // 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      <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>");
   }
-  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>");
 };
 
 /**
@@ -62,6 +71,8 @@ var AtlassianLogo = exports.AtlassianLogo = function AtlassianLogo(_ref2) {
     iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
     _ref2$textColor = _ref2.textColor,
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -71,7 +82,7 @@ var AtlassianLogo = exports.AtlassianLogo = function AtlassianLogo(_ref2) {
       iconGradientStop: iconGradientStop,
       iconColor: iconColor,
       textColor: textColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,