@atlaskit/logo 13.15.1 → 13.15.3

package/dist/cjs/opsgenie-logo/new-logo.js

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.OpsgenieLogo = 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,
@@ -24,16 +26,23 @@ var svg = function svg(_ref) {
     iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: iconGradientStop
-  });
-  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 154 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(colors.iconColor, "\" d=\"M11.78 28.127c-.785.578-1.198.537-1.983-.041-3.801-2.727-7.313-5.826-9.668-9.049-.248-.33-.124-.785.248-.991l4.297-2.686q.558-.372.991.124c1.653 1.9 3.264 3.76 5.124 5.082 1.859-1.322 3.47-3.181 5.123-5.082q.435-.495.992-.124l4.297 2.686c.371.206.495.66.247.991-2.355 3.223-5.867 6.322-9.668 9.09m-.99-11.857c3.388 0 6.197-2.768 6.197-6.156s-2.81-6.239-6.197-6.239-6.198 2.81-6.198 6.239c0 3.43 2.727 6.156 6.198 6.156\"/>\n      <path fill=\"").concat(colors.textColor, "\" d=\"M146.689 12.293c-2.79 0-4.201 1.81-4.477 4.477h8.556c-.153-2.852-1.441-4.477-4.079-4.477m5.888 12.635c-1.257.674-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.631 2.576-7.943 7.237-7.943 4.723 0 6.624 3.281 6.624 7.943v1.196h-11.193c.368 2.606 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zM133.385 6.16c0-1.166.767-1.84 1.841-1.84s1.84.674 1.84 1.84-.767 1.84-1.84 1.84c-1.074 0-1.841-.675-1.841-1.84m.491 19.38V10.208h2.638v15.334zm-3.677-8.984v8.985h-2.638V16.28c0-2.76-1.104-3.987-3.618-3.987-2.454 0-4.14 1.625-4.14 4.723v8.525h-2.638V10.208h2.638v2.514c.981-1.81 2.79-2.821 4.845-2.821 3.527 0 5.551 2.423 5.551 6.655m-22.921-4.263c-2.791 0-4.201 1.81-4.477 4.477h8.556c-.154-2.852-1.442-4.477-4.079-4.477m5.888 12.635c-1.257.674-3.189.92-4.753.92-5.735 0-8.25-3.312-8.25-8.004 0-4.631 2.576-7.943 7.238-7.943 4.722 0 6.624 3.281 6.624 7.943v1.196h-11.194c.368 2.606 2.055 4.293 5.674 4.293 1.778 0 3.281-.337 4.661-.828zm-18.639-.614v-1.533c-.981 2.024-2.821 3.067-5.182 3.067-4.048 0-6.072-3.466-6.072-7.974 0-4.324 2.116-7.973 6.378-7.973 2.239 0 3.956 1.012 4.876 3.005v-2.698h2.576V24.16c0 4.508-2.116 7.544-7.605 7.544-2.576 0-3.987-.337-5.459-.828V28.3c1.687.552 3.435.92 5.336.92 3.834 0 5.152-2.055 5.152-4.907m-8.678-6.44c0 3.68 1.472 5.52 4.2 5.52 2.362 0 4.478-1.503 4.478-4.906V17.26c0-3.404-1.932-4.907-4.17-4.907-2.975 0-4.508 1.963-4.508 5.52m-4.703 3.497c0 2.545-1.656 4.477-5.765 4.477-2.3 0-4.17-.52-5.336-1.134v-2.79c1.319.766 3.527 1.502 5.459 1.502 2.024 0 3.066-.828 3.066-2.024 0-1.165-.89-1.84-3.802-2.545-3.404-.829-4.846-2.147-4.846-4.662 0-2.668 2.055-4.293 5.55-4.293 1.994 0 3.804.49 4.938 1.104v2.73c-1.84-.92-3.342-1.411-4.968-1.411-1.932 0-2.974.674-2.974 1.87 0 1.073.736 1.748 3.557 2.423 3.404.828 5.121 2.085 5.121 4.753m-16.274-3.496c0-3.68-1.472-5.52-4.202-5.52-2.36 0-4.477 1.503-4.477 4.907v1.227c0 3.404 1.932 4.906 4.17 4.906 2.975 0 4.509-1.962 4.509-5.52m-3.803 7.974c-2.239 0-3.956-1.013-4.876-3.006v8.679h-2.637V10.207h2.637v2.76c.981-2.024 2.821-3.066 5.183-3.066 4.079 0 6.133 3.465 6.133 7.973 0 4.324-2.147 7.973-6.44 7.973m-20.121 0c-6.225 0-9.721-4.293-9.721-10.426 0-6.072 3.496-10.335 9.721-10.335 6.195 0 9.69 4.263 9.69 10.335 0 6.133-3.495 10.426-9.69 10.426m0-18.124c-4.968 0-6.961 3.527-6.961 7.698 0 4.262 1.993 7.789 6.961 7.789 4.937 0 6.93-3.527 6.93-7.79 0-4.17-1.993-7.697-6.93-7.697\" />\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)({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    return "<svg viewBox=\"0 0 133 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n      <defs>\n        <linearGradient id=\"".concat(id, "-1\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop\n            offset=\"0%\"\n            stop-color=\"").concat(colors.iconGradientStop, "\"\n          />\n          <stop\n            offset=\"82%\"\n            stop-color=\"").concat(colors.iconGradientStart, "\"\n            ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', "\n          />\n        </linearGradient>\n        <linearGradient id=\"").concat(id, "-2\" x1=\"7.133%\" x2=\"50%\" y1=\"13.352%\" y2=\"58.228%\">\n          <stop\n            offset=\"0%\"\n            stop-color=\"").concat(colors.iconGradientStop, "\"\n          />\n          <stop\n            stop-color=\"").concat(colors.iconGradientStart, "\"\n            ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', "\n            offset=\"100%\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill-rule=\"evenodd\">\n        <path fill=\"").concat(colors.textColor, "\" fill-rule=\"nonzero\" d=\"M27,14.9963259 C27,9.84140338 29.9575,6.22438088 35.2484675,6.22438088 C40.539435,6.22438088 43.4880625,9.84436088 43.4880625,14.9963259 C43.4880625,20.1985684 40.5305625,23.8422084 35.263255,23.8422084 C29.9959475,23.8422084 27,20.1956109 27,14.9963259 Z M29.34234,14.9963259 C29.34234,18.6133484 31.03403,21.6063384 35.25734,21.6063384 C39.48065,21.6063384 41.1220625,18.6133484 41.1220625,14.9963259 C41.1220625,11.4473259 39.4303725,8.46320838 35.239595,8.46320838 C31.0488175,8.46320838 29.34234,11.4561984 29.34234,14.9963259 Z M48.7050925,21.2928434 L48.7050925,28.6570184 L46.466265,28.6570184 L46.466265,10.5719059 L48.7050925,10.5719059 L48.7050925,12.9142459 C49.53615,11.1959384 51.1006675,10.3116459 53.102895,10.3116459 C56.56317,10.3116459 58.308095,13.2514009 58.308095,17.0754484 C58.308095,20.7457059 56.486275,23.8422084 52.842635,23.8422084 C50.94392,23.8422084 49.4858725,22.9845334 48.7050925,21.2928434 Z M52.50548,12.3937259 C50.500295,12.3937259 48.7050925,13.6684084 48.7050925,16.5578859 L48.7050925,17.5989259 C48.7050925,20.4854459 50.3435475,21.7601284 52.2540925,21.7601284 C54.77684,21.7601284 56.07814,20.0950559 56.07814,17.0754484 C56.0692675,13.9552859 54.8212025,12.3937259 52.50548,12.3937259 Z M64.99796,23.8422084 C63.4334449,23.8787499 61.881995,23.5496237 60.46707,22.8810209 L60.46707,20.5150209 C61.8881071,21.303432 63.4771215,21.740487 65.1014725,21.7897034 C66.81978,21.7897034 67.7040725,21.0887759 67.7040725,20.0713959 C67.7040725,19.0540159 66.94991,18.5098359 64.47744,17.9124209 C61.5879625,17.2085359 60.3635575,16.0906009 60.3635575,13.9582434 C60.3635575,11.6927984 62.1084825,10.3146034 65.074855,10.3146034 C66.5257548,10.2930388 67.96137,10.6131901 69.2656325,11.2491734 L69.2656325,13.5678534 C67.7040725,12.7870734 66.42939,12.3848534 65.0482375,12.3848534 C63.4097825,12.3848534 62.52549,12.9556509 62.52549,13.9730309 C62.52549,14.8839409 63.1495225,15.4517809 65.5450975,16.0284934 C68.4316175,16.7294209 69.889665,17.8029934 69.889665,20.0625234 C69.889665,22.2037534 68.4848525,23.8422084 64.99796,23.8422084 Z M81.7581125,21.2396084 C80.9240975,22.9579159 79.3625375,23.8422084 77.3573525,23.8422084 C73.923695,23.8422084 72.2053875,20.9024534 72.2053875,17.0754484 C72.2053875,13.4081484 74.00059,10.3116459 77.62057,10.3116459 C79.519285,10.3116459 80.9773325,11.1693209 81.76107,12.8610109 L81.76107,10.5719059 L83.9466625,10.5719059 L83.9466625,22.4019059 C83.9466625,26.2289109 82.15146,28.8048934 77.49044,28.8048934 C75.9171438,28.849884 74.3485221,28.6124873 72.858995,28.1039659 L72.858995,25.9154159 C74.315222,26.4191931 75.8431618,26.6848349 77.38397,26.7021109 C80.63722,26.7021109 81.7581125,24.9601434 81.7581125,22.5379509 L81.7581125,21.2396084 Z M77.957725,21.7601284 C79.9599525,21.7601284 81.7581125,20.4854459 81.7581125,17.5989259 L81.7581125,16.5578859 C81.7581125,13.6684084 80.1167,12.3937259 78.2091125,12.3937259 C75.6834075,12.3937259 74.3821075,14.0587984 74.3821075,17.0754484 C74.39098,20.1956109 75.6420025,21.7601284 77.957725,21.7601284 Z M93.5467075,23.8422084 C88.6786625,23.8422084 86.546305,21.0325834 86.546305,17.0399584 C86.546305,13.1094409 88.7318975,10.2998159 92.6890325,10.2998159 C96.696445,10.2998159 98.308282,13.0828234 98.308282,17.0399584 L98.308282,18.0662109 L88.8087925,18.0662109 C89.1222875,20.2784209 90.5537175,21.7098509 93.6236025,21.7098509 C94.9737094,21.7089885 96.313149,21.4707325 97.580737,21.0059659 L97.580737,23.0762159 C96.51308,23.6351834 94.874625,23.8422084 93.5467075,23.8422084 Z M88.7851325,16.1527084 L96.045795,16.1527084 C95.915665,13.7305159 94.82139,12.3523209 92.5825625,12.3523209 C90.2165625,12.3404909 89.0335625,13.8754334 88.7851325,16.1408784 L88.7851325,16.1527084 Z M112.025168,23.5819484 L109.78634,23.5819484 L109.78634,15.7238709 C109.78634,13.3815309 108.848813,12.3404909 106.716455,12.3404909 C104.646205,12.3404909 103.202945,13.7186859 103.202945,16.3479034 L103.202945,23.5819484 L100.964118,23.5819484 L100.964118,10.5689484 L103.202945,10.5689484 L103.202945,12.7013059 C104.015399,11.1952365 105.603045,10.2712035 107.31387,10.3086884 C110.30686,10.3086884 112.025168,12.3789384 112.025168,15.9545559 L112.025168,23.5819484 Z M116.29284,5.57373088 C116.715541,5.54348282 117.130549,5.69826386 117.430208,5.99792296 C117.729867,6.29758207 117.884648,6.71258978 117.8544,7.13529088 C117.8544,7.99771665 117.155266,8.69685088 116.29284,8.69685088 C115.430414,8.69685088 114.73128,7.99771665 114.73128,7.13529088 C114.701032,6.71258978 114.855813,6.29758207 115.155472,5.99792296 C115.455131,5.69826386 115.870139,5.54348282 116.29284,5.57373088 Z M115.148287,10.5719059 L117.387115,10.5719059 L117.387115,23.5849059 L115.148287,23.5849059 L115.148287,10.5719059 Z M127.510637,23.8422084 C122.642592,23.8422084 120.510235,21.0325834 120.510235,17.0399584 C120.510235,13.1094409 122.695827,10.2998159 126.650005,10.2998159 C130.657417,10.2998159 132.269255,13.0828234 132.269255,17.0399584 L132.269255,18.0662109 L122.772722,18.0662109 C123.086217,20.2784209 124.517647,21.7098509 127.587532,21.7098509 C128.937639,21.7089885 130.277079,21.4707325 131.544667,21.0059659 L131.544667,23.0762159 C130.47701,23.6351834 128.838555,23.8422084 127.510637,23.8422084 Z M122.749062,16.1408784 L130.012682,16.1408784 C129.882552,13.7186859 128.788277,12.3404909 126.54945,12.3404909 C124.177535,12.3404909 122.982705,13.8754334 122.749062,16.1408784 Z\"/>\n        <circle fill=\"url(#").concat(id, "-1)\" cx=\"10.055\" cy=\"10\" r=\"6\" fill-rule=\"nonzero\"/>\n        <path fill=\"url(#").concat(id, "-2)\" fill-rule=\"nonzero\" d=\"M9.5466546,27.8535048 C5.6443752,25.3649677 2.39856217,21.9735337 0.0835689575,17.9658651 C-0.0952202525,17.6419027 0.0222963675,17.2343451 0.346122097,17.0553085 L0.374053287,17.0553085 L4.8989053,14.8208136 C5.2162202,14.6649408 5.6000426,14.7822878 5.7759446,15.088953 C8.0603155,18.9171632 11.4349681,21.9767185 15.4680659,23.876104 C13.9786912,25.3786979 12.3282342,26.7125519 10.5465911,27.8535048 C10.2398972,28.0418894 9.8533485,28.0418894 9.5466546,27.8535048 Z\"/>\n        <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M10.5633498,27.8535048 C14.4667513,25.3663345 17.7128569,21.9745949 20.0264354,17.9658651 C20.2034083,17.6413306 20.0894039,17.23488 19.7694685,17.0497222 L19.7359511,17.0497222 L15.2055128,14.8152274 C14.8898394,14.6599316 14.5078288,14.7774733 14.3340598,15.0833668 C12.0472876,18.9191667 8.663628,21.9817774 4.6195935,23.876104 C6.11093,25.3787865 7.7632469,26.7126296 9.5466546,27.8535048 C9.8574084,28.0488317 10.252596,28.0488317 10.5633498,27.8535048 Z\"/>\n      </g>\n    </svg>");
   }
