@atlaskit/logo 13.15.0 → 13.15.2

package/dist/es2019/jira-align-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 height="32" viewBox="0 0 117 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
@@ -26,7 +26,7 @@ const svg = ({
       <path d="M96.5468 22.7316C95.5419 24.8315 93.6397 25.9176 91.1992 25.9176C87.036 25.9176 84.9544 22.3333 84.9544 17.6267C84.9544 13.1373 87.1437 9.33583 91.5222 9.33583C93.8192 9.33583 95.6137 10.3858 96.5468 12.4494V9.66167H99.2026V24.1436C99.2026 28.814 97.0134 31.9638 91.3787 31.9638C88.7228 31.9638 87.2872 31.6018 85.7439 31.0949V28.4157C87.4667 28.995 89.297 29.3571 91.2351 29.3571C95.183 29.3571 96.5468 27.221 96.5468 24.2522V22.7316ZM91.917 23.3471C94.3575 23.3471 96.5109 21.7903 96.5109 18.2422V16.975C96.5109 13.427 94.537 11.8702 92.2041 11.8702C89.1535 11.8702 87.5743 13.8976 87.5743 17.5905C87.6102 21.4644 89.1176 23.3471 91.917 23.3471Z" />
       <path d="M116.717 25.5918H113.989V15.9613C113.989 13.1011 112.841 11.834 110.257 11.834C107.744 11.834 105.986 13.5356 105.986 16.7578V25.628H103.258V9.69789H105.986V12.3046C106.991 10.422 108.857 9.37205 110.975 9.37205C114.599 9.37205 116.681 11.9064 116.681 16.2872V25.5918H116.717Z" />
     </g>
-  </svg>  
+  </svg>
   `;
 };
 

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

@@ -1,43 +1,53 @@
 /* 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="M11.034 21.99h-2.22c-3.346 0-5.747-2.05-5.747-5.052h11.932c.619 0 1.019.44 1.019 1.062v12.007c-2.983 0-4.984-2.416-4.984-5.784zm5.893-5.967h-2.219c-3.347 0-5.748-2.013-5.748-5.015h11.933c.618 0 1.055.402 1.055 1.025V24.04c-2.983 0-5.02-2.416-5.02-5.784zm5.93-5.93h-2.219c-3.347 0-5.748-2.05-5.748-5.052h11.933c.618 0 1.018.439 1.018 1.025v12.007c-2.983 0-4.984-2.416-4.984-5.784z"/>
+    </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);
+    }
+    return `<svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <defs>
+        <linearGradient x1="94.092%" x2="56.535%" y1="6.033%" y2="43.087%" id="${id}">
+          <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
+          <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" stroke-width="1" fill-rule="nonzero">
+        <path fill="${colors.iconColor}" d="M26.0406546,5 L14.9983562,5 C14.9983562,6.32163748 15.5233746,7.58914413 16.4579134,8.52368295 C17.3924523,9.45822178 18.6599589,9.98324022 19.9815964,9.98324022 L22.0151159,9.98324022 L22.0151159,11.9465283 C22.0168782,14.6974491 24.2474348,16.9265768 26.9983562,16.9265762 L26.9983562,5.95770152 C26.9983562,5.42877757 26.5695786,5 26.0406546,5 Z"></path>
+        <path fill="url(#${id})" d="M20.0420436,11 L9,11 C9.00176139,13.7504065 11.2309666,15.9796117 13.9813731,15.9813731 L16.0154337,15.9813731 L16.0154337,17.9451836 C16.0154337,19.2671728 16.5405919,20.5350167 17.4753794,21.4698042 C18.4101669,22.4045917 19.6780108,22.9297499 21,22.9297499 L21,11.9579564 C21,11.4288917 20.5711083,11 20.0420436,11 Z"></path>
+        <path fill="url(#${id})" d="M14.0420436,17 L3,17 C3.00176275,19.7516528 5.23291286,21.9813736 7.98456626,21.9813731 L10.0250133,21.9813731 L10.0250133,23.9451836 C10.0250082,26.6943468 12.2508419,28.9244664 15,28.9297499 L15,17.9579564 C15,17.4288917 14.5711083,17 14.0420436,17 Z"></path>
+      </g>
+    </svg>`;
   }
-  return `
-  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-    <defs>
-      <linearGradient x1="94.092%" x2="56.535%" y1="6.033%" y2="43.087%" id="${id}">
-        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
-        <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
-      </linearGradient>
-    </defs>
-    <g stroke="none" stroke-width="1" fill-rule="nonzero">
-      <path fill="${colors.iconColor}" d="M26.0406546,5 L14.9983562,5 C14.9983562,6.32163748 15.5233746,7.58914413 16.4579134,8.52368295 C17.3924523,9.45822178 18.6599589,9.98324022 19.9815964,9.98324022 L22.0151159,9.98324022 L22.0151159,11.9465283 C22.0168782,14.6974491 24.2474348,16.9265768 26.9983562,16.9265762 L26.9983562,5.95770152 C26.9983562,5.42877757 26.5695786,5 26.0406546,5 Z"></path>
-      <path fill="url(#${id})" d="M20.0420436,11 L9,11 C9.00176139,13.7504065 11.2309666,15.9796117 13.9813731,15.9813731 L16.0154337,15.9813731 L16.0154337,17.9451836 C16.0154337,19.2671728 16.5405919,20.5350167 17.4753794,21.4698042 C18.4101669,22.4045917 19.6780108,22.9297499 21,22.9297499 L21,11.9579564 C21,11.4288917 20.5711083,11 20.0420436,11 Z"></path>
-      <path fill="url(#${id})" d="M14.0420436,17 L3,17 C3.00176275,19.7516528 5.23291286,21.9813736 7.98456626,21.9813731 L10.0250133,21.9813731 L10.0250133,23.9451836 C10.0250082,26.6943468 12.2508419,28.9244664 15,28.9297499 L15,17.9579564 C15,17.4288917 14.5711083,17 14.0420436,17 Z"></path>
-    </g>
-  </svg>`;
 };
 
 /**
@@ -59,6 +69,9 @@ export const JiraIcon = ({
   iconGradientStart = defaultLogoParams.iconGradientStart,
   iconGradientStop = defaultLogoParams.iconGradientStop
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -67,7 +80,7 @@ export const JiraIcon = ({
       iconGradientStart,
       iconGradientStop,
       iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/es2019/jira-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,46 @@ 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);
+  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 77 32" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <path fill="${colors.iconColor}" d="M7.967 21.323H5.748C2.401 21.323 0 19.273 0 16.271h11.933c.618 0 1.018.44 1.018 1.062V29.34c-2.983 0-4.984-2.416-4.984-5.784zm5.894-5.967h-2.22c-3.346 0-5.747-2.013-5.747-5.015h11.932c.618 0 1.055.402 1.055 1.025v12.007c-2.983 0-5.02-2.416-5.02-5.784zm5.93-5.93h-2.22c-3.347 0-5.748-2.05-5.748-5.052h11.933c.618 0 1.019.439 1.019 1.025v12.007c-2.983 0-4.984-2.416-4.984-5.784z"/>
+      <path fill="${colors.textColor}" d="M65.023 17.874c0 3.68 1.472 5.52 4.202 5.52 2.36 0 4.477-1.503 4.477-4.907V17.26c0-3.404-1.932-4.906-4.17-4.906-2.975 0-4.509 1.962-4.509 5.52m8.679 7.666v-2.76c-.981 2.024-2.821 3.067-5.183 3.067-4.078 0-6.133-3.465-6.133-7.973 0-4.324 2.147-7.974 6.44-7.974 2.239 0 3.956 1.012 4.876 3.006v-2.699h2.637V25.54zM55.91 16.493v9.047h-2.577V10.207h2.576v2.698c.89-1.809 2.423-3.097 5.428-2.913v2.576c-3.373-.337-5.428.675-5.428 3.925M46.224 6.159c0-1.165.767-1.84 1.84-1.84s1.84.675 1.84 1.84-.767 1.84-1.84 1.84-1.84-.675-1.84-1.84m.49 19.381V10.207h2.638V25.54zm-6.427-5.95V5.393h2.76v14.015c0 3.71-1.626 6.256-5.428 6.256-1.442 0-2.546-.246-3.312-.522v-2.668c.828.338 1.84.522 2.852.522 2.33 0 3.128-1.41 3.128-3.404"/>
+    </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);
+    }
+    return `<svg viewBox="0 0 69 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <defs>
+        <linearGradient x1="98.0308675%" y1="0.160599572%" x2="58.8877062%" y2="40.7655246%" id="${id}">
+          <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
+          <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" stroke-width="1" fill-rule="nonzero">
+        <path fill="${colors.iconColor}" d="M22.9366667,4 L11.41,4 C11.41,5.3800098 11.9582068,6.703498 12.934021,7.67931228 C13.9098353,8.65512657 15.2333235,9.20333333 16.6133333,9.20333333 L18.7366667,9.20333333 L18.7366667,11.2533333 C18.7385054,14.1244521 21.0655479,16.4514946 23.9366667,16.4533333 L23.9366667,5 C23.9366667,4.44771525 23.4889514,4 22.9366667,4 Z"></path>
+        <path fill="url(#${id})"d="M17.2333333,9.74333333 L5.70666667,9.74333333 C5.70850536,12.6144521 8.03554792,14.9414946 10.9066667,14.9433333 L13.03,14.9433333 L13.03,17 C13.0336786,19.8711178 15.3622132,22.196669 18.2333333,22.1966667 L18.2333333,10.7433333 C18.2333333,10.1910486 17.7856181,9.74333333 17.2333333,9.74333333 Z" ></path>
+        <path fill="url(#${id})" d="M11.5266667,15.4833333 L0,15.4833333 C3.51929402e-16,18.357055 2.32961169,20.6866667 5.20333333,20.6866667 L7.33333333,20.6866667 L7.33333333,22.7366667 C7.33516565,25.6051863 9.65815176,27.9311544 12.5266667,27.9366667 L12.5266667,16.4833333 C12.5266667,15.9310486 12.0789514,15.4833333 11.5266667,15.4833333 Z" ></path>
+        <path fill="${colors.textColor}" d="M37.07,18.956 C37.07,20.646 36.394,21.842 34.418,21.842 C33.56,21.842 32.702,21.686 32,21.4 L32,23.662 C32.65,23.896 33.586,24.104 34.808,24.104 C38.032,24.104 39.41,21.946 39.41,18.8 L39.41,6.918 L37.07,6.918 L37.07,18.956 Z M42.894,7.568 C42.894,8.556 43.544,9.128 44.454,9.128 C45.364,9.128 46.014,8.556 46.014,7.568 C46.014,6.58 45.364,6.008 44.454,6.008 C43.544,6.008 42.894,6.58 42.894,7.568 Z M43.31,24 L45.546,24 L45.546,11 L43.31,11 L43.31,24 Z M48.926,24 L51.11,24 L51.11,16.33 C51.11,13.574 52.852,12.716 55.712,13.002 L55.712,10.818 C53.164,10.662 51.864,11.754 51.11,13.288 L51.11,11 L48.926,11 L48.926,24 Z M66.45,24 L66.45,21.66 C65.618,23.376 64.058,24.26 62.056,24.26 C58.598,24.26 56.856,21.322 56.856,17.5 C56.856,13.834 58.676,10.74 62.316,10.74 C64.214,10.74 65.67,11.598 66.45,13.288 L66.45,11 L68.686,11 L68.686,24 L66.45,24 Z M59.092,17.5 C59.092,20.62 60.34,22.18 62.654,22.18 C64.656,22.18 66.45,20.906 66.45,18.02 L66.45,16.98 C66.45,14.094 64.812,12.82 62.914,12.82 C60.392,12.82 59.092,14.484 59.092,17.5 Z" fill-rule="evenodd"></path>
+      </g>
+    </svg>`;
   }
-  return `
-  <svg viewBox="0 0 69 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-    <defs>
-      <linearGradient x1="98.0308675%" y1="0.160599572%" x2="58.8877062%" y2="40.7655246%" id="${id}">
-        <stop stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
-        <stop stop-color="${colors.iconGradientStop}" offset="100%"></stop>
-      </linearGradient>
-    </defs>
-    <g stroke="none" stroke-width="1" fill-rule="nonzero">
-      <path fill="${colors.iconColor}" d="M22.9366667,4 L11.41,4 C11.41,5.3800098 11.9582068,6.703498 12.934021,7.67931228 C13.9098353,8.65512657 15.2333235,9.20333333 16.6133333,9.20333333 L18.7366667,9.20333333 L18.7366667,11.2533333 C18.7385054,14.1244521 21.0655479,16.4514946 23.9366667,16.4533333 L23.9366667,5 C23.9366667,4.44771525 23.4889514,4 22.9366667,4 Z"></path>
-      <path fill="url(#${id})"d="M17.2333333,9.74333333 L5.70666667,9.74333333 C5.70850536,12.6144521 8.03554792,14.9414946 10.9066667,14.9433333 L13.03,14.9433333 L13.03,17 C13.0336786,19.8711178 15.3622132,22.196669 18.2333333,22.1966667 L18.2333333,10.7433333 C18.2333333,10.1910486 17.7856181,9.74333333 17.2333333,9.74333333 Z" ></path>
-      <path fill="url(#${id})" d="M11.5266667,15.4833333 L0,15.4833333 C3.51929402e-16,18.357055 2.32961169,20.6866667 5.20333333,20.6866667 L7.33333333,20.6866667 L7.33333333,22.7366667 C7.33516565,25.6051863 9.65815176,27.9311544 12.5266667,27.9366667 L12.5266667,16.4833333 C12.5266667,15.9310486 12.0789514,15.4833333 11.5266667,15.4833333 Z" ></path>
-      <path fill="${colors.textColor}" d="M37.07,18.956 C37.07,20.646 36.394,21.842 34.418,21.842 C33.56,21.842 32.702,21.686 32,21.4 L32,23.662 C32.65,23.896 33.586,24.104 34.808,24.104 C38.032,24.104 39.41,21.946 39.41,18.8 L39.41,6.918 L37.07,6.918 L37.07,18.956 Z M42.894,7.568 C42.894,8.556 43.544,9.128 44.454,9.128 C45.364,9.128 46.014,8.556 46.014,7.568 C46.014,6.58 45.364,6.008 44.454,6.008 C43.544,6.008 42.894,6.58 42.894,7.568 Z M43.31,24 L45.546,24 L45.546,11 L43.31,11 L43.31,24 Z M48.926,24 L51.11,24 L51.11,16.33 C51.11,13.574 52.852,12.716 55.712,13.002 L55.712,10.818 C53.164,10.662 51.864,11.754 51.11,13.288 L51.11,11 L48.926,11 L48.926,24 Z M66.45,24 L66.45,21.66 C65.618,23.376 64.058,24.26 62.056,24.26 C58.598,24.26 56.856,21.322 56.856,17.5 C56.856,13.834 58.676,10.74 62.316,10.74 C64.214,10.74 65.67,11.598 66.45,13.288 L66.45,11 L68.686,11 L68.686,24 L66.45,24 Z M59.092,17.5 C59.092,20.62 60.34,22.18 62.654,22.18 C64.656,22.18 66.45,20.906 66.45,18.02 L66.45,16.98 C66.45,14.094 64.812,12.82 62.914,12.82 C60.392,12.82 59.092,14.484 59.092,17.5 Z" fill-rule="evenodd"></path>
-    </g>
-  </svg>`;
 };
 
 /**
@@ -62,6 +73,9 @@ export const JiraLogo = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -75,7 +89,7 @@ export const JiraLogo = ({
       iconGradientStop,
       iconColor,
       textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

package/dist/es2019/jira-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 37 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">

package/dist/es2019/jira-product-discovery-logo/icon.js

@@ -1,58 +1,69 @@
 /* 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="M17.655 5.884a15.3 15.3 0 0 0 8.75 0c.257-.056.428.114.37.37-.826 2.985-.826 5.742 0 8.727.058.228-.113.427-.37.342a16.33 16.33 0 0 0-8.75 0c-.228.085-.428-.114-.342-.342.77-2.985.77-5.742 0-8.727-.086-.256.114-.426.342-.37m1.169 10.576v.483c0 2.246-1.568 3.894-3.506 3.894a3.474 3.474 0 0 1-3.477-3.496c0-1.933 1.567-3.468 3.762-3.468h.57V7.078c-.285-.028-.57-.028-.855-.028C9.618 7.05 5 11.655 5 17.37c0 5.713 4.617 10.29 10.318 10.29s10.346-4.605 10.346-10.29v-.91z"/>
+    </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);
+    }
+    return `
+    <svg
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.9987 15.6133C18.9987 15.6133 19.018 15.9933 19.018 16.518C19.018 18.4727 17.4333 20.0573 15.4787 20.0573C13.524 20.0573 11.9393 18.4727 11.9393 16.518C11.9393 14.5633 13.524 12.9787 15.4787 12.9787C16.0033 12.9787 16.3253 12.998 16.3253 12.998V6.08067C16.046 6.05801 15.764 6.04401 15.4787 6.04401C9.692 6.04401 5.00067 10.7353 5.00067 16.522C5.00067 22.3087 9.692 27 15.4787 27C21.2653 27 25.9567 22.3087 25.9567 16.522C25.9567 16.1887 25.9507 15.9573 25.9233 15.614H18.9987V15.6133Z"
+      fill="url(#${id})"
+    />
+    <path
+      d="M17.9233 5.01001C20.8313 5.79601 23.7393 5.79601 26.6473 5.01001C26.8573 4.95334 27.046 5.14201 26.9893 5.35201C26.2033 8.26001 26.2033 11.168 26.9893 14.076C27.046 14.286 26.8573 14.4747 26.6473 14.418C23.7393 13.632 20.8313 13.632 17.9233 14.418C17.7133 14.4747 17.5247 14.286 17.5813 14.076C18.3673 11.168 18.3673 8.26001 17.5813 5.35201C17.5247 5.14201 17.7133 4.95334 17.9233 5.01001Z"
+      fill="${colors.iconColor}"
+    />
+    <defs>
+      <linearGradient
+        id="${id}"
+        x1="14.178"
+        y1="17.822"
+        x2="21.4387"
+        y2="10.5613"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="${colors.iconGradientStop}" />
+        <stop offset="0.927" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
+      </linearGradient>
+    </defs>
+  </svg>`;
   }
-  return `
-  <svg
-  height="32"
-  viewBox="0 0 32 32"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M18.9987 15.6133C18.9987 15.6133 19.018 15.9933 19.018 16.518C19.018 18.4727 17.4333 20.0573 15.4787 20.0573C13.524 20.0573 11.9393 18.4727 11.9393 16.518C11.9393 14.5633 13.524 12.9787 15.4787 12.9787C16.0033 12.9787 16.3253 12.998 16.3253 12.998V6.08067C16.046 6.05801 15.764 6.04401 15.4787 6.04401C9.692 6.04401 5.00067 10.7353 5.00067 16.522C5.00067 22.3087 9.692 27 15.4787 27C21.2653 27 25.9567 22.3087 25.9567 16.522C25.9567 16.1887 25.9507 15.9573 25.9233 15.614H18.9987V15.6133Z"
-    fill="url(#${id})"
-  />
-  <path
-    d="M17.9233 5.01001C20.8313 5.79601 23.7393 5.79601 26.6473 5.01001C26.8573 4.95334 27.046 5.14201 26.9893 5.35201C26.2033 8.26001 26.2033 11.168 26.9893 14.076C27.046 14.286 26.8573 14.4747 26.6473 14.418C23.7393 13.632 20.8313 13.632 17.9233 14.418C17.7133 14.4747 17.5247 14.286 17.5813 14.076C18.3673 11.168 18.3673 8.26001 17.5813 5.35201C17.5247 5.14201 17.7133 4.95334 17.9233 5.01001Z"
-    fill="${colors.iconColor}"
-  />
-  <defs>
-    <linearGradient
-      id="${id}"
-      x1="14.178"
-      y1="17.822"
-      x2="21.4387"
-      y2="10.5613"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="${colors.iconGradientStop}" />
-      <stop offset="0.927" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
-    </linearGradient>
-  </defs>
-</svg>`;
 };
 
 /**
@@ -74,6 +85,9 @@ export const JiraProductDiscoveryIcon = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -82,7 +96,7 @@ export const JiraProductDiscoveryIcon = ({
       iconGradientStart,
       iconGradientStop,
       iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/es2019/jira-product-discovery-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,23 +12,32 @@ 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);
-  }
-  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 318 32" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <path fill="${colors.iconColor}" d="M12.655 5.218a15.3 15.3 0 0 0 8.75 0c.257-.057.428.114.37.37-.826 2.984-.826 5.742 0 8.727.058.227-.113.426-.37.341a16.33 16.33 0 0 0-8.75 0c-.228.085-.428-.114-.342-.341.77-2.985.77-5.743 0-8.727-.086-.256.114-.427.342-.37m1.169 10.575v.483c0 2.246-1.568 3.895-3.506 3.895a3.474 3.474 0 0 1-3.478-3.497c0-1.933 1.568-3.468 3.763-3.468h.57V6.412c-.285-.028-.57-.028-.855-.028C4.618 6.384 0 10.989 0 16.703s4.617 10.29 10.318 10.29 10.346-4.605 10.346-10.29v-.91z" />
+      <path fill="${colors.textColor}" d="M308.551 24.559h-1.718l-5.55-14.352h2.821l4.907 13.125 4.906-13.125h2.822l-5.796 14.843c-1.718 4.385-2.699 6.654-6.594 6.654-1.318 0-2.054-.122-2.821-.429v-2.27c.889.277 1.901.369 2.668.369 2.147 0 3.097-1.472 4.355-4.815m-13.247-8.065v9.047h-2.576V10.207h2.576v2.699c.889-1.81 2.422-3.097 5.428-2.913v2.576c-3.374-.338-5.428.674-5.428 3.925m-12.464-4.202c-2.79 0-4.201 1.81-4.477 4.478h8.556c-.153-2.852-1.441-4.478-4.079-4.478m5.888 12.635c-1.257.675-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.63 2.576-7.943 7.237-7.943 4.723 0 6.624 3.282 6.624 7.943v1.196h-11.193c.368 2.607 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-19.717.613h-3.527l-5.949-15.333h2.76l4.968 13.095 4.937-13.095h2.76zm-17.462.307c-4.6 0-7.299-3.404-7.299-8.004s2.699-7.943 7.299-7.943c4.569 0 7.237 3.343 7.237 7.943s-2.668 8.004-7.237 8.004m0-13.493c-3.281 0-4.723 2.576-4.723 5.49 0 2.912 1.442 5.55 4.723 5.55 3.251 0 4.661-2.638 4.661-5.55 0-2.914-1.41-5.49-4.661-5.49M242.16 22.78v2.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.943 8.004-7.943 1.38 0 2.454.184 3.65.736v2.454c-.982-.46-2.024-.736-3.466-.736-3.986 0-5.612 2.514-5.612 5.49 0 2.974 1.656 5.488 5.674 5.488 1.564 0 2.545-.214 3.496-.552m-13.872-1.41c0 2.545-1.656 4.477-5.765 4.477-2.3 0-4.171-.521-5.336-1.135v-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-.889-1.84-3.802-2.545-3.404-.828-4.846-2.147-4.846-4.661 0-2.668 2.055-4.294 5.551-4.294 1.993 0 3.803.491 4.937 1.104v2.73c-1.84-.92-3.342-1.41-4.968-1.41-1.932 0-2.974.674-2.974 1.87 0 1.073.736 1.748 3.557 2.422 3.404.828 5.121 2.086 5.121 4.754M210.599 6.16c0-1.166.767-1.84 1.84-1.84s1.84.674 1.84 1.84-.767 1.84-1.84 1.84-1.84-.675-1.84-1.84m.491 19.38V10.208h2.637v15.334zM198.344 8.03h-4.539v14.873h4.692c4.6 0 6.9-2.422 6.9-7.298 0-4.907-2.177-7.575-7.053-7.575m-7.299 17.51V5.394h7.422c6.532 0 9.69 4.078 9.69 10.12 0 6.102-3.189 10.028-9.69 10.028zm-13.411-4.753c0 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-6.66 1.993v2.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.943 8.004-7.943 1.38 0 2.454.184 3.65.736v2.454c-.982-.46-2.024-.736-3.466-.736-3.986 0-5.612 2.514-5.612 5.49 0 2.974 1.656 5.488 5.674 5.488 1.564 0 2.545-.214 3.496-.552m-27.843-3.588v-8.985h2.637v9.261c0 2.76 1.104 3.987 3.619 3.987 2.453 0 4.14-1.625 4.14-4.723v-8.525h2.637V25.54h-2.637v-2.514c-.982 1.809-2.791 2.821-4.846 2.821-3.526 0-5.55-2.423-5.55-6.655m-14.987-1.318c0 3.68 1.472 5.52 4.202 5.52 2.361 0 4.477-1.503 4.477-4.907V17.26c0-3.404-1.932-4.906-4.171-4.906-2.974 0-4.508 1.962-4.508 5.52m8.679 7.667v-2.76c-.981 2.023-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.005V3.798h2.637V25.54zm-20.698.306c-4.6 0-7.299-3.404-7.299-8.004s2.699-7.943 7.299-7.943c4.569 0 7.237 3.343 7.237 7.943s-2.668 8.004-7.237 8.004m0-13.493c-3.282 0-4.723 2.576-4.723 5.49 0 2.912 1.441 5.55 4.723 5.55 3.25 0 4.661-2.638 4.661-5.55 0-2.914-1.411-5.49-4.661-5.49m-13.776 4.14v9.047h-2.576V10.207h2.576v2.699c.89-1.81 2.423-3.097 5.428-2.913v2.576c-3.373-.338-5.428.674-5.428 3.925m-5.002-4.385c0 4.385-2.454 6.838-7.483 6.838h-4.017v6.594h-2.76V5.393h6.777c5.03 0 7.483 2.576 7.483 6.716m-7.79 4.2c3.558.124 4.938-1.563 4.938-4.14 0-2.452-1.38-4.14-4.938-4.14h-3.71v8.28zM61.69 17.874c0 3.68 1.472 5.52 4.201 5.52 2.361 0 4.477-1.503 4.477-4.907V17.26c0-3.404-1.931-4.906-4.17-4.906-2.975 0-4.508 1.962-4.508 5.52m8.679 7.666v-2.76c-.982 2.024-2.822 3.067-5.183 3.067-4.079 0-6.134-3.465-6.134-7.973 0-4.324 2.147-7.974 6.44-7.974 2.24 0 3.957 1.012 4.877 3.006v-2.699h2.637V25.54zm-17.793-9.046v9.047H50V10.207h2.576v2.699c.89-1.81 2.423-3.097 5.428-2.913v2.576c-3.373-.338-5.428.674-5.428 3.925M42.89 6.16c0-1.166.767-1.84 1.84-1.84s1.84.674 1.84 1.84S45.805 8 44.73 8s-1.84-.675-1.84-1.84m.491 19.38V10.208h2.638v15.334zm-6.428-5.949V5.393h2.76v14.014c0 3.71-1.625 6.256-5.428 6.256-1.441 0-2.545-.245-3.312-.521v-2.668c.828.337 1.84.521 2.852.521 2.331 0 3.128-1.41 3.128-3.404" />
+    </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);
+    }
+    return `
   <svg
     height="32"
     viewBox="0 0 264 32"
@@ -61,6 +72,7 @@ const svg = ({
       </linearGradient>
     </defs>
   </svg>`;
+  }
 };
 
 /**
@@ -82,6 +94,9 @@ export const JiraProductDiscoveryLogo = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -95,7 +110,7 @@ export const JiraProductDiscoveryLogo = ({
       iconGradientStop,
       iconColor,
       textColor
-    }),
+    }, colorMode),
     testId: testId,
     textColor: textColor
   });

package/dist/es2019/jira-service-management-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="M18.79 13.257h7.325c1.1 0 1.476 1.046.805 1.878L15.464 29.274c-3.702-2.951-3.353-7.62-.644-11.027zm-5.66 5.634H5.806c-1.1 0-1.476-1.046-.805-1.878L16.457 2.874c3.702 2.951 3.3 7.566.617 11z"/>
+    </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);
+    }
+    return `
   <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="40.063%" x2="69.955%" y1="0%" y2="50%" id="${id}">
@@ -37,6 +47,7 @@ const svg = ({
       <path fill="${colors.iconColor}" d="M14.0396053,19.0156579 L6.22105263,18.9660526 C5.75779361,18.9638923 5.33539149,18.700557 5.12950634,18.2855571 C4.92362119,17.8705572 4.96948557,17.3749106 5.24802632,17.0047368 L16.7411842,1.65 C18.4937397,2.9588453 19.6544561,4.91039056 19.9679021,7.0751719 C20.2813481,9.23995324 19.7218382,11.4405759 18.4125,13.1927632 L14.0396053,19.0156579 Z"></path>
     </g>
   </svg>`;
+  }
 };
 
 /**
@@ -58,6 +69,9 @@ export const JiraServiceManagementIcon = ({
   iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
+  const {
+    colorMode
+  } = useThemeObserver();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
@@ -66,7 +80,7 @@ export const JiraServiceManagementIcon = ({
       iconGradientStart,
       iconGradientStop,
       iconColor
-    }),
+    }, colorMode),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,