@atlaskit/logo 13.7.0 → 13.8.1

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

@@ -1,48 +1,69 @@
+/* eslint-disable max-len */
 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,
+  iconGradientStart,
+  iconGradientStop,
+  iconColor,
+  textColor
+}) => {
+  let colors = {
+    iconGradientStart,
+    iconGradientStop,
+    iconColor,
+    textColor,
+    // 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
   });
-  return `<canvas height="32" width="270" aria-hidden="true"></canvas>
-<svg
-  fill="none"
-  viewBox="0 0 270 32"
-  xmlns="http://www.w3.org/2000/svg"
-  focusable="false"
-  aria-hidden="true"
->
-  <linearGradient
-    id="${id}"
-    gradientUnits="userSpaceOnUse"
-    x1="9.85184"
-    x2="3.72154"
-    y1="13.0072"
-    y2="23.6252"
-  >
-    <stop offset="0" stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
-    <stop offset="92%" stop-color="${iconGradientStop}" />
-  </linearGradient>
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `atlassianLogo-${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>
+  <defs>
+    <linearGradient
+      id="${id}"
+      gradientUnits="userSpaceOnUse"
+      x1="9.85184"
+      x2="3.72154"
+      y1="13.0072"
+      y2="23.6252"
+    >
+      <stop offset="0" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
+      <stop offset="92%" stop-color="${colors.iconGradientStop}" />
+    </linearGradient>
+  </defs>
   <g>
     <path
       d="m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z"
       fill="url(#${id})"
     />
     <path
-      fill="currentColor"
+      fill="${colors.iconColor}"
       d="m10.9326.649949c-1.44794 2.227461-2.29174 4.793151-2.4486 7.445211-.15685 2.65204.37864 5.29934 1.5539 7.68194l3.8972 7.798c.0579.1154.1469.2124.2569.28.11.0677.2367.1033.3658.1029h8.0878c.1182.0004.2346-.0295.3379-.0868.1033-.0574.1902-.1403.2523-.2409.0621-.1005.0974-.2153.1025-.3334.0051-.118-.0203-.2355-.0735-.3409l-11.1513-22.309629c-.0537-.111145-.1377-.204841-.2424-.270285-.1047-.065443-.2257-.099968-.3492-.099594-.1234.000374-.2442.035633-.3485.101709-.1043.066077-.1878.16028-.2408.271748z"
     />
-    <g fill="${iconGradientStart}">
+    <g fill="${colors.atlassianLogoTextColor}">
       <path
         clip-rule="evenodd"
         d="m139.715 18.207c0-3.4105-1.807-5.0102-6.906-6.1088-2.82-.6227-3.5-1.2454-3.5-2.14723 0-1.12729 1.009-1.60326 2.863-1.60326 2.251 0 4.477.68353 6.581 1.63189v-4.46263c-2.021-.92008-4.222-1.37618-6.442-1.33486-5.042 0-7.651 2.19374-7.651 5.78317 0 2.86292 1.335 5.15692 6.553 6.16612 3.113.6513 3.768 1.1559 3.768 2.1937s-.655 1.6605-2.863 1.6605c-2.651-.0477-5.249-.751-7.562-2.047v4.6881c1.575.7694 3.65 1.6283 7.515 1.6283 5.454 0 7.619-2.4299 7.619-6.048zm-25.788-6.1088c5.1 1.0987 6.911 2.6983 6.911 6.1088 0 3.6181-2.165 6.048-7.623 6.048-3.868 0-5.944-.8589-7.515-1.6283v-4.6881c2.309 1.2953 4.904 1.9986 7.551 2.047 2.212 0 2.863-.6227 2.863-1.6605s-.651-1.5424-3.765-2.1937c-5.213-1.0083-6.55-3.299-6.552-6.15828l-.015-.00783c0-3.58943 2.609-5.78317 7.652-5.78317 2.219-.04048 4.42.41558 6.441 1.33485v4.46263c-2.108-.94835-4.33-1.63188-6.585-1.63188-1.853 0-2.863.47597-2.863 1.60326 0 .90182.684 1.52452 3.5 2.14722zm61.966-7.61904v19.47884h4.151v-14.85517l1.75 3.94377 5.869 10.9114h5.221v-19.47884h-4.155v12.57194l-1.571-3.6467-4.713-8.92524zm-30.942 0h4.538v19.48244h-4.538zm-74.3973 19.47884v-19.47884h4.5664v15.27024h6.227l-1.4709 4.2086zm-18.4231-19.47884v4.20854h5.0388v15.2703h4.5664v-15.2703h5.3967v-4.20854zm-12.6077-.00716h5.9836l6.7888 19.4788h-5.1927l-.9627-3.2781c-2.3714.6969-4.8933.6969-7.2647 0l-.9627 3.2781h-5.1891zm.4867 12.3286c.8135.239 1.6572.3595 2.5051.3579v.0071c.8482-.001 1.6919-.124 2.5051-.365l-2.5051-8.50298zm55.9457-12.3286h-6.0015l-6.7995 19.4788h5.1891l.9627-3.2781c2.3725.6976 4.8957.6976 7.2683 0l.9627 3.2781h5.1889zm-2.9954 12.6936c-.8479.0017-1.6916-.1189-2.5051-.3578l2.5051-8.50302 2.5051 8.50302c-.8135.2388-1.6572.3594-2.5051.3578zm66.8931-12.6936h5.969l6.8 19.4788h-5.19l-.962-3.2781c-2.372.6969-4.894.6969-7.265 0l-.963 3.2781h-5.189zm.472 12.3286c.814.2384 1.657.3589 2.505.3579l.015.0071c.843-.0026 1.682-.1255 2.49-.365l-2.505-8.50298z"
         fill-rule="evenodd"
       />
     </g>
-    <g fill="inherit">
+    <g fill="${colors.textColor}">
       <path
         clip-rule="evenodd"
         d="m210.985 24.2765c-4.047 0-5.926-.7981-7.551-1.6247v-2.931c1.943 1.0199 4.939 1.75 7.709 1.75 3.152 0 4.333-1.2418 4.333-3.0884s-1.148-2.8164-5.131-3.7899c-4.714-1.1487-6.8-2.7734-6.8-6.21257 0-3.24945 2.487-5.67223 7.361-5.67223 3.024 0 4.968.71574 6.403 1.52811v2.86295c-1.997-1.10283-4.251-1.65375-6.531-1.5961-2.738 0-4.363.95909-4.363 2.86296 0 1.71778 1.339 2.58028 5.032 3.50358 4.427 1.1129 6.914 2.548 6.914 6.3056-.018 3.6467-2.183 6.1017-7.376 6.1017zm17.042-2.8987c.579-.0169 1.154-.0924 1.718-.2255v2.6447c-.6.1729-1.222.2585-1.847.254-3.407 0-5.064-2.004-5.064-4.9672v-8.5065h-2.58v-2.54807h2.58v-3.37829h2.674v3.37829h4.237v2.54807h-4.237v8.4421c0 1.4028.83 2.3584 2.519 2.3584zm10.017 2.8987c2.437 0 4.348-1.0844 5.368-3.1851l.014 2.8666h2.741v-15.92879h-2.741v2.80209c-.955-2.07203-2.738-3.12059-5.064-3.12059-4.462 0-6.692 3.78979-6.692 8.28109 0 4.6845 2.137 8.2847 6.374 8.2847zm5.368-7.6477c0 3.5358-2.197 5.0997-4.652 5.0997-2.835 0-4.363-1.9146-4.363-5.7438 0-3.6861 1.593-5.726 4.685-5.726 2.322 0 4.33 1.5604 4.33 5.0961zm9.555 7.3292h-2.688v-15.92878h2.674v2.80208c.926-1.87878 2.505-3.22079 5.64-3.02754v2.67684c-3.504-.3578-5.64.7158-5.64 4.0797zm16.025-2.8057c-.564.1328-1.141.2083-1.721.2255-1.689 0-2.516-.9556-2.516-2.3584v-8.4421h4.248v-2.54807h-4.237v-3.37829h-2.677v3.37829h-2.591v2.54807h2.58v8.5065c0 2.9632 1.657 4.9672 5.064 4.9672.626.0042 1.249-.0814 1.85-.254z"
@@ -52,23 +73,42 @@ const svg = (iconGradientStart, iconGradientStop) => {
   </g>
 </svg>`;
 };
+/**
+ * __Atlassian start logo__
+ *
+ * The Atlassian Start 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 AtlassianStartLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Atlassian Start',
   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,
+      label,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor,
+      textColor
+    }),
     testId: testId,
     textColor: textColor
   });

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

@@ -2,39 +2,76 @@
 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,
+  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 = `bitbucketIcon-${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="100%" x2="45.339%" y1="29.23%" y2="75.038%" id="${id}">
-        <stop stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="100%"></stop>
+      <linearGradient id="${id}" x1="100%" x2="45.339%" y1="29.23%" y2="75.038%">
+        <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="nonzero">
-      <path d="M4.78580435,5 C4.55423538,4.99701333 4.33319771,5.09657765 4.18198458,5.27198488 C4.03077145,5.44739211 3.96486141,5.68068714 4.00193478,5.9092887 L7.32946109,26.1096074 C7.3703589,26.355373 7.49665951,26.578828 7.68612174,26.7406224 C7.87680866,26.9055104 8.11992598,26.9972003 8.37200761,26.9992993 L14.5488998,19.5995707 L13.6827239,19.5995707 L12.3227102,12.3958093 L27.3886833,12.3958093 L28.4469072,5.91712739 C28.4862006,5.68935393 28.4229655,5.45584955 28.2741046,5.27903 C28.1252437,5.10221045 27.9059335,5.00010264 27.6747957,5 L4.78580435,5 Z" fill="currentColor"/>
+      <path fill="${colors.iconColor}" d="M4.78580435,5 C4.55423538,4.99701333 4.33319771,5.09657765 4.18198458,5.27198488 C4.03077145,5.44739211 3.96486141,5.68068714 4.00193478,5.9092887 L7.32946109,26.1096074 C7.3703589,26.355373 7.49665951,26.578828 7.68612174,26.7406224 C7.87680866,26.9055104 8.11992598,26.9972003 8.37200761,26.9992993 L14.5488998,19.5995707 L13.6827239,19.5995707 L12.3227102,12.3958093 L27.3886833,12.3958093 L28.4469072,5.91712739 C28.4862006,5.68935393 28.4229655,5.45584955 28.2741046,5.27903 C28.1252437,5.10221045 27.9059335,5.00010264 27.6747957,5 L4.78580435,5 Z" />
       <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>`;
 };
+/**
+ * __Bitbucket icon__
+ *
+ * The Bitbucket 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 BitbucketIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Bitbucket',
   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,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -2,44 +2,84 @@
 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,
+  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="137" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 137 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(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="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} offset="0%"></stop>
-        <stop stop-color="${iconGradientStop}" offset="100%"></stop>
+        <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 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" fill="currentColor" fill-rule="nonzero"></path>
-      <path 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" fill="inherit"></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>`;
 };
+/**
+ * __Bitbucket logo__
+ *
+ * The Bitbucket 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 BitbucketLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Bitbucket',
   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
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/es2019/bitbucket-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="105" aria-hidden="true"></canvas>
-<svg viewBox="0 0 105 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-  <g stroke="none" stroke-width="1" fill-rule="evenodd" fill="inherit">
+
+const svg = ({
+  appearance,
+  textColor
+}) => {
+  let colors = {
+    textColor
+  };
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+  }
+
+  return `
+<svg viewBox="0 0 105 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="${colors.textColor}">
     <path d="M4.48530102e-14,6.918 L6.63,6.918 C10.114,6.918 11.804,8.634 11.804,11.39 C11.804,13.444 10.868,14.718 8.944,15.186 C11.466,15.602 12.714,16.98 12.714,19.398 C12.714,22.128 10.868,24 7.046,24 L4.48530102e-14,24 L4.48530102e-14,6.918 Z M6.318,9.154 L2.34,9.154 L2.34,14.25 L6.318,14.25 C8.528,14.25 9.438,13.236 9.438,11.598 C9.438,9.934 8.45,9.154 6.318,9.154 Z M7.072,16.33 L2.34,16.33 L2.34,21.66 L7.124,21.66 C9.36,21.66 10.374,20.854 10.374,19.138 C10.374,17.318 9.412,16.33 7.072,16.33 Z M15.236,7.568 C15.236,8.556 15.886,9.128 16.796,9.128 C17.706,9.128 18.356,8.556 18.356,7.568 C18.356,6.58 17.706,6.008 16.796,6.008 C15.886,6.008 15.236,6.58 15.236,7.568 Z M15.652,24 L17.888,24 L17.888,11 L15.652,11 L15.652,24 Z M24.362,19.892 L24.362,13.08 L27.82,13.08 L27.82,11 L24.362,11 L24.362,8.244 L22.178,8.244 L22.178,11 L20.072,11 L20.072,13.08 L22.178,13.08 L22.178,19.944 C22.178,22.362 23.53,24 26.312,24 C26.988,24 27.43,23.896 27.82,23.792 L27.82,21.634 C27.43,21.712 26.936,21.816 26.416,21.816 C25.038,21.816 24.362,21.036 24.362,19.892 Z M42.51,17.5 C42.51,21.166 40.69,24.26 37.05,24.26 C35.152,24.26 33.696,23.402 32.916,21.712 L32.916,24 L30.68,24 L30.68,5.566 L32.916,5.566 L32.916,13.34 C33.748,11.624 35.308,10.74 37.31,10.74 C40.768,10.74 42.51,13.678 42.51,17.5 Z M40.274,17.5 C40.274,14.38 39.026,12.82 36.712,12.82 C34.71,12.82 32.916,14.094 32.916,16.98 L32.916,18.02 C32.916,20.906 34.554,22.18 36.452,22.18 C38.974,22.18 40.274,20.516 40.274,17.5 Z M44.85,18.618 C44.85,22.206 46.566,24.26 49.556,24.26 C51.298,24.26 52.832,23.402 53.664,21.868 L53.664,24 L55.9,24 L55.9,11 L53.664,11 L53.664,18.228 C53.664,20.854 52.234,22.232 50.154,22.232 C48.022,22.232 47.086,21.192 47.086,18.852 L47.086,11 L44.85,11 L44.85,18.618 Z M68.458,21.66 C67.652,21.946 66.82,22.128 65.494,22.128 C62.088,22.128 60.684,19.996 60.684,17.474 C60.684,14.952 62.062,12.82 65.442,12.82 C66.664,12.82 67.548,13.054 68.38,13.444 L68.38,11.364 C67.366,10.896 66.456,10.74 65.286,10.74 C60.658,10.74 58.5,13.548 58.5,17.474 C58.5,21.452 60.658,24.26 65.286,24.26 C66.482,24.26 67.678,24.078 68.458,23.662 L68.458,21.66 Z M73.242,24 L73.242,17.916 L78.962,24 L82.004,24 L75.634,17.396 L81.744,11 L78.832,11 L73.242,17.084 L73.242,5.566 L71.006,5.566 L71.006,24 L73.242,24 Z M94.224,23.48 C93.158,24.052 91.52,24.26 90.194,24.26 C85.332,24.26 83.2,21.452 83.2,17.474 C83.2,13.548 85.384,10.74 89.336,10.74 C93.34,10.74 94.952,13.522 94.952,17.474 L94.952,18.488 L85.462,18.488 C85.774,20.698 87.204,22.128 90.272,22.128 C91.78,22.128 93.054,21.842 94.224,21.426 L94.224,23.48 Z M89.232,12.768 C86.866,12.768 85.67,14.302 85.436,16.564 L92.69,16.564 C92.56,14.146 91.468,12.768 89.232,12.768 Z M100.698,19.892 L100.698,13.08 L104.156,13.08 L104.156,11 L100.698,11 L100.698,8.244 L98.514,8.244 L98.514,11 L96.408,11 L96.408,13.08 L98.514,13.08 L98.514,19.944 C98.514,22.362 99.866,24 102.648,24 C103.324,24 103.766,23.896 104.156,23.792 L104.156,21.634 C103.766,21.712 103.272,21.816 102.752,21.816 C101.374,21.816 100.698,21.036 100.698,19.892 Z"></path>
   </g>
 </svg>`;
+};
+/**
+ * __Bitbucket wordmark__
+ *
+ * The Bitbucket 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 BitbucketWordmark = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Bitbucket',
   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/compass-logo/icon.js

@@ -1,15 +1,37 @@
+/* eslint-disable max-len */
 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,
+  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>
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `compassIcon-${appearance}`;
+  }
+
+  return `
   <svg
   fill="none"
+  height="32"
   viewBox="0 0 32 32"
   xmlns="http://www.w3.org/2000/svg"
   focusable="false"
@@ -23,8 +45,8 @@ const svg = (iconGradientStart, iconGradientStop) => {
     y1="11.2763"
     y2="20.2556"
   >
-    <stop offset="20%" stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
-    <stop offset="100%" stop-color="${iconGradientStop}" />
+    <stop offset="20%" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
+    <stop offset="100%" stop-color="${colors.iconGradientStop}" />
   </linearGradient>
   <path
     d="m16.4644 15.6278v5.309h-5.2337v-5.309h5.2337v-5.3059h-9.54745c-.12228.0008-.24319.0259-.3557.0738-.1125.048-.21436.1178-.29966.2054-.08529.0876-.15233.1914-.1972.3051-.04487.1138-.0667.2353-.0642.3576v14.0653c-.0025.1223.01933.2438.0642.3576.04487.1137.11191.2175.1972.3051.0853.0876.18716.1574.29966.2054.11251.0479.23342.073.3557.0738h13.85185c.1223-.0008.2432-.0259.3557-.0738.1125-.048.2144-.1178.2997-.2054s.1523-.1914.1972-.3051c.0449-.1138.0667-.2353.0642-.3576v-9.7013z"
@@ -32,23 +54,40 @@ const svg = (iconGradientStart, iconGradientStop) => {
   />
   <path
     d="m16.4636 5.01256v5.30904h5.2463v5.3059h5.218v-9.68562c.0025-.12227-.0194-.24381-.0642-.35757-.0449-.11376-.1119-.21747-.1972-.3051s-.1872-.15744-.2997-.20537c-.1125-.04794-.2334-.07303-.3557-.07384z"
-    fill="${iconGradientStop}"
+    fill="${colors.iconGradientStop}"
   />
 </svg>`;
 };