-  return "\n  <svg viewBox=\"0 0 133 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient id=\"".concat(id, "-1\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n        <stop\n          offset=\"0%\"\n          stop-color=\"").concat(colors.iconGradientStop, "\"\n        />\n        <stop\n          offset=\"82%\"\n          stop-color=\"").concat(colors.iconGradientStart, "\"\n          ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', "\n        />\n      </linearGradient>\n      <linearGradient id=\"").concat(id, "-2\" x1=\"7.133%\" x2=\"50%\" y1=\"13.352%\" y2=\"58.228%\">\n        <stop\n          offset=\"0%\"\n          stop-color=\"").concat(colors.iconGradientStop, "\"\n        />\n        <stop\n          stop-color=\"").concat(colors.iconGradientStart, "\"\n          ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', "\n          offset=\"100%\"\n        />\n      </linearGradient>\n    </defs>\n    <g fill-rule=\"evenodd\">\n      <path fill=\"").concat(colors.textColor, "\" fill-rule=\"nonzero\" d=\"M27,14.9963259 C27,9.84140338 29.9575,6.22438088 35.2484675,6.22438088 C40.539435,6.22438088 43.4880625,9.84436088 43.4880625,14.9963259 C43.4880625,20.1985684 40.5305625,23.8422084 35.263255,23.8422084 C29.9959475,23.8422084 27,20.1956109 27,14.9963259 Z M29.34234,14.9963259 C29.34234,18.6133484 31.03403,21.6063384 35.25734,21.6063384 C39.48065,21.6063384 41.1220625,18.6133484 41.1220625,14.9963259 C41.1220625,11.4473259 39.4303725,8.46320838 35.239595,8.46320838 C31.0488175,8.46320838 29.34234,11.4561984 29.34234,14.9963259 Z M48.7050925,21.2928434 L48.7050925,28.6570184 L46.466265,28.6570184 L46.466265,10.5719059 L48.7050925,10.5719059 L48.7050925,12.9142459 C49.53615,11.1959384 51.1006675,10.3116459 53.102895,10.3116459 C56.56317,10.3116459 58.308095,13.2514009 58.308095,17.0754484 C58.308095,20.7457059 56.486275,23.8422084 52.842635,23.8422084 C50.94392,23.8422084 49.4858725,22.9845334 48.7050925,21.2928434 Z M52.50548,12.3937259 C50.500295,12.3937259 48.7050925,13.6684084 48.7050925,16.5578859 L48.7050925,17.5989259 C48.7050925,20.4854459 50.3435475,21.7601284 52.2540925,21.7601284 C54.77684,21.7601284 56.07814,20.0950559 56.07814,17.0754484 C56.0692675,13.9552859 54.8212025,12.3937259 52.50548,12.3937259 Z M64.99796,23.8422084 C63.4334449,23.8787499 61.881995,23.5496237 60.46707,22.8810209 L60.46707,20.5150209 C61.8881071,21.303432 63.4771215,21.740487 65.1014725,21.7897034 C66.81978,21.7897034 67.7040725,21.0887759 67.7040725,20.0713959 C67.7040725,19.0540159 66.94991,18.5098359 64.47744,17.9124209 C61.5879625,17.2085359 60.3635575,16.0906009 60.3635575,13.9582434 C60.3635575,11.6927984 62.1084825,10.3146034 65.074855,10.3146034 C66.5257548,10.2930388 67.96137,10.6131901 69.2656325,11.2491734 L69.2656325,13.5678534 C67.7040725,12.7870734 66.42939,12.3848534 65.0482375,12.3848534 C63.4097825,12.3848534 62.52549,12.9556509 62.52549,13.9730309 C62.52549,14.8839409 63.1495225,15.4517809 65.5450975,16.0284934 C68.4316175,16.7294209 69.889665,17.8029934 69.889665,20.0625234 C69.889665,22.2037534 68.4848525,23.8422084 64.99796,23.8422084 Z M81.7581125,21.2396084 C80.9240975,22.9579159 79.3625375,23.8422084 77.3573525,23.8422084 C73.923695,23.8422084 72.2053875,20.9024534 72.2053875,17.0754484 C72.2053875,13.4081484 74.00059,10.3116459 77.62057,10.3116459 C79.519285,10.3116459 80.9773325,11.1693209 81.76107,12.8610109 L81.76107,10.5719059 L83.9466625,10.5719059 L83.9466625,22.4019059 C83.9466625,26.2289109 82.15146,28.8048934 77.49044,28.8048934 C75.9171438,28.849884 74.3485221,28.6124873 72.858995,28.1039659 L72.858995,25.9154159 C74.315222,26.4191931 75.8431618,26.6848349 77.38397,26.7021109 C80.63722,26.7021109 81.7581125,24.9601434 81.7581125,22.5379509 L81.7581125,21.2396084 Z M77.957725,21.7601284 C79.9599525,21.7601284 81.7581125,20.4854459 81.7581125,17.5989259 L81.7581125,16.5578859 C81.7581125,13.6684084 80.1167,12.3937259 78.2091125,12.3937259 C75.6834075,12.3937259 74.3821075,14.0587984 74.3821075,17.0754484 C74.39098,20.1956109 75.6420025,21.7601284 77.957725,21.7601284 Z M93.5467075,23.8422084 C88.6786625,23.8422084 86.546305,21.0325834 86.546305,17.0399584 C86.546305,13.1094409 88.7318975,10.2998159 92.6890325,10.2998159 C96.696445,10.2998159 98.308282,13.0828234 98.308282,17.0399584 L98.308282,18.0662109 L88.8087925,18.0662109 C89.1222875,20.2784209 90.5537175,21.7098509 93.6236025,21.7098509 C94.9737094,21.7089885 96.313149,21.4707325 97.580737,21.0059659 L97.580737,23.0762159 C96.51308,23.6351834 94.874625,23.8422084 93.5467075,23.8422084 Z M88.7851325,16.1527084 L96.045795,16.1527084 C95.915665,13.7305159 94.82139,12.3523209 92.5825625,12.3523209 C90.2165625,12.3404909 89.0335625,13.8754334 88.7851325,16.1408784 L88.7851325,16.1527084 Z M112.025168,23.5819484 L109.78634,23.5819484 L109.78634,15.7238709 C109.78634,13.3815309 108.848813,12.3404909 106.716455,12.3404909 C104.646205,12.3404909 103.202945,13.7186859 103.202945,16.3479034 L103.202945,23.5819484 L100.964118,23.5819484 L100.964118,10.5689484 L103.202945,10.5689484 L103.202945,12.7013059 C104.015399,11.1952365 105.603045,10.2712035 107.31387,10.3086884 C110.30686,10.3086884 112.025168,12.3789384 112.025168,15.9545559 L112.025168,23.5819484 Z M116.29284,5.57373088 C116.715541,5.54348282 117.130549,5.69826386 117.430208,5.99792296 C117.729867,6.29758207 117.884648,6.71258978 117.8544,7.13529088 C117.8544,7.99771665 117.155266,8.69685088 116.29284,8.69685088 C115.430414,8.69685088 114.73128,7.99771665 114.73128,7.13529088 C114.701032,6.71258978 114.855813,6.29758207 115.155472,5.99792296 C115.455131,5.69826386 115.870139,5.54348282 116.29284,5.57373088 Z M115.148287,10.5719059 L117.387115,10.5719059 L117.387115,23.5849059 L115.148287,23.5849059 L115.148287,10.5719059 Z M127.510637,23.8422084 C122.642592,23.8422084 120.510235,21.0325834 120.510235,17.0399584 C120.510235,13.1094409 122.695827,10.2998159 126.650005,10.2998159 C130.657417,10.2998159 132.269255,13.0828234 132.269255,17.0399584 L132.269255,18.0662109 L122.772722,18.0662109 C123.086217,20.2784209 124.517647,21.7098509 127.587532,21.7098509 C128.937639,21.7089885 130.277079,21.4707325 131.544667,21.0059659 L131.544667,23.0762159 C130.47701,23.6351834 128.838555,23.8422084 127.510637,23.8422084 Z M122.749062,16.1408784 L130.012682,16.1408784 C129.882552,13.7186859 128.788277,12.3404909 126.54945,12.3404909 C124.177535,12.3404909 122.982705,13.8754334 122.749062,16.1408784 Z\"/>\n      <circle fill=\"url(#").concat(id, "-1)\" cx=\"10.055\" cy=\"10\" r=\"6\" fill-rule=\"nonzero\"/>\n      <path fill=\"url(#").concat(id, "-2)\" fill-rule=\"nonzero\" d=\"M9.5466546,27.8535048 C5.6443752,25.3649677 2.39856217,21.9735337 0.0835689575,17.9658651 C-0.0952202525,17.6419027 0.0222963675,17.2343451 0.346122097,17.0553085 L0.374053287,17.0553085 L4.8989053,14.8208136 C5.2162202,14.6649408 5.6000426,14.7822878 5.7759446,15.088953 C8.0603155,18.9171632 11.4349681,21.9767185 15.4680659,23.876104 C13.9786912,25.3786979 12.3282342,26.7125519 10.5465911,27.8535048 C10.2398972,28.0418894 9.8533485,28.0418894 9.5466546,27.8535048 Z\"/>\n      <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M10.5633498,27.8535048 C14.4667513,25.3663345 17.7128569,21.9745949 20.0264354,17.9658651 C20.2034083,17.6413306 20.0894039,17.23488 19.7694685,17.0497222 L19.7359511,17.0497222 L15.2055128,14.8152274 C14.8898394,14.6599316 14.5078288,14.7774733 14.3340598,15.0833668 C12.0472876,18.9191667 8.663628,21.9817774 4.6195935,23.876104 C6.11093,25.3787865 7.7632469,26.7126296 9.5466546,27.8535048 C9.8574084,28.0488317 10.252596,28.0488317 10.5633498,27.8535048 Z\"/>\n    </g>\n  </svg>");
 };
 
 /**
@@ -60,6 +69,8 @@ var OpsgenieLogo = exports.OpsgenieLogo = function OpsgenieLogo(_ref2) {
     iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
     _ref2$iconGradientSto = _ref2.iconGradientStop,
     iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     iconColor: iconColor,
@@ -73,7 +84,7 @@ var OpsgenieLogo = exports.OpsgenieLogo = function OpsgenieLogo(_ref2) {
       iconGradientStop: iconGradientStop,
       iconColor: iconColor,
       textColor: textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/opsgenie-logo/new-wordmark.js

@@ -18,7 +18,7 @@ var svg = function svg(_ref) {
     textColor: textColor
   };
   if (appearance) {
-    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
   }
   return "\n<svg viewBox=\"0 0 148 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g fill-rule=\"evenodd\" fill=\"".concat(colors.textColor, "\">\n    <path d=\"M0 14.996c0-5.155 2.958-8.772 8.248-8.772 5.291 0 8.24 3.62 8.24 8.772 0 5.203-2.957 8.846-8.225 8.846C2.996 23.842 0 20.196 0 14.996zm2.342 0c0 3.617 1.692 6.61 5.915 6.61 4.224 0 5.865-2.993 5.865-6.61 0-3.549-1.692-6.533-5.882-6.533-4.191 0-5.898 2.993-5.898 6.533zm19.363 6.297v7.364h-2.239V10.572h2.24v2.342c.83-1.718 2.395-2.602 4.397-2.602 3.46 0 5.205 2.94 5.205 6.763 0 3.67-1.822 6.767-5.465 6.767-1.9 0-3.357-.857-4.138-2.55zm3.8-8.9c-2.005 0-3.8 1.275-3.8 4.165v1.04c0 2.887 1.639 4.162 3.55 4.162 2.522 0 3.823-1.665 3.823-4.685-.009-3.12-1.257-4.681-3.573-4.681zm12.493 11.45a10.056 10.056 0 0 1-4.53-.962v-2.366A10.189 10.189 0 0 0 38.1 21.79c1.719 0 2.603-.701 2.603-1.719 0-1.017-.754-1.561-3.227-2.159-2.889-.703-4.113-1.821-4.113-3.954 0-2.265 1.744-3.643 4.71-3.643a9.248 9.248 0 0 1 4.192.934v2.319c-1.562-.78-2.837-1.183-4.218-1.183-1.638 0-2.523.57-2.523 1.588 0 .91.625 1.479 3.02 2.055 2.887.701 4.345 1.775 4.345 4.035 0 2.14-1.405 3.78-4.892 3.78zm16.76-2.603c-.834 1.718-2.395 2.602-4.4 2.602-3.434 0-5.153-2.94-5.153-6.767 0-3.667 1.796-6.763 5.416-6.763 1.898 0 3.356.857 4.14 2.549v-2.29h2.186v11.83c0 3.828-1.796 6.404-6.457 6.404a13.17 13.17 0 0 1-4.631-.701v-2.189c1.456.504 2.984.77 4.525.787 3.253 0 4.374-1.742 4.374-4.164V21.24zm-3.8.52c2.002 0 3.8-1.275 3.8-4.161v-1.041c0-2.89-1.641-4.164-3.549-4.164-2.526 0-3.827 1.665-3.827 4.681.009 3.12 1.26 4.685 3.576 4.685zm15.589 2.082c-4.868 0-7-2.81-7-6.802 0-3.93 2.185-6.74 6.142-6.74 4.007 0 5.62 2.783 5.62 6.74v1.026h-9.5c.313 2.212 1.745 3.644 4.815 3.644 1.35-.001 2.69-.24 3.957-.704v2.07c-1.068.56-2.706.766-4.034.766zm-4.762-7.69h7.26c-.13-2.421-1.224-3.8-3.462-3.8-2.366-.012-3.55 1.523-3.798 3.789v.012zm23.24 7.43h-2.239v-7.858c0-2.342-.937-3.384-3.07-3.384-2.07 0-3.513 1.379-3.513 4.008v7.234h-2.239V10.569h2.239V12.7a4.558 4.558 0 0 1 4.11-2.392c2.994 0 4.712 2.07 4.712 5.646v7.627zm4.268-18.008a1.461 1.461 0 0 1 1.561 1.561 1.562 1.562 0 1 1-3.123 0 1.461 1.461 0 0 1 1.562-1.561zm-1.145 4.998h2.24v13.013h-2.24V10.572zm12.363 13.27c-4.868 0-7-2.81-7-6.802 0-3.93 2.185-6.74 6.139-6.74 4.007 0 5.62 2.783 5.62 6.74v1.026h-9.497c.313 2.212 1.745 3.644 4.815 3.644 1.35-.001 2.69-.24 3.957-.704v2.07c-1.068.56-2.706.766-4.034.766zm-4.762-7.701h7.264c-.13-2.422-1.225-3.8-3.464-3.8-2.371 0-3.566 1.534-3.8 3.8z\" />\n  </g>\n</svg>");
 };

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.StatuspageIcon = 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=\"M16 12.604c-3.033 0-5.981 1.37-8.39 3.489q-.375.373-.748.373c-.208 0-.415-.124-.581-.332l-3.032-3.572c-.166-.207-.25-.415-.25-.581 0-.25.125-.457.374-.706 3.655-3.24 8.1-5.067 12.627-5.067s8.97 1.827 12.626 5.067c.249.249.374.457.374.706 0 .166-.084.374-.25.581l-3.032 3.572c-.166.208-.373.332-.581.332q-.374 0-.748-.374c-2.409-2.118-5.358-3.488-8.39-3.488m0 13.374c-3.365 0-6.106-2.742-6.106-6.064S12.635 13.85 16 13.85s6.106 2.7 6.106 6.064-2.741 6.063-6.105 6.063\"/>\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)({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    return "<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=\"50%\" x2=\"50%\" y1=\"82.77%\" y2=\"10.134%\">\n          <stop offset=\"0%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n          <stop offset=\"82%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n        </linearGradient>\n      </defs>\n      <g fill-rule=\"evenodd\">\n        <circle cx=\"16\" cy=\"19.423\" r=\"5.538\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"/>\n        <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M4.14318325,11.970217 L7.17443341,15.5164923 C7.40520779,15.7738906 7.80165918,15.8034375 8.06900618,15.5831636 C12.9601954,11.2622319 19.0323494,11.2622319 23.9235386,15.5831636 C24.1908857,15.8034375 24.5873371,15.7738906 24.8181114,15.5164923 L27.8525794,11.970217 C28.0663737,11.714892 28.04536,11.3403265 27.8043112,11.1098404 C20.6927794,4.96338652 11.2997654,4.96338652 4.20110522,11.1098404 C3.95712825,11.3377486 3.93190106,11.7124749 4.14318325,11.970217 Z\"/>\n      </g>\n    </svg>");
   }
-  return "\n  <svg viewBox=\"0 0 32 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient id=\"".concat(id, "\" x1=\"50%\" x2=\"50%\" y1=\"82.77%\" y2=\"10.134%\">\n        <stop offset=\"0%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n        <stop offset=\"82%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      </linearGradient>\n    </defs>\n    <g fill-rule=\"evenodd\">\n      <circle cx=\"16\" cy=\"19.423\" r=\"5.538\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"/>\n      <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M4.14318325,11.970217 L7.17443341,15.5164923 C7.40520779,15.7738906 7.80165918,15.8034375 8.06900618,15.5831636 C12.9601954,11.2622319 19.0323494,11.2622319 23.9235386,15.5831636 C24.1908857,15.8034375 24.5873371,15.7738906 24.8181114,15.5164923 L27.8525794,11.970217 C28.0663737,11.714892 28.04536,11.3403265 27.8043112,11.1098404 C20.6927794,4.96338652 11.2997654,4.96338652 4.20110522,11.1098404 C3.95712825,11.3377486 3.93190106,11.7124749 4.14318325,11.970217 Z\"/>\n    </g>\n  </svg>");
 };
 
 /**
@@ -58,6 +67,8 @@ var StatuspageIcon = exports.StatuspageIcon = function StatuspageIcon(_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,
@@ -66,7 +77,7 @@ var StatuspageIcon = exports.StatuspageIcon = function StatuspageIcon(_ref2) {
       iconGradientStart: iconGradientStart,
       iconGradientStop: iconGradientStop,
       iconColor: iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.StatuspageLogo = 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,
@@ -24,16 +26,23 @@ var svg = function svg(_ref) {
     iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: iconGradientStop
-  });
-  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 188 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(colors.iconColor, "\" d=\"M13 12.604c-3.032 0-5.98 1.37-8.39 3.489q-.373.373-.747.373c-.208 0-.416-.124-.582-.332L.25 12.562c-.167-.207-.25-.415-.25-.581 0-.25.125-.457.374-.706C4.029 8.035 8.473 6.208 13 6.208s8.971 1.827 12.626 5.067c.25.249.374.457.374.706 0 .166-.083.374-.25.581l-3.031 3.572c-.166.208-.374.332-.582.332q-.373 0-.747-.374c-2.41-2.118-5.358-3.488-8.39-3.488m0 13.374c-3.364 0-6.105-2.742-6.105-6.064S9.635 13.85 13 13.85c3.364 0 6.105 2.7 6.105 6.064s-2.74 6.063-6.105 6.063\" />\n      <path fill=\"").concat(colors.textColor, "\" d=\"M180.293 12.293c-2.79 0-4.201 1.81-4.477 4.477h8.556c-.153-2.852-1.441-4.477-4.079-4.477m5.888 12.635c-1.257.674-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.631 2.576-7.943 7.237-7.943 4.723 0 6.624 3.281 6.624 7.943v1.196h-11.193c.368 2.606 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-18.638-.614v-1.533c-.981 2.024-2.821 3.067-5.183 3.067-4.048 0-6.072-3.466-6.072-7.974 0-4.324 2.116-7.973 6.379-7.973 2.239 0 3.956 1.012 4.876 3.005v-2.698h2.576V24.16c0 4.508-2.116 7.544-7.605 7.544-2.576 0-3.987-.337-5.459-.828V28.3c1.687.552 3.435.92 5.336.92 3.833 0 5.152-2.055 5.152-4.907m-8.679-6.44c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.906V17.26c0-3.404-1.932-4.907-4.171-4.907-2.974 0-4.508 1.963-4.508 5.52m-16.949.001c0 3.68 1.472 5.52 4.201 5.52 2.362 0 4.478-1.503 4.478-4.906V17.26c0-3.404-1.932-4.907-4.171-4.907-2.975 0-4.508 1.963-4.508 5.52m8.679 7.667v-2.76c-.982 2.024-2.822 3.066-5.183 3.066-4.079 0-6.133-3.465-6.133-7.973 0-4.324 2.146-7.973 6.44-7.973 2.238 0 3.956 1.012 4.876 3.005v-2.699h2.637V25.54zm-16.091-7.666c0-3.68-1.472-5.52-4.201-5.52-2.361 0-4.477 1.503-4.477 4.907v1.227c0 3.404 1.932 4.906 4.17 4.906 2.975 0 4.508-1.962 4.508-5.52m-3.802 7.974c-2.239 0-3.956-1.013-4.876-3.006v8.679h-2.638V10.207h2.638v2.76c.981-2.024 2.821-3.066 5.182-3.066 4.079 0 6.134 3.465 6.134 7.973 0 4.324-2.147 7.973-6.44 7.973m-10.56-4.477c0 2.545-1.656 4.477-5.765 4.477-2.3 0-4.171-.52-5.336-1.134v-2.79c1.318.766 3.526 1.502 5.458 1.502 2.024 0 3.067-.828 3.067-2.024 0-1.165-.889-1.84-3.803-2.545-3.404-.829-4.845-2.147-4.845-4.662 0-2.668 2.055-4.293 5.551-4.293 1.993 0 3.802.49 4.937 1.104v2.73c-1.84-.92-3.343-1.411-4.968-1.411-1.932 0-2.975.674-2.975 1.87 0 1.073.736 1.748 3.558 2.423 3.404.828 5.121 2.085 5.121 4.753m-27.598-2.177v-8.985h2.638v9.26c0 2.76 1.104 3.988 3.618 3.988 2.454 0 4.14-1.626 4.14-4.723v-8.525h2.638V25.54h-2.638v-2.515c-.981 1.81-2.79 2.821-4.845 2.821-3.527 0-5.55-2.422-5.55-6.654m-7.155 1.596c0 1.349.797 2.269 2.422 2.269.614 0 1.196-.123 1.656-.215v2.546a6.3 6.3 0 0 1-1.778.245c-3.282 0-4.876-1.932-4.876-4.784v-8.188h-2.484v-2.453h2.484V6.957h2.576v3.25h4.078v2.454H85.39zm-18.943-2.914c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.906V17.26c0-3.404-1.932-4.907-4.17-4.907-2.975 0-4.509 1.963-4.509 5.52m8.679 7.667v-2.76c-.981 2.024-2.821 3.066-5.183 3.066-4.078 0-6.133-3.465-6.133-7.973 0-4.324 2.147-7.973 6.44-7.973 2.239 0 3.956 1.012 4.876 3.005v-2.699h2.637V25.54zm-17.258-4.752c0 1.349.797 2.269 2.422 2.269.614 0 1.196-.123 1.656-.215v2.546a6.3 6.3 0 0 1-1.778.245c-3.282 0-4.876-1.932-4.876-4.784v-8.188h-2.484v-2.453h2.484V6.957h2.576v3.25h4.078v2.454h-4.078zm-6.894-.798c0 3.496-2.085 5.858-7.084 5.858-3.894 0-5.704-.767-7.268-1.564v-2.822c1.871.982 4.754 1.687 7.422 1.687 3.036 0 4.17-1.196 4.17-2.975 0-1.778-1.104-2.729-4.937-3.649-4.539-1.104-6.563-2.668-6.563-5.98 0-3.128 2.392-5.459 7.084-5.459 2.914 0 4.784.706 6.164 1.472v2.76c-2.024-1.165-4.201-1.533-6.286-1.533-2.638 0-4.202.92-4.202 2.76 0 1.656 1.288 2.484 4.846 3.373 4.262 1.074 6.654 2.454 6.654 6.072\" />\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)({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    return "<svg height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 161 32\">\n    <defs>\n      <linearGradient id=\"".concat(id, "\" x1=\"50%\" x2=\"50%\" y1=\"82.77%\" y2=\"10.134%\">\n        <stop offset=\"0%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n        <stop offset=\"82%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      </linearGradient>\n    </defs>\n    <g fill-rule=\"evenodd\">\n      <path fill=\"").concat(colors.textColor, "\" fill-rule=\"nonzero\" d=\"M44.168,18.294 C44.168,15.226 42.14,14.056 38.526,13.146 C35.51,12.392 34.418,11.69 34.418,10.286 C34.418,8.726 35.744,7.946 37.98,7.946 C39.748,7.946 41.594,8.258 43.31,9.246 L43.31,6.906 C42.14,6.256 40.554,5.658 38.084,5.658 C34.106,5.658 32.078,7.634 32.078,10.286 C32.078,13.094 33.794,14.42 37.642,15.356 C40.892,16.136 41.828,16.942 41.828,18.45 C41.828,19.958 40.866,20.972 38.292,20.972 C36.03,20.972 33.586,20.374 32,19.542 L32,21.934 C33.326,22.61 34.86,23.26 38.162,23.26 C42.4,23.26 44.168,21.258 44.168,18.294 Z M50.018,18.892 L50.018,12.08 L53.476,12.08 L53.476,10 L50.018,10 L50.018,7.244 L47.834,7.244 L47.834,10 L45.728,10 L45.728,12.08 L47.834,12.08 L47.834,18.944 C47.834,21.362 49.186,23 51.968,23 C52.644,23 53.086,22.896 53.476,22.792 L53.476,20.634 C53.086,20.712 52.592,20.816 52.072,20.816 C50.694,20.816 50.018,20.036 50.018,18.892 Z M65.15,23 L65.15,20.66 C64.318,22.376 62.758,23.26 60.756,23.26 C57.298,23.26 55.556,20.322 55.556,16.5 C55.556,12.834 57.376,9.74 61.016,9.74 C62.914,9.74 64.37,10.598 65.15,12.288 L65.15,10 L67.386,10 L67.386,23 L65.15,23 Z M57.792,16.5 C57.792,19.62 59.04,21.18 61.354,21.18 C63.356,21.18 65.15,19.906 65.15,17.02 L65.15,15.98 C65.15,13.094 63.512,11.82 61.614,11.82 C59.092,11.82 57.792,13.484 57.792,16.5 Z M73.86,18.892 L73.86,12.08 L77.318,12.08 L77.318,10 L73.86,10 L73.86,7.244 L71.676,7.244 L71.676,10 L69.57,10 L69.57,12.08 L71.676,12.08 L71.676,18.944 C71.676,21.362 73.028,23 75.81,23 C76.486,23 76.928,22.896 77.318,22.792 L77.318,20.634 C76.928,20.712 76.434,20.816 75.914,20.816 C74.536,20.816 73.86,20.036 73.86,18.892 Z M79.918,17.618 C79.918,21.206 81.634,23.26 84.624,23.26 C86.366,23.26 87.9,22.402 88.732,20.868 L88.732,23 L90.968,23 L90.968,10 L88.732,10 L88.732,17.228 C88.732,19.854 87.302,21.232 85.222,21.232 C83.09,21.232 82.154,20.192 82.154,17.852 L82.154,10 L79.918,10 L79.918,17.618 Z M103.318,19.464 C103.318,17.202 101.862,16.136 98.976,15.434 C96.584,14.862 95.96,14.29 95.96,13.38 C95.96,12.366 96.844,11.794 98.482,11.794 C99.86,11.794 101.134,12.21 102.694,12.99 L102.694,10.676 C101.732,10.156 100.198,9.74 98.508,9.74 C95.544,9.74 93.802,11.118 93.802,13.38 C93.802,15.512 95.024,16.63 97.91,17.332 C100.38,17.93 101.134,18.502 101.134,19.49 C101.134,20.504 100.25,21.206 98.534,21.206 C96.896,21.206 95.024,20.582 93.906,19.932 L93.906,22.298 C94.894,22.818 96.48,23.26 98.43,23.26 C101.914,23.26 103.318,21.622 103.318,19.464 Z M112.262,23.26 C110.364,23.26 108.908,22.402 108.128,20.712 L108.128,28.07 L105.892,28.07 L105.892,10 L108.128,10 L108.128,12.34 C108.96,10.624 110.52,9.74 112.522,9.74 C115.98,9.74 117.722,12.678 117.722,16.5 C117.722,20.166 115.902,23.26 112.262,23.26 Z M115.486,16.5 C115.486,13.38 114.238,11.82 111.924,11.82 C109.922,11.82 108.128,13.094 108.128,15.98 L108.128,17.02 C108.128,19.906 109.766,21.18 111.664,21.18 C114.186,21.18 115.486,19.516 115.486,16.5 Z M129.136,23 L129.136,20.66 C128.304,22.376 126.744,23.26 124.742,23.26 C121.284,23.26 119.542,20.322 119.542,16.5 C119.542,12.834 121.362,9.74 125.002,9.74 C126.9,9.74 128.356,10.598 129.136,12.288 L129.136,10 L131.372,10 L131.372,23 L129.136,23 Z M121.778,16.5 C121.778,19.62 123.026,21.18 125.34,21.18 C127.342,21.18 129.136,19.906 129.136,17.02 L129.136,15.98 C129.136,13.094 127.498,11.82 125.6,11.82 C123.078,11.82 121.778,13.484 121.778,16.5 Z M143.514,21.96 L143.514,20.66 C142.682,22.376 141.122,23.26 139.12,23.26 C135.688,23.26 133.972,20.322 133.972,16.5 C133.972,12.834 135.766,9.74 139.38,9.74 C141.278,9.74 142.734,10.598 143.514,12.288 L143.514,10 L145.698,10 L145.698,21.83 C145.698,25.652 143.904,28.226 139.25,28.226 C137.066,28.226 135.87,27.94 134.622,27.524 L134.622,25.34 C136.052,25.808 137.534,26.12 139.146,26.12 C142.396,26.12 143.514,24.378 143.514,21.96 Z M136.156,16.5 C136.156,19.62 137.404,21.18 139.718,21.18 C141.72,21.18 143.514,19.906 143.514,17.02 L143.514,15.98 C143.514,13.094 141.876,11.82 139.978,11.82 C137.456,11.82 136.156,13.484 136.156,16.5 Z M159.322,22.48 C158.256,23.052 156.618,23.26 155.292,23.26 C150.43,23.26 148.298,20.452 148.298,16.474 C148.298,12.548 150.482,9.74 154.434,9.74 C158.438,9.74 160.05,12.522 160.05,16.474 L160.05,17.488 L150.56,17.488 C150.872,19.698 152.302,21.128 155.37,21.128 C156.878,21.128 158.152,20.842 159.322,20.426 L159.322,22.48 Z M154.33,11.768 C151.964,11.768 150.768,13.302 150.534,15.564 L157.788,15.564 C157.658,13.146 156.566,11.768 154.33,11.768 Z\"/>\n      <circle cx=\"12\" cy=\"18.923\" r=\"5.538\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"/>\n      <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M0.143183246,11.470217 L3.17443341,15.0164923 C3.40520779,15.2738906 3.80165918,15.3034375 4.06900618,15.0831635 C8.96019542,10.7622319 15.0323494,10.7622319 19.9235386,15.0831635 C20.1908857,15.3034375 20.5873371,15.2738906 20.8181114,15.0164923 L23.8525794,11.470217 C24.0663737,11.214892 24.04536,10.8403265 23.8043112,10.6098404 C16.6927794,4.46338652 7.29976539,4.46338652 0.201105223,10.6098404 C-0.042871755,10.8377486 -0.0680989446,11.2124749 0.143183246,11.470217 Z\"/>\n    </g>\n  </svg>");
   }
-  return "\n  <svg height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 161 32\">\n  <defs>\n    <linearGradient id=\"".concat(id, "\" x1=\"50%\" x2=\"50%\" y1=\"82.77%\" y2=\"10.134%\">\n      <stop offset=\"0%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n      <stop offset=\"82%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n    </linearGradient>\n  </defs>\n  <g fill-rule=\"evenodd\">\n    <path fill=\"").concat(colors.textColor, "\" fill-rule=\"nonzero\" d=\"M44.168,18.294 C44.168,15.226 42.14,14.056 38.526,13.146 C35.51,12.392 34.418,11.69 34.418,10.286 C34.418,8.726 35.744,7.946 37.98,7.946 C39.748,7.946 41.594,8.258 43.31,9.246 L43.31,6.906 C42.14,6.256 40.554,5.658 38.084,5.658 C34.106,5.658 32.078,7.634 32.078,10.286 C32.078,13.094 33.794,14.42 37.642,15.356 C40.892,16.136 41.828,16.942 41.828,18.45 C41.828,19.958 40.866,20.972 38.292,20.972 C36.03,20.972 33.586,20.374 32,19.542 L32,21.934 C33.326,22.61 34.86,23.26 38.162,23.26 C42.4,23.26 44.168,21.258 44.168,18.294 Z M50.018,18.892 L50.018,12.08 L53.476,12.08 L53.476,10 L50.018,10 L50.018,7.244 L47.834,7.244 L47.834,10 L45.728,10 L45.728,12.08 L47.834,12.08 L47.834,18.944 C47.834,21.362 49.186,23 51.968,23 C52.644,23 53.086,22.896 53.476,22.792 L53.476,20.634 C53.086,20.712 52.592,20.816 52.072,20.816 C50.694,20.816 50.018,20.036 50.018,18.892 Z M65.15,23 L65.15,20.66 C64.318,22.376 62.758,23.26 60.756,23.26 C57.298,23.26 55.556,20.322 55.556,16.5 C55.556,12.834 57.376,9.74 61.016,9.74 C62.914,9.74 64.37,10.598 65.15,12.288 L65.15,10 L67.386,10 L67.386,23 L65.15,23 Z M57.792,16.5 C57.792,19.62 59.04,21.18 61.354,21.18 C63.356,21.18 65.15,19.906 65.15,17.02 L65.15,15.98 C65.15,13.094 63.512,11.82 61.614,11.82 C59.092,11.82 57.792,13.484 57.792,16.5 Z M73.86,18.892 L73.86,12.08 L77.318,12.08 L77.318,10 L73.86,10 L73.86,7.244 L71.676,7.244 L71.676,10 L69.57,10 L69.57,12.08 L71.676,12.08 L71.676,18.944 C71.676,21.362 73.028,23 75.81,23 C76.486,23 76.928,22.896 77.318,22.792 L77.318,20.634 C76.928,20.712 76.434,20.816 75.914,20.816 C74.536,20.816 73.86,20.036 73.86,18.892 Z M79.918,17.618 C79.918,21.206 81.634,23.26 84.624,23.26 C86.366,23.26 87.9,22.402 88.732,20.868 L88.732,23 L90.968,23 L90.968,10 L88.732,10 L88.732,17.228 C88.732,19.854 87.302,21.232 85.222,21.232 C83.09,21.232 82.154,20.192 82.154,17.852 L82.154,10 L79.918,10 L79.918,17.618 Z M103.318,19.464 C103.318,17.202 101.862,16.136 98.976,15.434 C96.584,14.862 95.96,14.29 95.96,13.38 C95.96,12.366 96.844,11.794 98.482,11.794 C99.86,11.794 101.134,12.21 102.694,12.99 L102.694,10.676 C101.732,10.156 100.198,9.74 98.508,9.74 C95.544,9.74 93.802,11.118 93.802,13.38 C93.802,15.512 95.024,16.63 97.91,17.332 C100.38,17.93 101.134,18.502 101.134,19.49 C101.134,20.504 100.25,21.206 98.534,21.206 C96.896,21.206 95.024,20.582 93.906,19.932 L93.906,22.298 C94.894,22.818 96.48,23.26 98.43,23.26 C101.914,23.26 103.318,21.622 103.318,19.464 Z M112.262,23.26 C110.364,23.26 108.908,22.402 108.128,20.712 L108.128,28.07 L105.892,28.07 L105.892,10 L108.128,10 L108.128,12.34 C108.96,10.624 110.52,9.74 112.522,9.74 C115.98,9.74 117.722,12.678 117.722,16.5 C117.722,20.166 115.902,23.26 112.262,23.26 Z M115.486,16.5 C115.486,13.38 114.238,11.82 111.924,11.82 C109.922,11.82 108.128,13.094 108.128,15.98 L108.128,17.02 C108.128,19.906 109.766,21.18 111.664,21.18 C114.186,21.18 115.486,19.516 115.486,16.5 Z M129.136,23 L129.136,20.66 C128.304,22.376 126.744,23.26 124.742,23.26 C121.284,23.26 119.542,20.322 119.542,16.5 C119.542,12.834 121.362,9.74 125.002,9.74 C126.9,9.74 128.356,10.598 129.136,12.288 L129.136,10 L131.372,10 L131.372,23 L129.136,23 Z M121.778,16.5 C121.778,19.62 123.026,21.18 125.34,21.18 C127.342,21.18 129.136,19.906 129.136,17.02 L129.136,15.98 C129.136,13.094 127.498,11.82 125.6,11.82 C123.078,11.82 121.778,13.484 121.778,16.5 Z M143.514,21.96 L143.514,20.66 C142.682,22.376 141.122,23.26 139.12,23.26 C135.688,23.26 133.972,20.322 133.972,16.5 C133.972,12.834 135.766,9.74 139.38,9.74 C141.278,9.74 142.734,10.598 143.514,12.288 L143.514,10 L145.698,10 L145.698,21.83 C145.698,25.652 143.904,28.226 139.25,28.226 C137.066,28.226 135.87,27.94 134.622,27.524 L134.622,25.34 C136.052,25.808 137.534,26.12 139.146,26.12 C142.396,26.12 143.514,24.378 143.514,21.96 Z M136.156,16.5 C136.156,19.62 137.404,21.18 139.718,21.18 C141.72,21.18 143.514,19.906 143.514,17.02 L143.514,15.98 C143.514,13.094 141.876,11.82 139.978,11.82 C137.456,11.82 136.156,13.484 136.156,16.5 Z M159.322,22.48 C158.256,23.052 156.618,23.26 155.292,23.26 C150.43,23.26 148.298,20.452 148.298,16.474 C148.298,12.548 150.482,9.74 154.434,9.74 C158.438,9.74 160.05,12.522 160.05,16.474 L160.05,17.488 L150.56,17.488 C150.872,19.698 152.302,21.128 155.37,21.128 C156.878,21.128 158.152,20.842 159.322,20.426 L159.322,22.48 Z M154.33,11.768 C151.964,11.768 150.768,13.302 150.534,15.564 L157.788,15.564 C157.658,13.146 156.566,11.768 154.33,11.768 Z\"/>\n    <circle cx=\"12\" cy=\"18.923\" r=\"5.538\" fill=\"url(#").concat(id, ")\" fill-rule=\"nonzero\"/>\n    <path fill=\"").concat(colors.iconColor, "\" fill-rule=\"nonzero\" d=\"M0.143183246,11.470217 L3.17443341,15.0164923 C3.40520779,15.2738906 3.80165918,15.3034375 4.06900618,15.0831635 C8.96019542,10.7622319 15.0323494,10.7622319 19.9235386,15.0831635 C20.1908857,15.3034375 20.5873371,15.2738906 20.8181114,15.0164923 L23.8525794,11.470217 C24.0663737,11.214892 24.04536,10.8403265 23.8043112,10.6098404 C16.6927794,4.46338652 7.29976539,4.46338652 0.201105223,10.6098404 C-0.042871755,10.8377486 -0.0680989446,11.2124749 0.143183246,11.470217 Z\"/>\n  </g>\n</svg>");
 };
 
 /**
@@ -60,6 +69,8 @@ var StatuspageLogo = exports.StatuspageLogo = function StatuspageLogo(_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,
@@ -73,7 +84,7 @@ var StatuspageLogo = exports.StatuspageLogo = function StatuspageLogo(_ref2) {
       iconGradientStop: iconGradientStop,
       iconColor: iconColor,
       textColor: textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

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

@@ -18,7 +18,7 @@ var svg = function svg(_ref) {
     textColor: textColor
   };
   if (appearance) {
-    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
   }
   return "\n<svg viewBox=\"0 0 129 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g fill=\"".concat(colors.textColor, "\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" >\n    <path d=\"M12.168,19.294 C12.168,16.226 10.14,15.056 6.526,14.146 C3.51,13.392 2.418,12.69 2.418,11.286 C2.418,9.726 3.744,8.946 5.98,8.946 C7.748,8.946 9.594,9.258 11.31,10.246 L11.31,7.906 C10.14,7.256 8.554,6.658 6.084,6.658 C2.106,6.658 0.078,8.634 0.078,11.286 C0.078,14.094 1.794,15.42 5.642,16.356 C8.892,17.136 9.828,17.942 9.828,19.45 C9.828,20.958 8.866,21.972 6.292,21.972 C4.03,21.972 1.586,21.374 1.55431223e-14,20.542 L1.55431223e-14,22.934 C1.326,23.61 2.86,24.26 6.162,24.26 C10.4,24.26 12.168,22.258 12.168,19.294 Z M18.018,19.892 L18.018,13.08 L21.476,13.08 L21.476,11 L18.018,11 L18.018,8.244 L15.834,8.244 L15.834,11 L13.728,11 L13.728,13.08 L15.834,13.08 L15.834,19.944 C15.834,22.362 17.186,24 19.968,24 C20.644,24 21.086,23.896 21.476,23.792 L21.476,21.634 C21.086,21.712 20.592,21.816 20.072,21.816 C18.694,21.816 18.018,21.036 18.018,19.892 Z M33.15,24 L33.15,21.66 C32.318,23.376 30.758,24.26 28.756,24.26 C25.298,24.26 23.556,21.322 23.556,17.5 C23.556,13.834 25.376,10.74 29.016,10.74 C30.914,10.74 32.37,11.598 33.15,13.288 L33.15,11 L35.386,11 L35.386,24 L33.15,24 Z M25.792,17.5 C25.792,20.62 27.04,22.18 29.354,22.18 C31.356,22.18 33.15,20.906 33.15,18.02 L33.15,16.98 C33.15,14.094 31.512,12.82 29.614,12.82 C27.092,12.82 25.792,14.484 25.792,17.5 Z M41.86,19.892 L41.86,13.08 L45.318,13.08 L45.318,11 L41.86,11 L41.86,8.244 L39.676,8.244 L39.676,11 L37.57,11 L37.57,13.08 L39.676,13.08 L39.676,19.944 C39.676,22.362 41.028,24 43.81,24 C44.486,24 44.928,23.896 45.318,23.792 L45.318,21.634 C44.928,21.712 44.434,21.816 43.914,21.816 C42.536,21.816 41.86,21.036 41.86,19.892 Z M47.918,18.618 C47.918,22.206 49.634,24.26 52.624,24.26 C54.366,24.26 55.9,23.402 56.732,21.868 L56.732,24 L58.968,24 L58.968,11 L56.732,11 L56.732,18.228 C56.732,20.854 55.302,22.232 53.222,22.232 C51.09,22.232 50.154,21.192 50.154,18.852 L50.154,11 L47.918,11 L47.918,18.618 Z M71.318,20.464 C71.318,18.202 69.862,17.136 66.976,16.434 C64.584,15.862 63.96,15.29 63.96,14.38 C63.96,13.366 64.844,12.794 66.482,12.794 C67.86,12.794 69.134,13.21 70.694,13.99 L70.694,11.676 C69.732,11.156 68.198,10.74 66.508,10.74 C63.544,10.74 61.802,12.118 61.802,14.38 C61.802,16.512 63.024,17.63 65.91,18.332 C68.38,18.93 69.134,19.502 69.134,20.49 C69.134,21.504 68.25,22.206 66.534,22.206 C64.896,22.206 63.024,21.582 61.906,20.932 L61.906,23.298 C62.894,23.818 64.48,24.26 66.43,24.26 C69.914,24.26 71.318,22.622 71.318,20.464 Z M80.262,24.26 C78.364,24.26 76.908,23.402 76.128,21.712 L76.128,29.07 L73.892,29.07 L73.892,11 L76.128,11 L76.128,13.34 C76.96,11.624 78.52,10.74 80.522,10.74 C83.98,10.74 85.722,13.678 85.722,17.5 C85.722,21.166 83.902,24.26 80.262,24.26 Z M83.486,17.5 C83.486,14.38 82.238,12.82 79.924,12.82 C77.922,12.82 76.128,14.094 76.128,16.98 L76.128,18.02 C76.128,20.906 77.766,22.18 79.664,22.18 C82.186,22.18 83.486,20.516 83.486,17.5 Z M97.136,24 L97.136,21.66 C96.304,23.376 94.744,24.26 92.742,24.26 C89.284,24.26 87.542,21.322 87.542,17.5 C87.542,13.834 89.362,10.74 93.002,10.74 C94.9,10.74 96.356,11.598 97.136,13.288 L97.136,11 L99.372,11 L99.372,24 L97.136,24 Z M89.778,17.5 C89.778,20.62 91.026,22.18 93.34,22.18 C95.342,22.18 97.136,20.906 97.136,18.02 L97.136,16.98 C97.136,14.094 95.498,12.82 93.6,12.82 C91.078,12.82 89.778,14.484 89.778,17.5 Z M111.514,22.96 L111.514,21.66 C110.682,23.376 109.122,24.26 107.12,24.26 C103.688,24.26 101.972,21.322 101.972,17.5 C101.972,13.834 103.766,10.74 107.38,10.74 C109.278,10.74 110.734,11.598 111.514,13.288 L111.514,11 L113.698,11 L113.698,22.83 C113.698,26.652 111.904,29.226 107.25,29.226 C105.066,29.226 103.87,28.94 102.622,28.524 L102.622,26.34 C104.052,26.808 105.534,27.12 107.146,27.12 C110.396,27.12 111.514,25.378 111.514,22.96 Z M104.156,17.5 C104.156,20.62 105.404,22.18 107.718,22.18 C109.72,22.18 111.514,20.906 111.514,18.02 L111.514,16.98 C111.514,14.094 109.876,12.82 107.978,12.82 C105.456,12.82 104.156,14.484 104.156,17.5 Z M127.322,23.48 C126.256,24.052 124.618,24.26 123.292,24.26 C118.43,24.26 116.298,21.452 116.298,17.474 C116.298,13.548 118.482,10.74 122.434,10.74 C126.438,10.74 128.05,13.522 128.05,17.474 L128.05,18.488 L118.56,18.488 C118.872,20.698 120.302,22.128 123.37,22.128 C124.878,22.128 126.152,21.842 127.322,21.426 L127.322,23.48 Z M122.33,12.768 C119.964,12.768 118.768,14.302 118.534,16.564 L125.788,16.564 C125.658,14.146 124.566,12.768 122.33,12.768 Z\"></path>\n  </g>\n</svg>");
 };

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

@@ -7,29 +7,45 @@ Object.defineProperty(exports, "__esModule", {
 exports.TrelloIcon = 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;
+    iconGradientStop = _ref.iconGradientStop,
+    iconColor = _ref.iconColor;
   var colors = {
     iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop
+    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')) {
+    // Currently the user can style the trello icon using only iconGradientStop and iconGradientStart
+    // the following is used to mimic this edge case as these two props aren't used on the new logos
+    if (colors.iconColor === 'inherit') {
+      colors.iconColor = iconGradientStop;
+    }
+    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, " clip-rule=\"evenodd\" d=\"M24.286 5.337H7.714a2.585 2.585 0 0 0-2.585 2.585v16.572a2.585 2.585 0 0 0 2.585 2.584h16.572a2.585 2.585 0 0 0 2.585-2.584V7.922a2.585 2.585 0 0 0-2.585-2.585m-9.791 15.66a.86.86 0 0 1-.859.858h-3.634a.86.86 0 0 1-.859-.859V10.21a.86.86 0 0 1 .859-.86h3.634a.86.86 0 0 1 .859.86zm8.362-4.953a.86.86 0 0 1-.859.859h-3.634a.86.86 0 0 1-.859-.859V10.21a.86.86 0 0 1 .859-.86h3.634a.86.86 0 0 1 .859.86z\" fill-rule=\"evenodd\"/>\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)({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    return "<svg viewBox=\"0 0 32 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n      <defs>\n        <linearGradient id=\"".concat(id, "\" x1=\"16.3382\" y1=\"25.6824\" x2=\"16.3382\" y2=\"7.00599\" gradientUnits=\"userSpaceOnUse\">\n          <stop stop-color=\"").concat(colors.iconGradientStart, " \"").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n          <stop offset=\"100%\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n        </linearGradient>\n      </defs>\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M23.4579 7H9.21854C8.63014 7 8.06585 7.23374 7.64979 7.64979C7.23374 8.06585 7 8.63014 7 9.21854V23.4669C7 24.0553 7.23374 24.6196 7.64979 25.0356C8.06585 25.4517 8.63014 25.6854 9.21854 25.6854H23.4579C24.0463 25.6854 24.6106 25.4517 25.0266 25.0356C25.4427 24.6196 25.6764 24.0553 25.6764 23.4669V9.22452C25.6772 8.93268 25.6204 8.64354 25.5093 8.37369C25.3981 8.10383 25.2348 7.85855 25.0287 7.65191C24.8227 7.44527 24.5778 7.28131 24.3083 7.16945C24.0387 7.05758 23.7497 7 23.4579 7V7ZM15.0448 20.4729C15.0448 20.6685 14.9673 20.8561 14.8293 20.9947C14.6912 21.1333 14.5039 21.2116 14.3083 21.2124H11.1856C10.9897 21.2116 10.802 21.1334 10.6635 20.9949C10.525 20.8564 10.4469 20.6688 10.4461 20.4729V11.1916C10.4469 10.9957 10.525 10.808 10.6635 10.6695C10.802 10.531 10.9897 10.4528 11.1856 10.4521H14.3083C14.5039 10.4528 14.6912 10.5311 14.8293 10.6697C14.9673 10.8083 15.0448 10.996 15.0448 11.1916V20.4729ZM22.2304 16.2185C22.2296 16.4143 22.1514 16.602 22.0129 16.7405C21.8744 16.879 21.6867 16.9572 21.4908 16.958H18.3681C18.1725 16.9572 17.9852 16.8789 17.8471 16.7403C17.7091 16.6017 17.6316 16.4141 17.6316 16.2185V11.1916C17.6316 10.996 17.7091 10.8083 17.8471 10.6697C17.9852 10.5311 18.1725 10.4528 18.3681 10.4521H21.4908C21.6867 10.4528 21.8744 10.531 22.0129 10.6695C22.1514 10.808 22.2296 10.9957 22.2304 11.1916V16.2185Z\"\n        fill=\"url(#").concat(id, ")\"\n      />\n    </svg>");
   }
-  return "\n<svg viewBox=\"0 0 32 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <defs>\n    <linearGradient id=\"".concat(id, "\" x1=\"16.3382\" y1=\"25.6824\" x2=\"16.3382\" y2=\"7.00599\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"").concat(colors.iconGradientStart, " \"").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"100%\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n  </defs>\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M23.4579 7H9.21854C8.63014 7 8.06585 7.23374 7.64979 7.64979C7.23374 8.06585 7 8.63014 7 9.21854V23.4669C7 24.0553 7.23374 24.6196 7.64979 25.0356C8.06585 25.4517 8.63014 25.6854 9.21854 25.6854H23.4579C24.0463 25.6854 24.6106 25.4517 25.0266 25.0356C25.4427 24.6196 25.6764 24.0553 25.6764 23.4669V9.22452C25.6772 8.93268 25.6204 8.64354 25.5093 8.37369C25.3981 8.10383 25.2348 7.85855 25.0287 7.65191C24.8227 7.44527 24.5778 7.28131 24.3083 7.16945C24.0387 7.05758 23.7497 7 23.4579 7V7ZM15.0448 20.4729C15.0448 20.6685 14.9673 20.8561 14.8293 20.9947C14.6912 21.1333 14.5039 21.2116 14.3083 21.2124H11.1856C10.9897 21.2116 10.802 21.1334 10.6635 20.9949C10.525 20.8564 10.4469 20.6688 10.4461 20.4729V11.1916C10.4469 10.9957 10.525 10.808 10.6635 10.6695C10.802 10.531 10.9897 10.4528 11.1856 10.4521H14.3083C14.5039 10.4528 14.6912 10.5311 14.8293 10.6697C14.9673 10.8083 15.0448 10.996 15.0448 11.1916V20.4729ZM22.2304 16.2185C22.2296 16.4143 22.1514 16.602 22.0129 16.7405C21.8744 16.879 21.6867 16.9572 21.4908 16.958H18.3681C18.1725 16.9572 17.9852 16.8789 17.8471 16.7403C17.7091 16.6017 17.6316 16.4141 17.6316 16.2185V11.1916C17.6316 10.996 17.7091 10.8083 17.8471 10.6697C17.9852 10.5311 18.1725 10.4528 18.3681 10.4521H21.4908C21.6867 10.4528 21.8744 10.531 22.0129 10.6695C22.1514 10.808 22.2296 10.9957 22.2304 11.1916V16.2185Z\"\n    fill=\"url(#").concat(id, ")\"\n  />\n</svg>\n");
 };
 
 /**
@@ -56,14 +72,17 @@ var TrelloIcon = exports.TrelloIcon = function TrelloIcon(_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,
     svg: svg({
       appearance: appearance,
       iconGradientStart: iconGradientStart,
-      iconGradientStop: iconGradientStop
-    }),
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "TrelloIcon", {
 Object.defineProperty(exports, "TrelloLogo", {
   enumerable: true,
   get: function get() {
-    return _logo.AtlasLogo;
+    return _logo.TrelloLogo;
   }
 });
 Object.defineProperty(exports, "TrelloWordmark", {

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

@@ -4,34 +4,50 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AtlasLogo = void 0;
+exports.TrelloLogo = 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,
+    iconColor = _ref.iconColor,
     textColor = _ref.textColor;
   var colors = {
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: iconGradientStop
-  });
-  if (appearance) {
-    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    // Currently the user can style the trello icon using only iconGradientStop and iconGradientStart
+    // the following is used to mimic this edge case as these two props aren't used on the new logos
+    if (colors.iconColor === 'inherit') {
+      colors.iconColor = iconGradientStop;
+    }
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearance)(appearance, colorMode);
+    }
+    return "<svg fill=\"none\" height=\"32\" viewBox=\"0 0 106 32\" focusable=\"false\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(colors.iconColor, "\" clip-rule=\"evenodd\" d=\"M19.157 4.67H2.585A2.585 2.585 0 0 0 0 7.255v16.572a2.585 2.585 0 0 0 2.585 2.585h16.572a2.585 2.585 0 0 0 2.584-2.585V7.255a2.585 2.585 0 0 0-2.584-2.585M9.365 20.33a.86.86 0 0 1-.858.858H4.873a.86.86 0 0 1-.859-.858V9.543c0-.475.385-.859.859-.859h3.634c.474 0 .858.385.858.86zm8.362-4.952a.86.86 0 0 1-.858.858h-3.634a.86.86 0 0 1-.859-.858V9.543c0-.475.385-.859.859-.859h3.634c.474 0 .858.385.858.86z\" fill-rule=\"evenodd\"/>\n      <path fill=\"").concat(colors.textColor, "\" d=\"M97.64 25.848c-4.6 0-7.298-3.404-7.298-8.004S93.04 9.9 97.64 9.9c4.57 0 7.238 3.342 7.238 7.942s-2.668 8.004-7.238 8.004m0-13.494c-3.281 0-4.722 2.576-4.722 5.49 0 2.913 1.44 5.55 4.722 5.55 3.251 0 4.662-2.637 4.662-5.55 0-2.914-1.411-5.49-4.662-5.49M88.874 25.51c-.215.062-.675.123-1.35.123-2.514 0-4.109-1.196-4.109-4.017V3.798h2.637V21.31c0 1.38.92 1.87 2.055 1.87.276 0 .46 0 .767-.03zm-7.996 0c-.215.062-.675.123-1.35.123-2.514 0-4.109-1.196-4.109-4.017V3.798h2.637V21.31c0 1.38.92 1.87 2.055 1.87.276 0 .46 0 .767-.03zM65.532 12.293c-2.79 0-4.202 1.81-4.478 4.477h8.556c-.153-2.852-1.44-4.477-4.078-4.477m5.888 12.635c-1.258.674-3.19.92-4.754.92-5.734 0-8.249-3.312-8.249-8.004 0-4.631 2.576-7.943 7.237-7.943 4.723 0 6.624 3.281 6.624 7.943v1.196H61.085c.368 2.606 2.055 4.293 5.673 4.293 1.78 0 3.282-.337 4.662-.828zm-19.48-8.434v9.047h-2.576V10.208h2.576v2.698c.89-1.809 2.423-3.097 5.428-2.913v2.576c-3.373-.337-5.428.675-5.428 3.925M32.943 5.393H48.03V8.03h-6.164v17.511h-2.76V8.031h-6.164z\"/>\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)({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance);
+    }
+    return "<svg\n      viewBox=\"0 0 94 32\"\n      height=\"32\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <defs>\n        <linearGradient\n          id=\"".concat(id, "\"\n          x1=\"9.33821\"\n          y1=\"23.6824\"\n          x2=\"9.33821\"\n          y2=\"5.00599\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\" />\n          <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\" />\n        </linearGradient>\n    </defs>\n    <path\n      fill=\"").concat(colors.textColor, "\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M68.749 23.7902C66.249 23.7902 64.6742 22.5776 64.6742 19.7573V5H68.5155V19.2304C68.5155 20.0477 69.0574 20.3381 69.7131 20.3381C69.9021 20.3421 70.0911 20.3331 70.2789 20.3112V23.6315C69.7788 23.7552 69.2639 23.8086 68.749 23.7902ZM38.7121 9.98505V6.37431H26.0297V9.98505H30.3051V23.6825H34.4308V9.98505H38.7121ZM40.1498 23.6825H43.9641V16.6227C43.9641 14.464 45.2276 13.8053 47.9072 14.0149V10.027C45.8443 9.89522 44.6856 10.973 43.9641 12.7904V10.2096H40.1498V23.6825ZM72.6901 19.7573C72.6901 22.5776 74.2619 23.7902 76.7619 23.7902C77.2787 23.809 77.7957 23.7556 78.2978 23.6315V20.3112C78.109 20.333 77.9189 20.342 77.7289 20.3381C77.0732 20.3381 76.5313 20.0477 76.5313 19.2304V5H72.6901V19.7573ZM80.1444 16.9402C80.1444 12.7786 82.5396 9.93129 86.6653 9.93129C90.791 9.93129 93.1353 12.7845 93.1353 16.9402C93.1353 21.0958 90.764 24 86.6653 24C82.5665 24 80.1444 21.0749 80.1444 16.9402ZM83.8809 16.9402C83.8809 18.9701 84.7312 20.5749 86.6653 20.5749C88.5994 20.5749 89.3988 18.9701 89.3988 16.9402C89.3988 14.9103 88.5724 13.3474 86.6653 13.3474C84.7581 13.3474 83.8959 14.9103 83.8959 16.9402H83.8809ZM56.2777 18.3621C55.2023 18.3538 54.1281 18.2909 53.0592 18.1734C53.4124 20.0986 54.8256 20.7692 56.8795 20.7692C58.4004 20.7692 59.8854 20.3501 61.1998 19.9309V23.1734C59.7762 23.7133 58.2642 23.9824 56.7417 23.9668C51.6131 23.9668 49.3436 21.4009 49.3436 17.0806C49.3436 12.934 51.9723 9.94 56.0801 9.94C59.1309 9.94 61.6668 12.0058 61.6668 14.7513C61.6668 17.5776 59.1968 18.3621 56.2777 18.3621ZM57.9513 14.6166C57.9513 13.6136 57.0831 12.8801 56.0022 12.8801L55.9992 12.8711C55.4963 12.8789 55.0046 13.0206 54.5746 13.2816C54.1447 13.5426 53.7921 13.9135 53.5532 14.3561C53.2546 14.9118 53.0751 15.5236 53.0262 16.1525C53.686 16.2551 54.3525 16.3081 55.0202 16.3112C56.5861 16.3112 57.9513 15.91 57.9513 14.6166Z\"\n    />\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M16.4579 5H2.21854C1.63014 5 1.06585 5.23374 0.649794 5.64979C0.233738 6.06585 0 6.63014 0 7.21854V21.4669C0 22.0553 0.233738 22.6196 0.649794 23.0356C1.06585 23.4517 1.63014 23.6854 2.21854 23.6854H16.4579C17.0463 23.6854 17.6106 23.4517 18.0266 23.0356C18.4427 22.6196 18.6764 22.0553 18.6764 21.4669V7.22452C18.6772 6.93268 18.6204 6.64354 18.5093 6.37369C18.3981 6.10383 18.2348 5.85855 18.0287 5.65191C17.8227 5.44527 17.5778 5.28131 17.3083 5.16945C17.0387 5.05758 16.7497 5 16.4579 5V5ZM8.04481 18.4729C8.04481 18.6685 7.96731 18.8561 7.82927 18.9947C7.69123 19.1333 7.50391 19.2116 7.30829 19.2124H4.18558C3.98969 19.2116 3.80205 19.1334 3.66353 18.9949C3.52502 18.8564 3.44685 18.6688 3.44607 18.4729V9.19157C3.44685 8.99568 3.52502 8.80804 3.66353 8.66952C3.80205 8.53101 3.98969 8.45284 4.18558 8.45205H7.30829C7.50391 8.45285 7.69123 8.53111 7.82927 8.66971C7.96731 8.80831 8.04481 8.99595 8.04481 9.19157V18.4729ZM15.2304 14.2185C15.2296 14.4143 15.1514 14.602 15.0129 14.7405C14.8744 14.879 14.6867 14.9572 14.4908 14.958H11.3681C11.1725 14.9572 10.9852 14.8789 10.8471 14.7403C10.7091 14.6017 10.6316 14.4141 10.6316 14.2185V9.19157C10.6316 8.99595 10.7091 8.80831 10.8471 8.66971C10.9852 8.53111 11.1725 8.45285 11.3681 8.45205H14.4908C14.6867 8.45284 14.8744 8.53101 15.0129 8.66952C15.1514 8.80804 15.2296 8.99568 15.2304 9.19157V14.2185Z\"\n      fill=\"url(#").concat(id, ")\"\n    />\n  </svg>");
   }
-  return "\n  <svg\n    viewBox=\"0 0 94 32\"\n    height=\"32\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <defs>\n      <linearGradient\n        id=\"".concat(id, "\"\n        x1=\"9.33821\"\n        y1=\"23.6824\"\n        x2=\"9.33821\"\n        y2=\"5.00599\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\" />\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\" />\n      </linearGradient>\n  </defs>\n  <path\n    fill=\"").concat(colors.textColor, "\"\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M68.749 23.7902C66.249 23.7902 64.6742 22.5776 64.6742 19.7573V5H68.5155V19.2304C68.5155 20.0477 69.0574 20.3381 69.7131 20.3381C69.9021 20.3421 70.0911 20.3331 70.2789 20.3112V23.6315C69.7788 23.7552 69.2639 23.8086 68.749 23.7902ZM38.7121 9.98505V6.37431H26.0297V9.98505H30.3051V23.6825H34.4308V9.98505H38.7121ZM40.1498 23.6825H43.9641V16.6227C43.9641 14.464 45.2276 13.8053 47.9072 14.0149V10.027C45.8443 9.89522 44.6856 10.973 43.9641 12.7904V10.2096H40.1498V23.6825ZM72.6901 19.7573C72.6901 22.5776 74.2619 23.7902 76.7619 23.7902C77.2787 23.809 77.7957 23.7556 78.2978 23.6315V20.3112C78.109 20.333 77.9189 20.342 77.7289 20.3381C77.0732 20.3381 76.5313 20.0477 76.5313 19.2304V5H72.6901V19.7573ZM80.1444 16.9402C80.1444 12.7786 82.5396 9.93129 86.6653 9.93129C90.791 9.93129 93.1353 12.7845 93.1353 16.9402C93.1353 21.0958 90.764 24 86.6653 24C82.5665 24 80.1444 21.0749 80.1444 16.9402ZM83.8809 16.9402C83.8809 18.9701 84.7312 20.5749 86.6653 20.5749C88.5994 20.5749 89.3988 18.9701 89.3988 16.9402C89.3988 14.9103 88.5724 13.3474 86.6653 13.3474C84.7581 13.3474 83.8959 14.9103 83.8959 16.9402H83.8809ZM56.2777 18.3621C55.2023 18.3538 54.1281 18.2909 53.0592 18.1734C53.4124 20.0986 54.8256 20.7692 56.8795 20.7692C58.4004 20.7692 59.8854 20.3501 61.1998 19.9309V23.1734C59.7762 23.7133 58.2642 23.9824 56.7417 23.9668C51.6131 23.9668 49.3436 21.4009 49.3436 17.0806C49.3436 12.934 51.9723 9.94 56.0801 9.94C59.1309 9.94 61.6668 12.0058 61.6668 14.7513C61.6668 17.5776 59.1968 18.3621 56.2777 18.3621ZM57.9513 14.6166C57.9513 13.6136 57.0831 12.8801 56.0022 12.8801L55.9992 12.8711C55.4963 12.8789 55.0046 13.0206 54.5746 13.2816C54.1447 13.5426 53.7921 13.9135 53.5532 14.3561C53.2546 14.9118 53.0751 15.5236 53.0262 16.1525C53.686 16.2551 54.3525 16.3081 55.0202 16.3112C56.5861 16.3112 57.9513 15.91 57.9513 14.6166Z\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M16.4579 5H2.21854C1.63014 5 1.06585 5.23374 0.649794 5.64979C0.233738 6.06585 0 6.63014 0 7.21854V21.4669C0 22.0553 0.233738 22.6196 0.649794 23.0356C1.06585 23.4517 1.63014 23.6854 2.21854 23.6854H16.4579C17.0463 23.6854 17.6106 23.4517 18.0266 23.0356C18.4427 22.6196 18.6764 22.0553 18.6764 21.4669V7.22452C18.6772 6.93268 18.6204 6.64354 18.5093 6.37369C18.3981 6.10383 18.2348 5.85855 18.0287 5.65191C17.8227 5.44527 17.5778 5.28131 17.3083 5.16945C17.0387 5.05758 16.7497 5 16.4579 5V5ZM8.04481 18.4729C8.04481 18.6685 7.96731 18.8561 7.82927 18.9947C7.69123 19.1333 7.50391 19.2116 7.30829 19.2124H4.18558C3.98969 19.2116 3.80205 19.1334 3.66353 18.9949C3.52502 18.8564 3.44685 18.6688 3.44607 18.4729V9.19157C3.44685 8.99568 3.52502 8.80804 3.66353 8.66952C3.80205 8.53101 3.98969 8.45284 4.18558 8.45205H7.30829C7.50391 8.45285 7.69123 8.53111 7.82927 8.66971C7.96731 8.80831 8.04481 8.99595 8.04481 9.19157V18.4729ZM15.2304 14.2185C15.2296 14.4143 15.1514 14.602 15.0129 14.7405C14.8744 14.879 14.6867 14.9572 14.4908 14.958H11.3681C11.1725 14.9572 10.9852 14.8789 10.8471 14.7403C10.7091 14.6017 10.6316 14.4141 10.6316 14.2185V9.19157C10.6316 8.99595 10.7091 8.80831 10.8471 8.66971C10.9852 8.53111 11.1725 8.45285 11.3681 8.45205H14.4908C14.6867 8.45284 14.8744 8.53101 15.0129 8.66952C15.1514 8.80804 15.2296 8.99568 15.2304 9.19157V14.2185Z\"\n    fill=\"url(#").concat(id, ")\"\n  />\n</svg>");
 };
 
 /**
@@ -43,7 +59,7 @@ var svg = function svg(_ref) {
  * - [Code](https://atlassian.design/components/logo/code)
  * - [Usage](https://atlassian.design/components/logo/usage)
  */
