@atlaskit/logo 13.7.0 → 13.8.1

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

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

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

@@ -5,12 +5,18 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop
+}) => {
+  // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="32" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="50%" x2="50%" y1="109.344%" y2="50%" id="${id}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
@@ -28,12 +34,12 @@ const svg = (iconGradientStart, iconGradientStop) => {
 
 
 export const HipchatIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
   label = 'Hipchat',
   size = defaultLogoParams.size,
   testId,
+  iconColor = defaultLogoParams.iconColor,
+  iconGradientStart = defaultLogoParams.iconGradientStart,
+  iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -42,7 +48,10 @@ export const HipchatIcon = ({
 
   return /*#__PURE__*/React.createElement(Wrapper, {
     label: label,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -5,12 +5,18 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop
+}) => {
+  // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="118" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 118 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 118 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="49.9923722%" y1="107.31548%" x2="49.9923722%" y2="38.7491835%" id="${id}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
@@ -47,7 +53,10 @@ export const HipchatLogo = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -3,8 +3,9 @@ import React from 'react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
-const svg = `<canvas height="32" width="86" aria-hidden="true"></canvas>
-<svg viewBox="0 0 86 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+const svg = () => `
+<svg viewBox="0 0 86 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
   <g stroke="none" stroke-width="1" fill-rule="evenodd" fill="inherit">
     <path d="M-6.88338275e-14,6.918 L-6.88338275e-14,24 L2.34,24 L2.34,16.616 L11.336,16.616 L11.336,24 L13.676,24 L13.676,6.918 L11.336,6.918 L11.336,14.38 L2.34,14.38 L2.34,6.918 L-6.88338275e-14,6.918 Z M17.524,7.568 C17.524,8.556 18.174,9.128 19.084,9.128 C19.994,9.128 20.644,8.556 20.644,7.568 C20.644,6.58 19.994,6.008 19.084,6.008 C18.174,6.008 17.524,6.58 17.524,7.568 Z M17.94,24 L20.176,24 L20.176,11 L17.94,11 L17.94,24 Z M29.926,24.26 C28.028,24.26 26.572,23.402 25.792,21.712 L25.792,29.07 L23.556,29.07 L23.556,11 L25.792,11 L25.792,13.34 C26.624,11.624 28.184,10.74 30.186,10.74 C33.644,10.74 35.386,13.678 35.386,17.5 C35.386,21.166 33.566,24.26 29.926,24.26 Z M33.15,17.5 C33.15,14.38 31.902,12.82 29.588,12.82 C27.586,12.82 25.792,14.094 25.792,16.98 L25.792,18.02 C25.792,20.906 27.43,22.18 29.328,22.18 C31.85,22.18 33.15,20.516 33.15,17.5 Z M47.164,21.66 C46.358,21.946 45.526,22.128 44.2,22.128 C40.794,22.128 39.39,19.996 39.39,17.474 C39.39,14.952 40.768,12.82 44.148,12.82 C45.37,12.82 46.254,13.054 47.086,13.444 L47.086,11.364 C46.072,10.896 45.162,10.74 43.992,10.74 C39.364,10.74 37.206,13.548 37.206,17.474 C37.206,21.452 39.364,24.26 43.992,24.26 C45.188,24.26 46.384,24.078 47.164,23.662 L47.164,21.66 Z M60.762,16.382 C60.762,12.716 59.15,10.74 56.238,10.74 C54.366,10.74 52.806,11.624 51.948,13.158 L51.948,5.566 L49.712,5.566 L49.712,24 L51.948,24 L51.948,16.772 C51.948,14.146 53.378,12.768 55.458,12.768 C57.59,12.768 58.526,14.094 58.526,16.772 L58.526,24 L60.762,24 L60.762,16.382 Z M72.722,24 L72.722,21.66 C71.89,23.376 70.33,24.26 68.328,24.26 C64.87,24.26 63.128,21.322 63.128,17.5 C63.128,13.834 64.948,10.74 68.588,10.74 C70.486,10.74 71.942,11.598 72.722,13.288 L72.722,11 L74.958,11 L74.958,24 L72.722,24 Z M65.364,17.5 C65.364,20.62 66.612,22.18 68.926,22.18 C70.928,22.18 72.722,20.906 72.722,18.02 L72.722,16.98 C72.722,14.094 71.084,12.82 69.186,12.82 C66.664,12.82 65.364,14.484 65.364,17.5 Z M81.432,19.892 L81.432,13.08 L84.89,13.08 L84.89,11 L81.432,11 L81.432,8.244 L79.248,8.244 L79.248,11 L77.142,11 L77.142,13.08 L79.248,13.08 L79.248,19.944 C79.248,22.362 80.6,24 83.382,24 C84.058,24 84.5,23.896 84.89,23.792 L84.89,21.634 C84.5,21.712 84.006,21.816 83.486,21.816 C82.108,21.816 81.432,21.036 81.432,19.892 Z"></path>
   </g>
@@ -13,6 +14,7 @@ const svg = `<canvas height="32" width="86" aria-hidden="true"></canvas>
  * @deprecated HipchatWordmark will be removed from @atlaskit/logo in the next major release.
  */
 
+
 export const HipchatWordmark = ({
   iconColor = defaultLogoParams.iconColor,
   iconGradientStart = defaultLogoParams.iconGradientStart,
@@ -32,7 +34,7 @@ export const HipchatWordmark = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg(),
     testId: testId,
     textColor: textColor
   });

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

@@ -5,12 +5,19 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop,
+  size
+}) => {
+  // 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 `<canvas height="32" width="32" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="26.51%" y1="20.831%" y2="63.912%" id="${id}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="17%"></stop>
@@ -43,7 +50,10 @@ export const JiraCoreIcon = ({
 
   return /*#__PURE__*/React.createElement(Wrapper, {
     label: label,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -5,12 +5,18 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop
+}) => {
+  // Will be fixed upon removal of deprecated iconGradientStart and
+  // iconGradientStop props, or with React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="123" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 123 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 123 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="17.1933086%" y1="20.0326493%" x2="88.2434944%" y2="53.9179104%" id="${id}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="17%"></stop>
@@ -48,7 +54,10 @@ export const JiraCoreLogo = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/es2019/jira-core-logo/wordmark.js

@@ -3,8 +3,8 @@ import React from 'react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
-const svg = `<canvas height="32" width="95" aria-hidden="true"></canvas>
-<svg viewBox="0 0 95 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+const svg = () => `<svg viewBox="0 0 95 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
   <g stroke="none" stroke-width="1" fill-rule="evenodd" fill="inherit">
     <path d="M5.07,18.956 C5.07,20.646 4.394,21.842 2.418,21.842 C1.56,21.842 0.702,21.686 9.1038288e-15,21.4 L9.1038288e-15,23.662 C0.65,23.896 1.586,24.104 2.808,24.104 C6.032,24.104 7.41,21.946 7.41,18.8 L7.41,6.918 L5.07,6.918 L5.07,18.956 Z M10.894,7.568 C10.894,8.556 11.544,9.128 12.454,9.128 C13.364,9.128 14.014,8.556 14.014,7.568 C14.014,6.58 13.364,6.008 12.454,6.008 C11.544,6.008 10.894,6.58 10.894,7.568 Z M11.31,24 L13.546,24 L13.546,11 L11.31,11 L11.31,24 Z M16.926,24 L19.11,24 L19.11,16.33 C19.11,13.574 20.852,12.716 23.712,13.002 L23.712,10.818 C21.164,10.662 19.864,11.754 19.11,13.288 L19.11,11 L16.926,11 L16.926,24 Z M34.45,24 L34.45,21.66 C33.618,23.376 32.058,24.26 30.056,24.26 C26.598,24.26 24.856,21.322 24.856,17.5 C24.856,13.834 26.676,10.74 30.316,10.74 C32.214,10.74 33.67,11.598 34.45,13.288 L34.45,11 L36.686,11 L36.686,24 L34.45,24 Z M27.092,17.5 C27.092,20.62 28.34,22.18 30.654,22.18 C32.656,22.18 34.45,20.906 34.45,18.02 L34.45,16.98 C34.45,14.094 32.812,12.82 30.914,12.82 C28.392,12.82 27.092,14.484 27.092,17.5 Z M57.018,20.984 C55.77,21.608 54.366,22.024 52.572,22.024 C48.516,22.024 46.046,19.424 46.046,15.498 C46.046,11.572 48.438,8.92 52.442,8.92 C54.418,8.92 55.77,9.336 56.992,10.116 L56.992,7.854 C55.77,6.97 54.106,6.658 52.442,6.658 C46.878,6.658 43.706,10.298 43.706,15.498 C43.706,20.88 46.878,24.26 52.494,24.26 C54.262,24.26 55.952,23.948 57.018,23.246 L57.018,20.984 Z M65.624,24.26 C61.724,24.26 59.436,21.374 59.436,17.474 C59.436,13.574 61.724,10.74 65.624,10.74 C69.498,10.74 71.76,13.574 71.76,17.474 C71.76,21.374 69.498,24.26 65.624,24.26 Z M65.624,12.82 C62.842,12.82 61.62,15.004 61.62,17.474 C61.62,19.944 62.842,22.18 65.624,22.18 C68.38,22.18 69.576,19.944 69.576,17.474 C69.576,15.004 68.38,12.82 65.624,12.82 Z M74.36,24 L76.544,24 L76.544,16.33 C76.544,13.574 78.286,12.716 81.146,13.002 L81.146,10.818 C78.598,10.662 77.298,11.754 76.544,13.288 L76.544,11 L74.36,11 L74.36,24 Z M93.314,23.48 C92.248,24.052 90.61,24.26 89.284,24.26 C84.422,24.26 82.29,21.452 82.29,17.474 C82.29,13.548 84.474,10.74 88.426,10.74 C92.43,10.74 94.042,13.522 94.042,17.474 L94.042,18.488 L84.552,18.488 C84.864,20.698 86.294,22.128 89.362,22.128 C90.87,22.128 92.144,21.842 93.314,21.426 L93.314,23.48 Z M88.322,12.768 C85.956,12.768 84.76,14.302 84.526,16.564 L91.78,16.564 C91.65,14.146 90.558,12.768 88.322,12.768 Z"></path>
   </g>
@@ -13,6 +13,7 @@ const svg = `<canvas height="32" width="95" aria-hidden="true"></canvas>
  * @deprecated JiraCoreWordmark will be removed from @atlaskit/logo in the next major release. Please use JiraWorkManagementWordmark instead.
  */
 
+
 export const JiraCoreWordmark = ({
   iconColor = defaultLogoParams.iconColor,
   iconGradientStart = defaultLogoParams.iconGradientStart,
@@ -32,7 +33,7 @@ export const JiraCoreWordmark = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg(),
     testId: testId,
     textColor: textColor
   });

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

@@ -2,40 +2,79 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  appearance,
+  size,
+  iconGradientStart,
+  iconGradientStop,
+  iconColor
+}) => {
+  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
   });
-  return `<canvas height="32" width="32" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `jiraIcon-${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="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="100%"></stop>
+        <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 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" fill="currentColor"></path>
-      <path 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" fill="url(#${id})"></path>
-      <path 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" fill="url(#${id})"></path>
+      <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>`;
 };
+/**
+ * __Jira icon__
+ *
+ * The Jira icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
 
 export const JiraIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Jira',
   size = defaultLogoParams.size,
   testId,
-  textColor = defaultLogoParams.textColor
+  textColor = defaultLogoParams.textColor,
+  iconColor = defaultLogoParams.iconColor,
+  iconGradientStart = defaultLogoParams.iconGradientStart,
+  iconGradientStop = defaultLogoParams.iconGradientStop
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor,
+      size
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -2,45 +2,89 @@
 import React from 'react';
 import { uid } from 'react-uid';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  appearance,
+  size,
+  label,
+  iconGradientStart,
+  iconGradientStop,
+  iconColor,
+  textColor
+}) => {
+  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
   });
-  return `<canvas height="32" width="69" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 69 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `${label}Logo-${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="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="18%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="100%"></stop>
+        <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 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" fill="currentColor"></path>
-      <path 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" fill="url(#${id})"></path>
-      <path 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" fill="url(#${id})"></path>
-      <path 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" fill="inherit"></path>
+      <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>`;
 };
+/**
+ * __Jira logo__
+ *
+ * The Jira logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
 
 export const JiraLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Jira',
   size = defaultLogoParams.size,
   testId,
+  iconColor = defaultLogoParams.iconColor,
+  iconGradientStart = defaultLogoParams.iconGradientStart,
+  iconGradientStop = defaultLogoParams.iconGradientStop,
   textColor = defaultLogoParams.textColor
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
     label: label,
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor,
+      textColor,
+      size,
+      label
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -1,29 +1,54 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { defaultLogoParams } from '../constants';
+import { getColorsFromAppearance } from '../utils';
 import Wrapper from '../wrapper';
-const svg = `<canvas height="32" width="37" aria-hidden="true"></canvas>
-<svg viewBox="0 0 37 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-  <g stroke="none" stroke-width="1" fill-rule="nonzero" fill="inherit">
+
+const svg = ({
+  appearance,
+  textColor
+}) => {
+  let colors = {
+    textColor
+  };
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+  }
+
+  return `
+<svg viewBox="0 0 37 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  <g stroke="none" stroke-width="1" fill-rule="nonzero" fill="${colors.textColor}">
     <path d="M5.07,18.956 C5.07,20.646 4.394,21.842 2.418,21.842 C1.56,21.842 0.702,21.686 -5.10702591e-15,21.4 L-5.10702591e-15,23.662 C0.65,23.896 1.586,24.104 2.808,24.104 C6.032,24.104 7.41,21.946 7.41,18.8 L7.41,6.918 L5.07,6.918 L5.07,18.956 Z M10.894,7.568 C10.894,8.556 11.544,9.128 12.454,9.128 C13.364,9.128 14.014,8.556 14.014,7.568 C14.014,6.58 13.364,6.008 12.454,6.008 C11.544,6.008 10.894,6.58 10.894,7.568 Z M11.31,24 L13.546,24 L13.546,11 L11.31,11 L11.31,24 Z M16.926,24 L19.11,24 L19.11,16.33 C19.11,13.574 20.852,12.716 23.712,13.002 L23.712,10.818 C21.164,10.662 19.864,11.754 19.11,13.288 L19.11,11 L16.926,11 L16.926,24 Z M34.45,24 L34.45,21.66 C33.618,23.376 32.058,24.26 30.056,24.26 C26.598,24.26 24.856,21.322 24.856,17.5 C24.856,13.834 26.676,10.74 30.316,10.74 C32.214,10.74 33.67,11.598 34.45,13.288 L34.45,11 L36.686,11 L36.686,24 L34.45,24 Z M27.092,17.5 C27.092,20.62 28.34,22.18 30.654,22.18 C32.656,22.18 34.45,20.906 34.45,18.02 L34.45,16.98 C34.45,14.094 32.812,12.82 30.914,12.82 C28.392,12.82 27.092,14.484 27.092,17.5 Z"></path>
   </g>
 </svg>`;
+};
+/**
+ * __Jira wordmark__
+ *
+ * The Jira brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+
+
 export const JiraWordmark = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Jira',
   size = defaultLogoParams.size,
   testId,
   textColor = defaultLogoParams.textColor
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
+    appearance: appearance,
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance,
+      textColor
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -5,12 +5,19 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop,
+  size
+}) => {
+  // 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 `<canvas height="32" width="32" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  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}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
@@ -43,7 +50,11 @@ export const JiraServiceDeskIcon = ({
 
   return /*#__PURE__*/React.createElement(Wrapper, {
     label: label,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop,
+      size
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/es2019/jira-service-desk-logo/logo.js

@@ -5,12 +5,19 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { defaultLogoParams } from '../constants';
 import Wrapper from '../wrapper';
 
-const svg = (iconGradientStart, iconGradientStop) => {
-  const id = uid({
+const svg = ({
+  iconGradientStart,
+  iconGradientStop,
+  size
+}) => {
+  // 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 `<canvas height="32" width="211" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 211 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 211 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient x1="38.0412357%" y1="6.63683429%" x2="59.8560262%" y2="63.7778713%" id="${id}">
         <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
@@ -48,7 +55,10 @@ export const JiraServiceDeskLogo = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop
+    }),
     testId: testId,
     textColor: textColor
   });