+/**
+ * __Compass icon__
+ *
+ * The Compass 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 CompassIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Compass',
   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,
-    svg: svg,
+    svg: svg({
+      appearance,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -1,16 +1,40 @@
+/* eslint-disable max-len */
 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,
+  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="138" aria-hidden="true"></canvas>
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `compassLogo-${appearance}`;
+  }
+
+  return `
   <svg
     fill="none"
     viewBox="0 0 138 32"
+    height="32"
     xmlns="http://www.w3.org/2000/svg"
     focusable="false"
     aria-hidden="true"
@@ -23,13 +47,13 @@ const svg = (iconGradientStart, iconGradientStop) => {
       y1="8.27633"
       y2="17.2556"
     >
-      <stop offset="20%" stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
-      <stop offset="100%" stop-color="${iconGradientStop}" />
+      <stop offset="20%" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
+      <stop offset="100%" stop-color="${colors.iconGradientStop}" />
     </linearGradient>
     <path
       clip-rule="evenodd"
       d="m41.7694 22.8121c-1.1334.7473-2.9293 1.0769-4.8099 1.0769-5.9589 0-9.3183-3.5917-9.3183-9.3089 0-5.50994 3.3594-9.39361 9.2712-9.39361 1.7676 0 3.5352.31396 4.835 1.25584v2.40178c-1.2998-.82885-2.7346-1.25583-4.835-1.25583-4.2541 0-6.7972 2.82562-6.7972 6.99182 0 4.1663 2.6247 6.9354 6.9448 6.9354 1.6361.0146 3.2515-.3656 4.7094-1.1083zm2.2985-6.1318c0-4.1443 2.43-7.15827 6.5743-7.15827 4.1442 0 6.5115 3.00147 6.5115 7.15827s-2.405 7.221-6.521 7.221-6.5648-3.0799-6.5648-7.221zm2.3201 0c0 2.6247 1.2998 4.9982 4.2542 4.9982 2.9543 0 4.2007-2.3735 4.2007-4.9982s-1.2558-4.948-4.2007-4.948c-2.945 0-4.2542 2.3233-4.2542 4.948zm22.9026 6.9327h2.3766v-7.6794c0-2.7911 1.5321-4.2542 3.7298-4.2542 2.2637 0 3.2589 1.4097 3.2589 4.2542v7.6794h2.3767v-8.0939c0-3.8962-1.7142-5.99659-4.8067-5.99659-2.2919 0-4.1443 1.24329-4.9166 3.37189-.6907-2.182-2.295-3.37189-4.6434-3.37189-.891-.0185-1.7698.2091-2.5397.65779-.77.4487-1.4012 1.101-1.8244 1.8853v-2.2668h-2.3766v13.8142h2.3766v-7.6794c0-2.7911 1.5322-4.2542 3.7299-4.2542 2.2636 0 3.2589 1.1051 3.2589 3.5917zm18.0022-2.4305v7.8175h-2.3767v-19.20168h2.3767v2.48658c.8854-1.821 2.5431-2.76287 4.6686-2.76287 3.6733 0 5.5256 3.13957 5.5256 7.18337 0 3.8962-1.9339 7.1834-5.8019 7.1834-2.0313 0-3.5791-.9105-4.3923-2.7063zm4.0267-9.4502c-2.1474.0033-4.0267 1.36-4.0267 4.4205v1.1052c0 3.0674 1.7393 4.4205 3.7675 4.4205 2.6781 0 4.0595-1.7676 4.0595-4.9731-.0251-3.3118-1.3472-4.9695-3.8003-4.9731zm13.6115 12.1565c2.129 0 3.787-.9388 4.669-2.7629l.003 2.4866h2.377v-13.81418h-2.377v2.43318c-.832-1.7958-2.38-2.70947-4.395-2.70947-3.868 0-5.8022 3.29027-5.8022 7.18337 0 4.0626 1.8522 7.1834 5.5252 7.1834zm4.669-6.6308c0 3.0674-1.906 4.4205-4.034 4.4205-2.459 0-3.784-1.6577-3.793-4.9731 0-3.2024 1.381-4.9731 4.059-4.9731 2.029 0 3.768 1.3563 3.768 4.4205zm10.307 6.6313c-1.66.0436-3.306-.3004-4.81-1.0047v-2.5117c1.509.8373 3.196 1.3013 4.92 1.3532 1.824 0 2.763-.7472 2.763-1.8241s-.804-1.6577-3.426-2.2919c-3.067-.7472-4.367-1.934-4.367-4.2008 0-2.4018 1.853-3.86796 5.002-3.86796 1.54-.02192 3.064.31902 4.448.99526v2.4583c-1.657-.8289-3.01-1.2559-4.477-1.2559-1.739 0-2.678.606-2.678 1.6829 0 .967.663 1.5698 3.203 2.1977 3.067.7441 4.615 1.8837 4.615 4.2792 0 2.2511-1.491 3.9905-5.193 3.9905zm7.461-1.0047c1.506.7075 3.158 1.0516 4.822 1.0046 3.686 0 5.177-1.7393 5.177-3.9904 0-2.3955-1.548-3.5351-4.612-4.2792-2.543-.6279-3.205-1.2307-3.205-2.1977 0-1.0769.938-1.6829 2.678-1.6829 1.466 0 2.819.427 4.477 1.2559v-2.4583c-1.385-.67624-2.909-1.01718-4.449-.99526-3.149 0-5.001 1.46616-5.001 3.86796 0 2.2668 1.299 3.4536 4.367 4.2008 2.625.6342 3.425 1.215 3.425 2.2919s-.939 1.8241-2.763 1.8241c-1.723-.0518-3.409-.5158-4.916-1.3532z"
-      fill="inherit"
+      fill="${colors.textColor}"
       fill-rule="evenodd"
     />
     <path
@@ -38,27 +62,45 @@ const svg = (iconGradientStart, iconGradientStop) => {
     />
     <path
       d="m10.4636 2.01256v5.30904h5.2463v5.3059h5.218v-9.68562c.0025-.12227-.0194-.24381-.0642-.35757-.0449-.11376-.1119-.21747-.1972-.3051s-.1872-.15744-.2997-.20537c-.1125-.04794-.2334-.07303-.3557-.07384z"
-      fill="currentColor"
+      fill="${colors.iconColor}"
     />
   </svg>`;
 };
+/**
+ * __Compass logo__
+ *
+ * The Compass 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 CompassLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Compass',
   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
+    }),
     testId: testId,
     textColor: textColor
   });