@atlaskit/logo 13.15.0 → 13.15.2

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

@@ -2,17 +2,17 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance
 }) => {
   // Replace with React 18's useId() hook when we update.
   // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  let id = uid({
+  const id = uid({
     appearance
   });
-  const colors = getColorsFromAppearance(appearance);
+  const colors = getColorsFromAppearanceOldLogos(appearance);
   return `<svg height="32" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="${id}-a" x1="12.595" x2="12.595" y1="40" y2="30" gradientUnits="userSpaceOnUse">

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance
@@ -13,7 +13,7 @@ const svg = ({
   let id = uid({
     appearance
   });
-  const colors = getColorsFromAppearance(appearance);
+  const colors = getColorsFromAppearanceOldLogos(appearance);
   return `
   <svg height="32" viewBox="0 0 477 48" xmlns="http://www.w3.org/2000/svg">
   <defs>

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

@@ -1,40 +1,51 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { uid } from 'react-uid';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearance, getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
   iconGradientStart,
   iconGradientStop,
   iconColor
-}) => {
+}, colorMode) => {
   let colors = {
     iconGradientStart,
     iconGradientStop,
     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
-  let id = uid({
-    iconGradientStart: iconGradientStop
-  });
-  if (appearance) {
-    colors = getColorsFromAppearance(appearance);
+  if (getBooleanFF('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    if (appearance) {
+      colors = 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">
+      <path fill="${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"/>
+    </svg>`;
+  } else {
+    if (appearance) {
+      colors = 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
+    let id = uid({
+      iconGradientStart: iconGradientStop
+    });
+    return `
+    <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <defs>
+        <linearGradient id="${id}" x1="14.8402" y1="15.8324" x2="8.6599" y2="26.5369" gradientUnits="userSpaceOnUse">
+          <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
+          <stop stop-color="${colors.iconGradientStop}" offset="0.9228"></stop>
+        </linearGradient>
+      </defs>
+      <path fill="url(#${id})" d="M11.6397 14.0398C11.2789 13.643 10.7378 13.679 10.4852 14.148L4.64091 25.8728C4.42446 26.3418 4.74912 26.8829 5.25419 26.8829H13.4074C13.6599 26.8829 13.9125 26.7386 14.0207 26.4861C15.7885 22.8424 14.7061 17.3227 11.6397 14.0398Z" />
+      <path fill="${colors.iconColor}" d="M15.9343 3.36124C12.6513 8.55622 12.8678 14.2923 15.0324 18.6215C17.1969 22.9506 18.8565 26.2336 18.9647 26.4861C19.0729 26.7386 19.3254 26.8829 19.578 26.8829H27.7312C28.2363 26.8829 28.597 26.3418 28.3445 25.8728C28.3445 25.8728 17.3774 3.93846 17.0887 3.39732C16.8723 2.89225 16.259 2.85618 15.9343 3.36124Z" />
+    </svg>`;
   }
-  return `
-  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-    <defs>
-      <linearGradient id="${id}" x1="14.8402" y1="15.8324" x2="8.6599" y2="26.5369" gradientUnits="userSpaceOnUse">
-        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${colors.iconGradientStop}" offset="0.9228"></stop>
-      </linearGradient>
-    </defs>
-    <path fill="url(#${id})" d="M11.6397 14.0398C11.2789 13.643 10.7378 13.679 10.4852 14.148L4.64091 25.8728C4.42446 26.3418 4.74912 26.8829 5.25419 26.8829H13.4074C13.6599 26.8829 13.9125 26.7386 14.0207 26.4861C15.7885 22.8424 14.7061 17.3227 11.6397 14.0398Z" />
-    <path fill="${colors.iconColor}" d="M15.9343 3.36124C12.6513 8.55622 12.8678 14.2923 15.0324 18.6215C17.1969 22.9506 18.8565 26.2336 18.9647 26.4861C19.0729 26.7386 19.3254 26.8829 19.578 26.8829H27.7312C28.2363 26.8829 28.597 26.3418 28.3445 25.8728C28.3445 25.8728 17.3774 3.93846 17.0887 3.39732C16.8723 2.89225 16.259 2.85618 15.9343 3.36124Z" />
-  </svg>`;
 };
 
 /**
@@ -56,6 +67,9 @@ export const AtlassianIcon = ({
   textColor = defaultLogoParams.textColor,
   testId
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -64,7 +78,7 @@ export const AtlassianIcon = ({
       iconGradientStart,
       iconGradientStop,
       iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

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

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

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
@@ -13,7 +13,7 @@ const svg = ({
     atlassianLogoTextColor: textColor
   };
   if (appearance) {
-    colors = getColorsFromAppearance(appearance);
+    colors = getColorsFromAppearanceOldLogos(appearance);
   }
   return `
   <svg viewBox="0 0 158 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">>

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
@@ -26,7 +26,7 @@ const svg = ({
     iconGradientStart: iconGradientStop
   });
   if (appearance) {
-    colors = getColorsFromAppearance(appearance);
+    colors = getColorsFromAppearanceOldLogos(appearance);
   }
   return `
 <svg fill="none" viewBox="0 0 270 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"2>

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

@@ -1,30 +1,40 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { uid } from 'react-uid';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearance, getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
   iconGradientStart,
   iconGradientStop,
   iconColor
-}) => {
+}, colorMode) => {
   let colors = {
     iconGradientStart,
     iconGradientStop,
     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
-  let id = uid({
-    iconGradientStart: iconGradientStop
-  });
-  if (appearance) {
-    colors = getColorsFromAppearance(appearance);
-  }
-  return `
+  if (getBooleanFF('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    if (appearance) {
+      colors = 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">
+      <path fill=${colors.iconColor} d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"/>
+    </svg>`;
+  } else {
+    if (appearance) {
+      colors = 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
+    let id = uid({
+      iconGradientStart: iconGradientStop
+    });
+    return `
   <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}" x1="100%" x2="45.339%" y1="29.23%" y2="75.038%">
@@ -37,6 +47,7 @@ const svg = ({
       <path fill="url(#${id})" d="M27.3886833,12.3958093 L20.0320674,12.3958093 L18.7974728,19.5995707 L13.7023207,19.5995707 L7.68612174,26.7445417 C7.87680866,26.9094297 8.11992598,27.0011197 8.37200761,27.0032187 L24.3394307,27.0032187 C24.727754,27.0082167 25.0611955,26.7281258 25.1233002,26.3447683 L27.3886833,12.3958093 Z"/>
     </g>
   </svg>`;
+  }
 };
 
 /**
@@ -58,6 +69,9 @@ export const BitbucketIcon = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -66,7 +80,7 @@ export const BitbucketIcon = ({
       iconGradientStart,
       iconGradientStop,
       iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -1,8 +1,10 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { uid } from 'react-uid';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearance, getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
@@ -10,37 +12,47 @@ const svg = ({
   iconGradientStop,
   iconColor,
   textColor
-}) => {
+}, colorMode) => {
   let colors = {
     iconGradientStart,
     iconGradientStop,
     iconColor,
     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
-  let id = uid({
-    iconGradientStart: iconGradientStop
-  });
-  if (appearance) {
-    colors = getColorsFromAppearance(appearance);
-    id = `bitbucketLogo-${appearance}`;
+  if (getBooleanFF('platform.design-system-team.brand-refresh-update-product-logos_q7coo')) {
+    if (appearance) {
+      colors = getColorsFromAppearance(appearance, colorMode);
+    }
+    return `<svg fill="none" height="32" viewBox="0 0 158 32" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+        <path fill=${colors.iconColor} d="m20.46 15.152-1.619 9.885c-.105.598-.527.95-1.125.95H3.996c-.599 0-1.02-.352-1.126-.95L.02 7.412c-.105-.598.211-.985.774-.985h20.123c.563 0 .88.387.774.985l-.774 4.644c-.106.668-.493.95-1.126.95H7.69c-.176 0-.281.105-.246.316l.95 5.84c.035.141.14.247.281.247h4.363c.14 0 .246-.106.281-.247l.668-4.221c.07-.528.423-.739.915-.739h4.75c.703 0 .914.352.809.95"/>
+        <path fill=${colors.textColor} d="M153.212 20.787c0 1.35.797 2.27 2.422 2.27.614 0 1.196-.123 1.656-.215v2.545c-.46.123-.981.245-1.778.245-3.282 0-4.876-1.932-4.876-4.784v-8.187h-2.484v-2.454h2.484v-3.25h2.576v3.25h4.078v2.453h-4.078zm-13.537-8.494c-2.791 0-4.201 1.809-4.477 4.477h8.556c-.154-2.852-1.442-4.477-4.079-4.477m5.888 12.634c-1.257.675-3.189.92-4.753.92-5.735 0-8.25-3.312-8.25-8.004 0-4.63 2.576-7.942 7.238-7.942 4.722 0 6.624 3.281 6.624 7.942v1.196h-11.194c.368 2.607 2.055 4.294 5.674 4.294 1.778 0 3.281-.338 4.661-.828zm-23.82.613h-2.638V3.799h2.638v13.585l6.593-7.176h3.435l-7.207 7.544 7.513 7.79h-3.588l-6.746-7.176zm-5.648-2.76v2.362c-.92.49-2.331.705-3.742.705-5.458 0-8.004-3.312-8.004-8.004 0-4.63 2.546-7.942 8.004-7.942 1.38 0 2.454.184 3.65.736v2.453c-.982-.46-2.024-.736-3.466-.736-3.986 0-5.612 2.515-5.612 5.49s1.656 5.489 5.674 5.489c1.564 0 2.545-.215 3.496-.552m-27.843-3.588v-8.986h2.637v9.262c0 2.76 1.104 3.986 3.619 3.986 2.453 0 4.14-1.625 4.14-4.722v-8.526h2.637v15.334h-2.637v-2.515c-.982 1.81-2.79 2.821-4.846 2.821-3.526 0-5.55-2.422-5.55-6.654m-5.388-1.319c0-3.68-1.472-5.52-4.201-5.52-2.362 0-4.478 1.503-4.478 4.907v1.226c0 3.404 1.932 4.907 4.171 4.907 2.975 0 4.508-1.963 4.508-5.52m-3.803 7.973c-2.238 0-3.956-1.012-4.876-3.005v2.699h-2.637V3.798h2.637v9.17c.982-2.025 2.822-3.067 5.183-3.067 4.079 0 6.133 3.465 6.133 7.973 0 4.324-2.146 7.973-6.44 7.973m-14.974-5.06c0 1.35.797 2.27 2.422 2.27.614 0 1.196-.123 1.656-.215v2.545a6.3 6.3 0 0 1-1.778.245c-3.282 0-4.876-1.932-4.876-4.784v-8.187h-2.484v-2.454h2.484v-3.25h2.576v3.25h4.078v2.453h-4.078zM53.328 6.16c0-1.166.767-1.84 1.84-1.84s1.84.674 1.84 1.84S56.242 8 55.168 8s-1.84-.676-1.84-1.84m.49 19.38V10.207h2.638V25.54zm-9.828-9.046h-6.194v6.287h6.256c2.637 0 3.833-.951 3.833-2.975 0-2.147-1.134-3.312-3.894-3.312m-.889-8.464h-5.305v6.01h5.305c2.607 0 3.68-1.195 3.68-3.127 0-1.963-1.165-2.883-3.68-2.883m-8.065 17.51V5.394h8.433c4.11 0 6.103 2.024 6.103 5.274 0 2.423-1.104 3.926-3.373 4.478 2.974.49 4.446 2.116 4.446 4.968 0 3.22-2.177 5.428-6.685 5.428z"/>
+      </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
+    let id = uid({
+      iconGradientStart: iconGradientStop
+    });
+    if (appearance) {
+      colors = getColorsFromAppearanceOldLogos(appearance);
+      id = `bitbucketLogo-${appearance}`;
+    }
+    return `
+    <svg viewBox="0 0 137 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <defs>
+        <linearGradient x1="100.866322%" y1="25.6261254%" x2="46.5685299%" y2="75.2076031%" id="${id}">
+          <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
+          <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" stroke-width="1" fill-rule="evenodd">
+        <path d="M22.38125,13.1176316 L15.3425,13.1176316 L14.16125,20.0504386 L9.28624997,20.0504386 L3.52999997,26.9266667 C3.71244766,27.0853527 3.94506033,27.173594 4.18624997,27.175614 L19.46375,27.175614 C19.8352946,27.180424 20.1543287,26.9108682 20.21375,26.5419298 L22.38125,13.1176316 Z" fill="url(#${id})" fill-rule="nonzero"></path>
+        <path fill="${colors.iconColor}" fill-rule="nonzero" d="M0.759678147,6 C0.53811485,5.99712567 0.326627812,6.09294508 0.181948325,6.26175474 C0.0372688368,6.4305644 -0.0257933559,6.65508453 0.00967814748,6.87508772 L3.19342815,26.315614 C3.23255884,26.5521357 3.35340224,26.7671859 3.53467815,26.9228947 L3.53467815,26.9228947 C3.71712584,27.0815808 3.94973851,27.169822 4.19092815,27.1718421 L10.1009281,20.0504386 L9.27217815,20.0504386 L7.97092815,13.1176316 L22.3859281,13.1176316 L23.3984281,6.88263158 C23.4360238,6.66342534 23.375521,6.43870373 23.2330921,6.26853487 C23.0906632,6.09836602 22.880829,6.00009878 22.6596781,6 L0.759678147,6 Z"></path>
+        <path fill="${colors.textColor}" d="M32,8.352 L38.63,8.352 C42.114,8.352 43.804,10.068 43.804,12.824 C43.804,14.878 42.868,16.152 40.944,16.62 C43.466,17.036 44.714,18.414 44.714,20.832 C44.714,23.562 42.868,25.434 39.046,25.434 L32,25.434 L32,8.352 Z M38.318,10.588 L34.34,10.588 L34.34,15.684 L38.318,15.684 C40.528,15.684 41.438,14.67 41.438,13.032 C41.438,11.368 40.45,10.588 38.318,10.588 Z M39.072,17.764 L34.34,17.764 L34.34,23.094 L39.124,23.094 C41.36,23.094 42.374,22.288 42.374,20.572 C42.374,18.752 41.412,17.764 39.072,17.764 Z M47.236,9.002 C47.236,9.99 47.886,10.562 48.796,10.562 C49.706,10.562 50.356,9.99 50.356,9.002 C50.356,8.014 49.706,7.442 48.796,7.442 C47.886,7.442 47.236,8.014 47.236,9.002 Z M47.652,25.434 L49.888,25.434 L49.888,12.434 L47.652,12.434 L47.652,25.434 Z M56.362,21.326 L56.362,14.514 L59.82,14.514 L59.82,12.434 L56.362,12.434 L56.362,9.678 L54.178,9.678 L54.178,12.434 L52.072,12.434 L52.072,14.514 L54.178,14.514 L54.178,21.378 C54.178,23.796 55.53,25.434 58.312,25.434 C58.988,25.434 59.43,25.33 59.82,25.226 L59.82,23.068 C59.43,23.146 58.936,23.25 58.416,23.25 C57.038,23.25 56.362,22.47 56.362,21.326 Z M74.51,18.934 C74.51,22.6 72.69,25.694 69.05,25.694 C67.152,25.694 65.696,24.836 64.916,23.146 L64.916,25.434 L62.68,25.434 L62.68,7 L64.916,7 L64.916,14.774 C65.748,13.058 67.308,12.174 69.31,12.174 C72.768,12.174 74.51,15.112 74.51,18.934 Z M72.274,18.934 C72.274,15.814 71.026,14.254 68.712,14.254 C66.71,14.254 64.916,15.528 64.916,18.414 L64.916,19.454 C64.916,22.34 66.554,23.614 68.452,23.614 C70.974,23.614 72.274,21.95 72.274,18.934 Z M76.85,20.052 C76.85,23.64 78.566,25.694 81.556,25.694 C83.298,25.694 84.832,24.836 85.664,23.302 L85.664,25.434 L87.9,25.434 L87.9,12.434 L85.664,12.434 L85.664,19.662 C85.664,22.288 84.234,23.666 82.154,23.666 C80.022,23.666 79.086,22.626 79.086,20.286 L79.086,12.434 L76.85,12.434 L76.85,20.052 Z M100.458,23.094 C99.652,23.38 98.82,23.562 97.494,23.562 C94.088,23.562 92.684,21.43 92.684,18.908 C92.684,16.386 94.062,14.254 97.442,14.254 C98.664,14.254 99.548,14.488 100.38,14.878 L100.38,12.798 C99.366,12.33 98.456,12.174 97.286,12.174 C92.658,12.174 90.5,14.982 90.5,18.908 C90.5,22.886 92.658,25.694 97.286,25.694 C98.482,25.694 99.678,25.512 100.458,25.096 L100.458,23.094 Z M105.242,25.434 L105.242,19.35 L110.962,25.434 L114.004,25.434 L107.634,18.83 L113.744,12.434 L110.832,12.434 L105.242,18.518 L105.242,7 L103.006,7 L103.006,25.434 L105.242,25.434 Z M126.224,24.914 C125.158,25.486 123.52,25.694 122.194,25.694 C117.332,25.694 115.2,22.886 115.2,18.908 C115.2,14.982 117.384,12.174 121.336,12.174 C125.34,12.174 126.952,14.956 126.952,18.908 L126.952,19.922 L117.462,19.922 C117.774,22.132 119.204,23.562 122.272,23.562 C123.78,23.562 125.054,23.276 126.224,22.86 L126.224,24.914 Z M121.232,14.202 C118.866,14.202 117.67,15.736 117.436,17.998 L124.69,17.998 C124.56,15.58 123.468,14.202 121.232,14.202 Z M132.698,21.326 L132.698,14.514 L136.156,14.514 L136.156,12.434 L132.698,12.434 L132.698,9.678 L130.514,9.678 L130.514,12.434 L128.408,12.434 L128.408,14.514 L130.514,14.514 L130.514,21.378 C130.514,23.796 131.866,25.434 134.648,25.434 C135.324,25.434 135.766,25.33 136.156,25.226 L136.156,23.068 C135.766,23.146 135.272,23.25 134.752,23.25 C133.374,23.25 132.698,22.47 132.698,21.326 Z"></path>
+      </g>
+    </svg>`;
   }
-  return `
-  <svg viewBox="0 0 137 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-    <defs>
-      <linearGradient x1="100.866322%" y1="25.6261254%" x2="46.5685299%" y2="75.2076031%" id="${id}">
-        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
-      </linearGradient>
-    </defs>
-    <g stroke="none" stroke-width="1" fill-rule="evenodd">
-      <path d="M22.38125,13.1176316 L15.3425,13.1176316 L14.16125,20.0504386 L9.28624997,20.0504386 L3.52999997,26.9266667 C3.71244766,27.0853527 3.94506033,27.173594 4.18624997,27.175614 L19.46375,27.175614 C19.8352946,27.180424 20.1543287,26.9108682 20.21375,26.5419298 L22.38125,13.1176316 Z" fill="url(#${id})" fill-rule="nonzero"></path>
-      <path fill="${colors.iconColor}" fill-rule="nonzero" d="M0.759678147,6 C0.53811485,5.99712567 0.326627812,6.09294508 0.181948325,6.26175474 C0.0372688368,6.4305644 -0.0257933559,6.65508453 0.00967814748,6.87508772 L3.19342815,26.315614 C3.23255884,26.5521357 3.35340224,26.7671859 3.53467815,26.9228947 L3.53467815,26.9228947 C3.71712584,27.0815808 3.94973851,27.169822 4.19092815,27.1718421 L10.1009281,20.0504386 L9.27217815,20.0504386 L7.97092815,13.1176316 L22.3859281,13.1176316 L23.3984281,6.88263158 C23.4360238,6.66342534 23.375521,6.43870373 23.2330921,6.26853487 C23.0906632,6.09836602 22.880829,6.00009878 22.6596781,6 L0.759678147,6 Z"></path>
-      <path fill="${colors.textColor}" d="M32,8.352 L38.63,8.352 C42.114,8.352 43.804,10.068 43.804,12.824 C43.804,14.878 42.868,16.152 40.944,16.62 C43.466,17.036 44.714,18.414 44.714,20.832 C44.714,23.562 42.868,25.434 39.046,25.434 L32,25.434 L32,8.352 Z M38.318,10.588 L34.34,10.588 L34.34,15.684 L38.318,15.684 C40.528,15.684 41.438,14.67 41.438,13.032 C41.438,11.368 40.45,10.588 38.318,10.588 Z M39.072,17.764 L34.34,17.764 L34.34,23.094 L39.124,23.094 C41.36,23.094 42.374,22.288 42.374,20.572 C42.374,18.752 41.412,17.764 39.072,17.764 Z M47.236,9.002 C47.236,9.99 47.886,10.562 48.796,10.562 C49.706,10.562 50.356,9.99 50.356,9.002 C50.356,8.014 49.706,7.442 48.796,7.442 C47.886,7.442 47.236,8.014 47.236,9.002 Z M47.652,25.434 L49.888,25.434 L49.888,12.434 L47.652,12.434 L47.652,25.434 Z M56.362,21.326 L56.362,14.514 L59.82,14.514 L59.82,12.434 L56.362,12.434 L56.362,9.678 L54.178,9.678 L54.178,12.434 L52.072,12.434 L52.072,14.514 L54.178,14.514 L54.178,21.378 C54.178,23.796 55.53,25.434 58.312,25.434 C58.988,25.434 59.43,25.33 59.82,25.226 L59.82,23.068 C59.43,23.146 58.936,23.25 58.416,23.25 C57.038,23.25 56.362,22.47 56.362,21.326 Z M74.51,18.934 C74.51,22.6 72.69,25.694 69.05,25.694 C67.152,25.694 65.696,24.836 64.916,23.146 L64.916,25.434 L62.68,25.434 L62.68,7 L64.916,7 L64.916,14.774 C65.748,13.058 67.308,12.174 69.31,12.174 C72.768,12.174 74.51,15.112 74.51,18.934 Z M72.274,18.934 C72.274,15.814 71.026,14.254 68.712,14.254 C66.71,14.254 64.916,15.528 64.916,18.414 L64.916,19.454 C64.916,22.34 66.554,23.614 68.452,23.614 C70.974,23.614 72.274,21.95 72.274,18.934 Z M76.85,20.052 C76.85,23.64 78.566,25.694 81.556,25.694 C83.298,25.694 84.832,24.836 85.664,23.302 L85.664,25.434 L87.9,25.434 L87.9,12.434 L85.664,12.434 L85.664,19.662 C85.664,22.288 84.234,23.666 82.154,23.666 C80.022,23.666 79.086,22.626 79.086,20.286 L79.086,12.434 L76.85,12.434 L76.85,20.052 Z M100.458,23.094 C99.652,23.38 98.82,23.562 97.494,23.562 C94.088,23.562 92.684,21.43 92.684,18.908 C92.684,16.386 94.062,14.254 97.442,14.254 C98.664,14.254 99.548,14.488 100.38,14.878 L100.38,12.798 C99.366,12.33 98.456,12.174 97.286,12.174 C92.658,12.174 90.5,14.982 90.5,18.908 C90.5,22.886 92.658,25.694 97.286,25.694 C98.482,25.694 99.678,25.512 100.458,25.096 L100.458,23.094 Z M105.242,25.434 L105.242,19.35 L110.962,25.434 L114.004,25.434 L107.634,18.83 L113.744,12.434 L110.832,12.434 L105.242,18.518 L105.242,7 L103.006,7 L103.006,25.434 L105.242,25.434 Z M126.224,24.914 C125.158,25.486 123.52,25.694 122.194,25.694 C117.332,25.694 115.2,22.886 115.2,18.908 C115.2,14.982 117.384,12.174 121.336,12.174 C125.34,12.174 126.952,14.956 126.952,18.908 L126.952,19.922 L117.462,19.922 C117.774,22.132 119.204,23.562 122.272,23.562 C123.78,23.562 125.054,23.276 126.224,22.86 L126.224,24.914 Z M121.232,14.202 C118.866,14.202 117.67,15.736 117.436,17.998 L124.69,17.998 C124.56,15.58 123.468,14.202 121.232,14.202 Z M132.698,21.326 L132.698,14.514 L136.156,14.514 L136.156,12.434 L132.698,12.434 L132.698,9.678 L130.514,9.678 L130.514,12.434 L128.408,12.434 L128.408,14.514 L130.514,14.514 L130.514,21.378 C130.514,23.796 131.866,25.434 134.648,25.434 C135.324,25.434 135.766,25.33 136.156,25.226 L136.156,23.068 C135.766,23.146 135.272,23.25 134.752,23.25 C133.374,23.25 132.698,22.47 132.698,21.326 Z"></path>
-    </g>
-  </svg>`;
 };
 
 /**
@@ -62,6 +74,9 @@ export const BitbucketLogo = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -75,7 +90,7 @@ export const BitbucketLogo = ({
       iconGradientStop,
       iconColor,
       textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

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

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { defaultLogoParams } from '../constants';
-import { getColorsFromAppearance } from '../utils';
+import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance,
@@ -11,7 +11,7 @@ const svg = ({
     textColor
   };
   if (appearance) {
-    colors = getColorsFromAppearance(appearance);
+    colors = getColorsFromAppearanceOldLogos(appearance);
   }
   return `
 <svg viewBox="0 0 105 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">