-var AtlasLogo = exports.AtlasLogo = function AtlasLogo(_ref2) {
+var TrelloLogo = exports.TrelloLogo = function TrelloLogo(_ref2) {
   var appearance = _ref2.appearance,
     _ref2$label = _ref2.label,
     label = _ref2$label === void 0 ? 'Trello' : _ref2$label,
@@ -58,6 +74,8 @@ var AtlasLogo = exports.AtlasLogo = function AtlasLogo(_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,
@@ -70,7 +88,7 @@ var AtlasLogo = exports.AtlasLogo = function AtlasLogo(_ref2) {
       iconGradientStart: iconGradientStart,
       iconGradientStop: iconGradientStop,
       textColor: textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

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

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

package/dist/cjs/utils.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorsFromAppearance = void 0;
+exports.getColorsFromAppearanceOldLogos = exports.getColorsFromAppearance = void 0;
 var _colors = require("@atlaskit/theme/colors");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 // TODO: This is where we need to add tokens for all appearance color values
-var getColorsFromAppearance = exports.getColorsFromAppearance = function getColorsFromAppearance(appearance) {
+var getColorsFromAppearanceOldLogos = exports.getColorsFromAppearanceOldLogos = function getColorsFromAppearanceOldLogos(appearance) {
   var iconGradientStart, iconGradientStop, iconColor, textColor, atlassianLogoTextColor;
   switch (appearance) {
     case 'brand':
@@ -44,4 +44,51 @@ var getColorsFromAppearance = exports.getColorsFromAppearance = function getColo
     textColor: textColor,
     atlassianLogoTextColor: atlassianLogoTextColor
   };
+};
+var getColorsFromAppearance = exports.getColorsFromAppearance = function getColorsFromAppearance(appearance, colorMode) {
+  var iconGradientStart, iconGradientStop, iconColor, textColor, atlassianLogoTextColor;
+  if (colorMode === 'dark') {
+    switch (appearance) {
+      case 'brand':
+        iconColor = '#357DE8';
+        textColor = '#E2E3E4';
+        atlassianLogoTextColor = '#357DE8';
+        break;
+      case 'neutral':
+        iconColor = '#96999E';
+        textColor = '#BFC1C4';
+        atlassianLogoTextColor = '#96999E';
+        break;
+      case 'inverse':
+        iconColor = '#101214';
+        textColor = '#101214';
+        atlassianLogoTextColor = '#101214';
+        break;
+    }
+  } else {
+    switch (appearance) {
+      case 'brand':
+        iconColor = '#1868DB';
+        textColor = '#101214';
+        atlassianLogoTextColor = '#1868DB';
+        break;
+      case 'neutral':
+        iconColor = '#6C6F77';
+        textColor = '#3B3D42';
+        atlassianLogoTextColor = '#6C6F77';
+        break;
+      case 'inverse':
+        iconColor = _colors.N0;
+        textColor = _colors.N0;
+        atlassianLogoTextColor = _colors.N0;
+        break;
+    }
+  }
+  return {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor,
+    atlassianLogoTextColor: atlassianLogoTextColor
+  };
 };