@atlaskit/logo 13.6.0 → 13.8.0

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

@@ -1,32 +1,53 @@
+/* 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="278" 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 278 32"
-    width="278"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      fill="${colors.textColor}"
       clip-rule="evenodd"
       d="m97.0767 4v19.1237h2.3791v-6.305l6.0842 6.305h3.234l-6.776-6.8448 6.5-6.6485h-3.096l-5.9462 6.3296v-11.96zm-84.0054.55058c-.2088-.0757-.4319-.1066-.654-.09058-.222-.0155-.4448.01575-.6534.09164-.2085.07589-.3979.19465-.5553.34821-.1573.15356-.279.33835-.3568.54183s-.1098.4209-.0939.63752c0 .42944.1748.84129.486 1.14495s.7333.47425 1.1734.47425.8622-.17059 1.1734-.47425.486-.71551.486-1.14495c.0165-.21674-.0152-.43438-.0928-.6381s-.1993-.38872-.3568-.5424c-.1575-.15367-.3471-.27241-.5558-.34812zm.5089 5.07982h-2.3792v13.4933h2.3792zm-5.69792-4.22587h-2.48914l.00943 12.49357c0 1.7695-.726 2.9962-2.82857 2.9962-.88006.0065-1.753432-.1496-2.574-.46v2.349c.962129.3182 1.97311.4727 2.98886.457 3.42885 0 4.89342-2.2387 4.89342-5.5047zm11.61582 17.71917h-2.3226v-13.4933h2.3226v2.3736c.8014-1.5916 2.1843-2.7232 4.8966-2.56373v2.26933c-3.0423-.3067-4.8966.5919-4.8966 3.4531zm11.3678.2791c2.1308 0 3.7903-.9169 4.6734-2.6987l.0032 2.4196h2.3791v-13.4933h-2.3791v2.3828c-.8329-1.7541-2.3823-2.64347-4.4-2.64347-3.872 0-5.808 3.21077-5.808 7.01657 0 3.9682 1.8543 7.0165 5.5314 7.0165zm4.6734-6.4768c0 2.9961-1.9077 4.3179-4.0385 4.3179-2.4609 0-3.7872-1.6192-3.7966-4.8576 0-3.1311 1.3828-4.8576 4.0637-4.8576 2.0303 0 3.7714 1.3217 3.7714 4.3178zm8.6023-11.52147h2.5709l4.7142 15.43457 5.1732-15.43457h2.9291l5.1732 15.43457 4.73-15.43457h2.4891l-5.7106 17.71917h-3.1805l-5.0286-15.1401-5.0286 15.1401h-3.0988zm34.3763 3.9652c-4.1486 0-6.5811 2.94097-6.5811 6.98897s2.4608 7.0533 6.5811 7.0533 6.5277-3.0053 6.5277-7.0533-2.3791-6.98897-6.5277-6.98897zm0 11.87417c-2.9574 0-4.2586-2.3215-4.2586-4.8852h.0032c0-2.5638 1.3231-4.83 4.2554-4.83s4.2052 2.2662 4.2052 4.83c0 2.5637-1.2478 4.8852-4.2052 4.8852zm11.6162 1.8798h-2.3226v-13.4933h2.3226v2.3736c.8014-1.5916 2.1843-2.7232 4.8966-2.56373v2.26933c-3.0423-.3067-4.8966.5919-4.8966 3.4531zm28.7349-16.2533v16.2533h-2.492v-17.71917h4.315l4.12 10.17217 1.688 4.8852 1.688-4.8852 4.148-10.17217h4.01v17.71917h-2.489v-16.07543l-2.131 6.39703-4.007 9.6784h-2.407l-3.954-9.6784zm26.164 16.5324c2.131 0 3.791-.9169 4.674-2.6987l.003 2.4196h2.379v-13.4933h-2.379v2.3828c-.833-1.7541-2.382-2.64347-4.4-2.64347-3.872 0-5.808 3.21077-5.808 7.01657 0 3.9682 1.854 7.0165 5.531 7.0165zm4.674-6.4768c0 2.9961-1.908 4.3179-4.039 4.3179-2.461 0-3.787-1.6192-3.796-4.8576 0-3.1311 1.383-4.8576 4.063-4.8576 2.031 0 3.772 1.3217 3.772 4.3178zm17.729 6.1977h-2.379v-8.142c0-2.4288-.997-3.5082-3.263-3.5082-2.2 0-3.733 1.4321-3.733 4.1584v7.4918h-2.38v-13.4933h2.38v2.2141c.423-.7665 1.054-1.4041 1.825-1.8424.771-.43831 1.651-.66034 2.543-.64157 3.181 0 5.007 2.14667 5.007 5.85737zm8.02.2791c2.131 0 3.791-.9169 4.674-2.6987l.003 2.4196h2.379v-13.4933h-2.379v2.3828c-.833-1.7541-2.382-2.64347-4.4-2.64347-3.872 0-5.808 3.21077-5.808 7.01657 0 3.9682 1.854 7.0165 5.531 7.0165zm4.674-6.4768c0 2.9961-1.908 4.3179-4.039 4.3179-2.461 0-3.771-1.6192-3.771-4.8668 0-3.1219 1.367-4.8484 4.038-4.8484 2.031 0 3.772 1.3217 3.772 4.3178zm15.293 3.7781c-.883 1.7818-2.543 2.6987-4.673 2.6987-3.659 0-5.475-3.0391-5.475-7.0257 0-3.8058 1.907-7.01657 5.751-7.01657 2.021 0 3.567.88937 4.4 2.64347v-2.3736h2.326v12.2667c0 3.9682-1.911 6.6393-6.861 6.6393-1.672.0477-3.34-.1995-4.922-.7299v-2.2294c1.549.5193 3.174.7927 4.812.8096 3.457 0 4.645-1.8094 4.645-4.3179zm-4.035.5398c2.127 0 4.035-1.3218 4.035-4.3179v-1.0795c0-2.9961-1.741-4.3178-3.771-4.3178-2.684 0-4.067 1.7265-4.067 4.8576.012 3.2384 1.339 4.8576 3.803 4.8576zm9.126-4.8944c0 4.14 2.266 7.0533 7.44 7.0533 1.411 0 3.152-.2147 4.28-.7943v-2.1466c-1.346.477-2.767.7199-4.199.7176-3.262 0-4.783-1.4843-5.116-3.7782h10.091v-1.0518c0-4.1002-1.709-6.98897-5.971-6.98897-4.202 0-6.525 2.91337-6.525 6.98897zm10.095-.92h-7.719v-.0154c.252-2.346 1.522-3.9437 4.039-3.9437 2.379 0 3.542 1.4352 3.68 3.9591zm16.981 7.6942h-2.379v-8.142c0-2.4288-.996-3.5082-3.266-3.5082-2.2 0-3.73 1.4321-3.73 4.1584v7.4918h-2.379v-13.4933h2.369v2.2141c.423-.7667 1.055-1.4045 1.826-1.8428.771-.4384 1.651-.66028 2.543-.64117 2.351 0 3.954 1.15917 4.645 3.29357.776-2.0792 2.628-3.29357 4.925-3.29357 3.096 0 4.812 2.05157 4.812 5.85737v7.9058h-2.379v-7.4918c.009-2.7815-.972-4.1615-3.253-4.1615-2.2 0-3.734 1.4321-3.734 4.1584zm11.864-6.7742c0 4.14 2.266 7.0533 7.439 7.0533 1.412 0 3.153-.2147 4.287-.8035v-2.1466c-1.347.4808-2.77.7269-4.205.7268-3.262 0-4.783-1.4843-5.116-3.7782h10.094v-1.0518c0-4.1002-1.712-6.98897-5.971-6.98897-4.205 0-6.528 2.91337-6.528 6.98897zm10.095-.92h-7.716v-.0154c.258-2.346 1.515-3.9437 4.03-3.9437 2.385 0 3.548 1.4352 3.686 3.9591zm16.981 7.6942h-2.379v-8.142c0-2.4288-1.003-3.5113-3.262-3.5113-2.2 0-3.734 1.4321-3.734 4.1584v7.4949h-2.379v-13.4933h2.379v2.2141c.423-.7667 1.054-1.4045 1.825-1.8428.771-.4384 1.651-.66028 2.543-.64117 3.181 0 5.007 2.14667 5.007 5.85737zm10.287-2.3644c-.49.1102-.99.1728-1.493.1871-1.465 0-2.184-.8096-2.188-1.9964v-7.1729h3.678v-2.1467h-3.678v-2.852h-2.322v2.852h-2.241v2.1681h2.241v7.2067c0 2.5085 1.439 4.2075 4.4 4.2075.542.0028 1.082-.0695 1.603-.2147z"
       fill-rule="evenodd"
     />
   </svg>`;
+};
+
 export const JiraWorkManagementWordmark = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Jira Work Management',
   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,
+      textColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/es2019/opsgenie-logo/new-icon.js

@@ -2,42 +2,60 @@
 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
+  };
+  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 = `opsgenieIcon-${appearance}`;
+  }
+
+  return `
+  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}-1" x1="50%" x2="50%" y1="0%" y2="100%">
         <stop
           offset="0%"
-          stop-color="${iconGradientStop}"
+          stop-color="${colors.iconGradientStop}"
         />
         <stop
           offset="82%"
-          stop-color="${iconGradientStart}"
-          ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
+          stop-color="${colors.iconGradientStart}"
+          ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
         />
       </linearGradient>
       <linearGradient id="${id}-2" x1="7.133%" x2="50%" y1="13.352%" y2="58.228%">
         <stop
           offset="0%"
-          stop-color="${iconGradientStop}"
+          stop-color="${colors.iconGradientStop}"
         />
         <stop
           offset="100%"
-          stop-color="${iconGradientStart}"
-          ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
+          stop-color="${colors.iconGradientStart}"
+          ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
         />
       </linearGradient>
     </defs>
-    <g fill="none" fill-rule="evenodd">
+    <g fill-rule="evenodd">
       <circle cx="16" cy="10" r="6" fill="url(#${id}-1)" fill-rule="nonzero"/>
       <path fill="url(#${id}-2)" fill-rule="nonzero" d="M15.4917902,27.8535048 C11.5895108,25.3649677 8.34369777,21.9735337 6.02870456,17.9658651 C5.84991535,17.6419027 5.96743197,17.2343451 6.2912577,17.0553085 L6.31918889,17.0553085 L10.8440409,14.8208136 C11.1613558,14.6649408 11.5451782,14.7822878 11.7210802,15.088953 C14.0054511,18.9171632 17.3801037,21.9767185 21.4132015,23.876104 C19.9238268,25.3786979 18.2733698,26.7125519 16.4917267,27.8535048 C16.1850328,28.0418894 15.7984841,28.0418894 15.4917902,27.8535048 Z"/>
-      <path fill="currentColor" fill-rule="nonzero" d="M16.5084854,27.8535048 C20.4118869,25.3663345 23.6579925,21.9745949 25.971571,17.9658651 C26.1485439,17.6413306 26.0345395,17.23488 25.7146041,17.0497222 L25.6810867,17.0497222 L21.1506484,14.8152274 C20.834975,14.6599316 20.4529644,14.7774733 20.2791954,15.0833668 C17.9924232,18.9191667 14.6087636,21.9817774 10.5647291,23.876104 C12.0560656,25.3787865 13.7083825,26.7126296 15.4917902,27.8535048 C15.802544,28.0488317 16.1977316,28.0488317 16.5084854,27.8535048 Z"/>
+      <path fill="${colors.iconColor}" fill-rule="nonzero" d="M16.5084854,27.8535048 C20.4118869,25.3663345 23.6579925,21.9745949 25.971571,17.9658651 C26.1485439,17.6413306 26.0345395,17.23488 25.7146041,17.0497222 L25.6810867,17.0497222 L21.1506484,14.8152274 C20.834975,14.6599316 20.4529644,14.7774733 20.2791954,15.0833668 C17.9924232,18.9191667 14.6087636,21.9817774 10.5647291,23.876104 C12.0560656,25.3787865 13.7083825,26.7126296 15.4917902,27.8535048 C15.802544,28.0488317 16.1977316,28.0488317 16.5084854,27.8535048 Z"/>
     </g>
   </svg>`;
 };
@@ -47,16 +65,24 @@ const svg = (iconGradientStart, iconGradientStop) => {
 
 
 export const OpsgenieIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Opsgenie',
   size = defaultLogoParams.size,
   testId,
-  textColor = defaultLogoParams.textColor
+  textColor = defaultLogoParams.textColor,
+  iconColor = defaultLogoParams.iconColor,
+  iconGradientStart = defaultLogoParams.iconGradientStart,
+  iconGradientStop = defaultLogoParams.iconGradientStop
 }) => {
   return /*#__PURE__*/React.createElement(Wrapper, {
-    svg: svg,
+    appearance: appearance,
+    svg: svg({
+      appearance,
+      size,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -2,43 +2,63 @@
 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,
+  textColor
+}) => {
+  let colors = {
+    iconGradientStart,
+    iconGradientStop,
+    iconColor,
+    textColor
+  };
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="133" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 133 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+
+  if (appearance) {
+    colors = getColorsFromAppearance(appearance);
+    id = `opsgenieLogo-${appearance}`;
+  }
+
+  return `
+  <svg viewBox="0 0 133 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}-1" x1="50%" x2="50%" y1="0%" y2="100%">
         <stop
           offset="0%"
-          stop-color="${iconGradientStop}"
+          stop-color="${colors.iconGradientStop}"
         />
         <stop
           offset="82%"
-          stop-color="${iconGradientStart}"
-          ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
+          stop-color="${colors.iconGradientStart}"
+          ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
         />
       </linearGradient>
       <linearGradient id="${id}-2" x1="7.133%" x2="50%" y1="13.352%" y2="58.228%">
         <stop
           offset="0%"
-          stop-color="${iconGradientStop}"
+          stop-color="${colors.iconGradientStop}"
         />
         <stop
-          stop-color="${iconGradientStart}"
-          ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
+          stop-color="${colors.iconGradientStart}"
+          ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''}
           offset="100%"
         />
       </linearGradient>
     </defs>
     <g fill-rule="evenodd">
-      <path fill="inherit" fill-rule="nonzero" d="M27,14.9963259 C27,9.84140338 29.9575,6.22438088 35.2484675,6.22438088 C40.539435,6.22438088 43.4880625,9.84436088 43.4880625,14.9963259 C43.4880625,20.1985684 40.5305625,23.8422084 35.263255,23.8422084 C29.9959475,23.8422084 27,20.1956109 27,14.9963259 Z M29.34234,14.9963259 C29.34234,18.6133484 31.03403,21.6063384 35.25734,21.6063384 C39.48065,21.6063384 41.1220625,18.6133484 41.1220625,14.9963259 C41.1220625,11.4473259 39.4303725,8.46320838 35.239595,8.46320838 C31.0488175,8.46320838 29.34234,11.4561984 29.34234,14.9963259 Z M48.7050925,21.2928434 L48.7050925,28.6570184 L46.466265,28.6570184 L46.466265,10.5719059 L48.7050925,10.5719059 L48.7050925,12.9142459 C49.53615,11.1959384 51.1006675,10.3116459 53.102895,10.3116459 C56.56317,10.3116459 58.308095,13.2514009 58.308095,17.0754484 C58.308095,20.7457059 56.486275,23.8422084 52.842635,23.8422084 C50.94392,23.8422084 49.4858725,22.9845334 48.7050925,21.2928434 Z M52.50548,12.3937259 C50.500295,12.3937259 48.7050925,13.6684084 48.7050925,16.5578859 L48.7050925,17.5989259 C48.7050925,20.4854459 50.3435475,21.7601284 52.2540925,21.7601284 C54.77684,21.7601284 56.07814,20.0950559 56.07814,17.0754484 C56.0692675,13.9552859 54.8212025,12.3937259 52.50548,12.3937259 Z M64.99796,23.8422084 C63.4334449,23.8787499 61.881995,23.5496237 60.46707,22.8810209 L60.46707,20.5150209 C61.8881071,21.303432 63.4771215,21.740487 65.1014725,21.7897034 C66.81978,21.7897034 67.7040725,21.0887759 67.7040725,20.0713959 C67.7040725,19.0540159 66.94991,18.5098359 64.47744,17.9124209 C61.5879625,17.2085359 60.3635575,16.0906009 60.3635575,13.9582434 C60.3635575,11.6927984 62.1084825,10.3146034 65.074855,10.3146034 C66.5257548,10.2930388 67.96137,10.6131901 69.2656325,11.2491734 L69.2656325,13.5678534 C67.7040725,12.7870734 66.42939,12.3848534 65.0482375,12.3848534 C63.4097825,12.3848534 62.52549,12.9556509 62.52549,13.9730309 C62.52549,14.8839409 63.1495225,15.4517809 65.5450975,16.0284934 C68.4316175,16.7294209 69.889665,17.8029934 69.889665,20.0625234 C69.889665,22.2037534 68.4848525,23.8422084 64.99796,23.8422084 Z M81.7581125,21.2396084 C80.9240975,22.9579159 79.3625375,23.8422084 77.3573525,23.8422084 C73.923695,23.8422084 72.2053875,20.9024534 72.2053875,17.0754484 C72.2053875,13.4081484 74.00059,10.3116459 77.62057,10.3116459 C79.519285,10.3116459 80.9773325,11.1693209 81.76107,12.8610109 L81.76107,10.5719059 L83.9466625,10.5719059 L83.9466625,22.4019059 C83.9466625,26.2289109 82.15146,28.8048934 77.49044,28.8048934 C75.9171438,28.849884 74.3485221,28.6124873 72.858995,28.1039659 L72.858995,25.9154159 C74.315222,26.4191931 75.8431618,26.6848349 77.38397,26.7021109 C80.63722,26.7021109 81.7581125,24.9601434 81.7581125,22.5379509 L81.7581125,21.2396084 Z M77.957725,21.7601284 C79.9599525,21.7601284 81.7581125,20.4854459 81.7581125,17.5989259 L81.7581125,16.5578859 C81.7581125,13.6684084 80.1167,12.3937259 78.2091125,12.3937259 C75.6834075,12.3937259 74.3821075,14.0587984 74.3821075,17.0754484 C74.39098,20.1956109 75.6420025,21.7601284 77.957725,21.7601284 Z M93.5467075,23.8422084 C88.6786625,23.8422084 86.546305,21.0325834 86.546305,17.0399584 C86.546305,13.1094409 88.7318975,10.2998159 92.6890325,10.2998159 C96.696445,10.2998159 98.308282,13.0828234 98.308282,17.0399584 L98.308282,18.0662109 L88.8087925,18.0662109 C89.1222875,20.2784209 90.5537175,21.7098509 93.6236025,21.7098509 C94.9737094,21.7089885 96.313149,21.4707325 97.580737,21.0059659 L97.580737,23.0762159 C96.51308,23.6351834 94.874625,23.8422084 93.5467075,23.8422084 Z M88.7851325,16.1527084 L96.045795,16.1527084 C95.915665,13.7305159 94.82139,12.3523209 92.5825625,12.3523209 C90.2165625,12.3404909 89.0335625,13.8754334 88.7851325,16.1408784 L88.7851325,16.1527084 Z M112.025168,23.5819484 L109.78634,23.5819484 L109.78634,15.7238709 C109.78634,13.3815309 108.848813,12.3404909 106.716455,12.3404909 C104.646205,12.3404909 103.202945,13.7186859 103.202945,16.3479034 L103.202945,23.5819484 L100.964118,23.5819484 L100.964118,10.5689484 L103.202945,10.5689484 L103.202945,12.7013059 C104.015399,11.1952365 105.603045,10.2712035 107.31387,10.3086884 C110.30686,10.3086884 112.025168,12.3789384 112.025168,15.9545559 L112.025168,23.5819484 Z M116.29284,5.57373088 C116.715541,5.54348282 117.130549,5.69826386 117.430208,5.99792296 C117.729867,6.29758207 117.884648,6.71258978 117.8544,7.13529088 C117.8544,7.99771665 117.155266,8.69685088 116.29284,8.69685088 C115.430414,8.69685088 114.73128,7.99771665 114.73128,7.13529088 C114.701032,6.71258978 114.855813,6.29758207 115.155472,5.99792296 C115.455131,5.69826386 115.870139,5.54348282 116.29284,5.57373088 Z M115.148287,10.5719059 L117.387115,10.5719059 L117.387115,23.5849059 L115.148287,23.5849059 L115.148287,10.5719059 Z M127.510637,23.8422084 C122.642592,23.8422084 120.510235,21.0325834 120.510235,17.0399584 C120.510235,13.1094409 122.695827,10.2998159 126.650005,10.2998159 C130.657417,10.2998159 132.269255,13.0828234 132.269255,17.0399584 L132.269255,18.0662109 L122.772722,18.0662109 C123.086217,20.2784209 124.517647,21.7098509 127.587532,21.7098509 C128.937639,21.7089885 130.277079,21.4707325 131.544667,21.0059659 L131.544667,23.0762159 C130.47701,23.6351834 128.838555,23.8422084 127.510637,23.8422084 Z M122.749062,16.1408784 L130.012682,16.1408784 C129.882552,13.7186859 128.788277,12.3404909 126.54945,12.3404909 C124.177535,12.3404909 122.982705,13.8754334 122.749062,16.1408784 Z"/>
-      <circle cx="10.055" cy="10" r="6" fill="url(#${id}-1)" fill-rule="nonzero"/>
+      <path fill="${colors.textColor}" fill-rule="nonzero" d="M27,14.9963259 C27,9.84140338 29.9575,6.22438088 35.2484675,6.22438088 C40.539435,6.22438088 43.4880625,9.84436088 43.4880625,14.9963259 C43.4880625,20.1985684 40.5305625,23.8422084 35.263255,23.8422084 C29.9959475,23.8422084 27,20.1956109 27,14.9963259 Z M29.34234,14.9963259 C29.34234,18.6133484 31.03403,21.6063384 35.25734,21.6063384 C39.48065,21.6063384 41.1220625,18.6133484 41.1220625,14.9963259 C41.1220625,11.4473259 39.4303725,8.46320838 35.239595,8.46320838 C31.0488175,8.46320838 29.34234,11.4561984 29.34234,14.9963259 Z M48.7050925,21.2928434 L48.7050925,28.6570184 L46.466265,28.6570184 L46.466265,10.5719059 L48.7050925,10.5719059 L48.7050925,12.9142459 C49.53615,11.1959384 51.1006675,10.3116459 53.102895,10.3116459 C56.56317,10.3116459 58.308095,13.2514009 58.308095,17.0754484 C58.308095,20.7457059 56.486275,23.8422084 52.842635,23.8422084 C50.94392,23.8422084 49.4858725,22.9845334 48.7050925,21.2928434 Z M52.50548,12.3937259 C50.500295,12.3937259 48.7050925,13.6684084 48.7050925,16.5578859 L48.7050925,17.5989259 C48.7050925,20.4854459 50.3435475,21.7601284 52.2540925,21.7601284 C54.77684,21.7601284 56.07814,20.0950559 56.07814,17.0754484 C56.0692675,13.9552859 54.8212025,12.3937259 52.50548,12.3937259 Z M64.99796,23.8422084 C63.4334449,23.8787499 61.881995,23.5496237 60.46707,22.8810209 L60.46707,20.5150209 C61.8881071,21.303432 63.4771215,21.740487 65.1014725,21.7897034 C66.81978,21.7897034 67.7040725,21.0887759 67.7040725,20.0713959 C67.7040725,19.0540159 66.94991,18.5098359 64.47744,17.9124209 C61.5879625,17.2085359 60.3635575,16.0906009 60.3635575,13.9582434 C60.3635575,11.6927984 62.1084825,10.3146034 65.074855,10.3146034 C66.5257548,10.2930388 67.96137,10.6131901 69.2656325,11.2491734 L69.2656325,13.5678534 C67.7040725,12.7870734 66.42939,12.3848534 65.0482375,12.3848534 C63.4097825,12.3848534 62.52549,12.9556509 62.52549,13.9730309 C62.52549,14.8839409 63.1495225,15.4517809 65.5450975,16.0284934 C68.4316175,16.7294209 69.889665,17.8029934 69.889665,20.0625234 C69.889665,22.2037534 68.4848525,23.8422084 64.99796,23.8422084 Z M81.7581125,21.2396084 C80.9240975,22.9579159 79.3625375,23.8422084 77.3573525,23.8422084 C73.923695,23.8422084 72.2053875,20.9024534 72.2053875,17.0754484 C72.2053875,13.4081484 74.00059,10.3116459 77.62057,10.3116459 C79.519285,10.3116459 80.9773325,11.1693209 81.76107,12.8610109 L81.76107,10.5719059 L83.9466625,10.5719059 L83.9466625,22.4019059 C83.9466625,26.2289109 82.15146,28.8048934 77.49044,28.8048934 C75.9171438,28.849884 74.3485221,28.6124873 72.858995,28.1039659 L72.858995,25.9154159 C74.315222,26.4191931 75.8431618,26.6848349 77.38397,26.7021109 C80.63722,26.7021109 81.7581125,24.9601434 81.7581125,22.5379509 L81.7581125,21.2396084 Z M77.957725,21.7601284 C79.9599525,21.7601284 81.7581125,20.4854459 81.7581125,17.5989259 L81.7581125,16.5578859 C81.7581125,13.6684084 80.1167,12.3937259 78.2091125,12.3937259 C75.6834075,12.3937259 74.3821075,14.0587984 74.3821075,17.0754484 C74.39098,20.1956109 75.6420025,21.7601284 77.957725,21.7601284 Z M93.5467075,23.8422084 C88.6786625,23.8422084 86.546305,21.0325834 86.546305,17.0399584 C86.546305,13.1094409 88.7318975,10.2998159 92.6890325,10.2998159 C96.696445,10.2998159 98.308282,13.0828234 98.308282,17.0399584 L98.308282,18.0662109 L88.8087925,18.0662109 C89.1222875,20.2784209 90.5537175,21.7098509 93.6236025,21.7098509 C94.9737094,21.7089885 96.313149,21.4707325 97.580737,21.0059659 L97.580737,23.0762159 C96.51308,23.6351834 94.874625,23.8422084 93.5467075,23.8422084 Z M88.7851325,16.1527084 L96.045795,16.1527084 C95.915665,13.7305159 94.82139,12.3523209 92.5825625,12.3523209 C90.2165625,12.3404909 89.0335625,13.8754334 88.7851325,16.1408784 L88.7851325,16.1527084 Z M112.025168,23.5819484 L109.78634,23.5819484 L109.78634,15.7238709 C109.78634,13.3815309 108.848813,12.3404909 106.716455,12.3404909 C104.646205,12.3404909 103.202945,13.7186859 103.202945,16.3479034 L103.202945,23.5819484 L100.964118,23.5819484 L100.964118,10.5689484 L103.202945,10.5689484 L103.202945,12.7013059 C104.015399,11.1952365 105.603045,10.2712035 107.31387,10.3086884 C110.30686,10.3086884 112.025168,12.3789384 112.025168,15.9545559 L112.025168,23.5819484 Z M116.29284,5.57373088 C116.715541,5.54348282 117.130549,5.69826386 117.430208,5.99792296 C117.729867,6.29758207 117.884648,6.71258978 117.8544,7.13529088 C117.8544,7.99771665 117.155266,8.69685088 116.29284,8.69685088 C115.430414,8.69685088 114.73128,7.99771665 114.73128,7.13529088 C114.701032,6.71258978 114.855813,6.29758207 115.155472,5.99792296 C115.455131,5.69826386 115.870139,5.54348282 116.29284,5.57373088 Z M115.148287,10.5719059 L117.387115,10.5719059 L117.387115,23.5849059 L115.148287,23.5849059 L115.148287,10.5719059 Z M127.510637,23.8422084 C122.642592,23.8422084 120.510235,21.0325834 120.510235,17.0399584 C120.510235,13.1094409 122.695827,10.2998159 126.650005,10.2998159 C130.657417,10.2998159 132.269255,13.0828234 132.269255,17.0399584 L132.269255,18.0662109 L122.772722,18.0662109 C123.086217,20.2784209 124.517647,21.7098509 127.587532,21.7098509 C128.937639,21.7089885 130.277079,21.4707325 131.544667,21.0059659 L131.544667,23.0762159 C130.47701,23.6351834 128.838555,23.8422084 127.510637,23.8422084 Z M122.749062,16.1408784 L130.012682,16.1408784 C129.882552,13.7186859 128.788277,12.3404909 126.54945,12.3404909 C124.177535,12.3404909 122.982705,13.8754334 122.749062,16.1408784 Z"/>
+      <circle fill="url(#${id}-1)" cx="10.055" cy="10" r="6" fill-rule="nonzero"/>
       <path fill="url(#${id}-2)" fill-rule="nonzero" d="M9.5466546,27.8535048 C5.6443752,25.3649677 2.39856217,21.9735337 0.0835689575,17.9658651 C-0.0952202525,17.6419027 0.0222963675,17.2343451 0.346122097,17.0553085 L0.374053287,17.0553085 L4.8989053,14.8208136 C5.2162202,14.6649408 5.6000426,14.7822878 5.7759446,15.088953 C8.0603155,18.9171632 11.4349681,21.9767185 15.4680659,23.876104 C13.9786912,25.3786979 12.3282342,26.7125519 10.5465911,27.8535048 C10.2398972,28.0418894 9.8533485,28.0418894 9.5466546,27.8535048 Z"/>
-      <path fill="currentColor" fill-rule="nonzero" d="M10.5633498,27.8535048 C14.4667513,25.3663345 17.7128569,21.9745949 20.0264354,17.9658651 C20.2034083,17.6413306 20.0894039,17.23488 19.7694685,17.0497222 L19.7359511,17.0497222 L15.2055128,14.8152274 C14.8898394,14.6599316 14.5078288,14.7774733 14.3340598,15.0833668 C12.0472876,18.9191667 8.663628,21.9817774 4.6195935,23.876104 C6.11093,25.3787865 7.7632469,26.7126296 9.5466546,27.8535048 C9.8574084,28.0488317 10.252596,28.0488317 10.5633498,27.8535048 Z"/>
+      <path fill="${colors.iconColor}" fill-rule="nonzero" d="M10.5633498,27.8535048 C14.4667513,25.3663345 17.7128569,21.9745949 20.0264354,17.9658651 C20.2034083,17.6413306 20.0894039,17.23488 19.7694685,17.0497222 L19.7359511,17.0497222 L15.2055128,14.8152274 C14.8898394,14.6599316 14.5078288,14.7774733 14.3340598,15.0833668 C12.0472876,18.9191667 8.663628,21.9817774 4.6195935,23.876104 C6.11093,25.3787865 7.7632469,26.7126296 9.5466546,27.8535048 C9.8574084,28.0488317 10.252596,28.0488317 10.5633498,27.8535048 Z"/>
     </g>
   </svg>`;
 };
@@ -48,21 +68,30 @@ const svg = (iconGradientStart, iconGradientStop) => {
 
 
 export const OpsgenieLogo = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Opsgenie',
   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,
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     label: label,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance,
+      size,
+      iconGradientStart,
+      iconGradientStop,
+      iconColor,
+      textColor
+    }),
     testId: testId,
     textColor: textColor
   });

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

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

package/dist/es2019/opsgenie-logo/old-icon.js

@@ -5,12 +5,16 @@ 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
+}) => {
+  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 id="${id}-1" x1="50%" x2="50%" y1="0%" y2="100%">
         <stop
@@ -47,6 +51,10 @@ const svg = (iconGradientStart, iconGradientStop) => {
  * This is because it casing it incorrect, it should be Opsgenie, not OpsGenie.
  */
 
+/**
+ * @deprecated OpsGenieIcon is incorrectly cased and will be removed from atlaskit/logo in the next major release. Please use OpsgenieIcon (no capital 'g') instead.
+ */
+
 
 export const OpsGenieIcon = ({
   iconColor = defaultLogoParams.iconColor,
@@ -57,11 +65,15 @@ export const OpsGenieIcon = ({
   textColor = defaultLogoParams.textColor
 }) => {
   if (process.env.NODE_ENV !== 'production') {
-    warnOnce('OpsGenieIcon will be renamed to OpsgenieIcon after June 30 2021. Please use OpsgenieIcon instead.');
+    warnOnce('OpsGenieIcon will be renamed to OpsgenieIcon in the next major release. Please use OpsgenieIcon instead.');
   }
 
   return /*#__PURE__*/React.createElement(Wrapper, {
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop,
+      size
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/es2019/opsgenie-logo/old-logo.js

@@ -5,12 +5,16 @@ 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
+}) => {
+  let id = uid({
     iconGradientStart: iconGradientStop
   });
-  return `<canvas height="32" width="133" aria-hidden="true"></canvas>
-  <svg viewBox="0 0 133 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+  return `
+  <svg viewBox="0 0 133 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}-1" x1="50%" x2="50%" y1="0%" y2="100%">
         <stop
@@ -44,8 +48,7 @@ const svg = (iconGradientStart, iconGradientStop) => {
   </svg>`;
 };
 /**
- *
- * @deprecated This has been deprecated as it is in the incorrect casing. It is meant to be Opsgenie logo.
+ * @deprecated OpsGenieLogo is incorrectly cased and will be removed from atlaskit/logo in the next major release. Please use OpsgenieLogo (no capital 'g') instead.
  */
 
 
@@ -58,7 +61,7 @@ export const OpsGenieLogo = ({
   textColor = defaultLogoParams.textColor
 }) => {
   if (process.env.NODE_ENV !== 'production') {
-    warnOnce('OpsGenieLogo will be renamed to OpsgenieLogo after June 30 2021. Please use OpsgenieLogo instead.');
+    warnOnce('OpsGenieLogo will be renamed to OpsgenieLogo in the next major release. Please use OpsgenieLogo instead.');
   }
 
   return /*#__PURE__*/React.createElement(Wrapper, {
@@ -66,7 +69,11 @@ export const OpsGenieLogo = ({
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      iconGradientStart,
+      iconGradientStop,
+      size
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/es2019/opsgenie-logo/old-wordmark.js

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

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

@@ -2,39 +2,63 @@
 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
+  };
+  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 = `statuspageIcon-${appearance}`;
+  }
+
+  return `
+  <svg viewBox="0 0 32 32" height="32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
     <defs>
       <linearGradient id="${id}" x1="50%" x2="50%" y1="82.77%" y2="10.134%">
-        <stop offset="0%" stop-color="${iconGradientStop}" />
-        <stop offset="82%" stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
+        <stop offset="0%" stop-color="${colors.iconGradientStop}" />
+        <stop offset="82%" stop-color="${colors.iconGradientStart}" ${colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
       </linearGradient>
     </defs>
-    <g fill="none" fill-rule="evenodd">
+    <g fill-rule="evenodd">
       <circle cx="16" cy="19.423" r="5.538" fill="url(#${id})" fill-rule="nonzero"/>
-      <path fill="currentColor" fill-rule="nonzero" d="M4.14318325,11.970217 L7.17443341,15.5164923 C7.40520779,15.7738906 7.80165918,15.8034375 8.06900618,15.5831636 C12.9601954,11.2622319 19.0323494,11.2622319 23.9235386,15.5831636 C24.1908857,15.8034375 24.5873371,15.7738906 24.8181114,15.5164923 L27.8525794,11.970217 C28.0663737,11.714892 28.04536,11.3403265 27.8043112,11.1098404 C20.6927794,4.96338652 11.2997654,4.96338652 4.20110522,11.1098404 C3.95712825,11.3377486 3.93190106,11.7124749 4.14318325,11.970217 Z"/>
+      <path fill="${colors.iconColor}" fill-rule="nonzero" d="M4.14318325,11.970217 L7.17443341,15.5164923 C7.40520779,15.7738906 7.80165918,15.8034375 8.06900618,15.5831636 C12.9601954,11.2622319 19.0323494,11.2622319 23.9235386,15.5831636 C24.1908857,15.8034375 24.5873371,15.7738906 24.8181114,15.5164923 L27.8525794,11.970217 C28.0663737,11.714892 28.04536,11.3403265 27.8043112,11.1098404 C20.6927794,4.96338652 11.2997654,4.96338652 4.20110522,11.1098404 C3.95712825,11.3377486 3.93190106,11.7124749 4.14318325,11.970217 Z"/>
     </g>
   </svg>`;
 };
 
 export const StatuspageIcon = ({
-  iconColor = defaultLogoParams.iconColor,
-  iconGradientStart = defaultLogoParams.iconGradientStart,
-  iconGradientStop = defaultLogoParams.iconGradientStop,
+  appearance,
   label = 'Statuspage',
   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,