@atlaskit/logo 13.7.1 → 13.8.0

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

@@ -11,32 +11,42 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = "<canvas height=\"32\" width=\"105\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 105 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"inherit\">\n    <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>\n  </g>\n</svg>";
-
-var BitbucketWordmark = function BitbucketWordmark(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Bitbucket' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      textColor = _ref.textColor;
+  var colors = {
+    textColor: textColor
+  };
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  }
+
+  return "\n<svg viewBox=\"0 0 105 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"".concat(colors.textColor, "\">\n    <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>\n  </g>\n</svg>");
+};
+
+var BitbucketWordmark = function BitbucketWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Bitbucket' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/compass-logo/icon.js

@@ -13,32 +13,57 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
-var svg = function svg(iconGradientStart, iconGradientStop) {
+/* eslint-disable max-len */
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"32\" aria-hidden=\"true\"></canvas>\n  <svg\n  fill=\"none\"\n  viewBox=\"0 0 32 32\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  focusable=\"false\"\n  aria-hidden=\"true\"\n>\n  <linearGradient\n    id=\"".concat(id, "\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"20.8536\"\n    x2=\"11.8744\"\n    y1=\"11.2763\"\n    y2=\"20.2556\"\n  >\n    <stop offset=\"20%\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n    <stop offset=\"100%\" stop-color=\"").concat(iconGradientStop, "\" />\n  </linearGradient>\n  <path\n    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\"\n    fill=\"url(#").concat(id, ")\"\n  />\n  <path\n    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\"\n    fill=\"").concat(iconGradientStop, "\"\n  />\n</svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "compassIcon-".concat(appearance);
+  }
+
+  return "\n  <svg\n  fill=\"none\"\n  height=\"32\"\n  viewBox=\"0 0 32 32\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  focusable=\"false\"\n  aria-hidden=\"true\"\n>\n  <linearGradient\n    id=\"".concat(id, "\"\n    gradientUnits=\"userSpaceOnUse\"\n    x1=\"20.8536\"\n    x2=\"11.8744\"\n    y1=\"11.2763\"\n    y2=\"20.2556\"\n  >\n    <stop offset=\"20%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n    <stop offset=\"100%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n  </linearGradient>\n  <path\n    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\"\n    fill=\"url(#").concat(id, ")\"\n  />\n  <path\n    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\"\n    fill=\"").concat(colors.iconGradientStop, "\"\n  />\n</svg>");
 };
 
-var CompassIcon = function CompassIcon(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Compass' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var CompassIcon = function CompassIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Compass' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

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

@@ -13,36 +13,64 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
-var svg = function svg(iconGradientStart, iconGradientStop) {
+/* eslint-disable max-len */
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      iconColor = _ref.iconColor,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"138\" aria-hidden=\"true\"></canvas>\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 138 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <linearGradient\n      id=\"".concat(id, "\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"14.8536\"\n      x2=\"5.87437\"\n      y1=\"8.27633\"\n      y2=\"17.2556\"\n    >\n      <stop offset=\"20%\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"100%\" stop-color=\"").concat(iconGradientStop, "\" />\n    </linearGradient>\n    <path\n      clip-rule=\"evenodd\"\n      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\"\n      fill=\"inherit\"\n      fill-rule=\"evenodd\"\n    />\n    <path\n      d=\"m10.4644 12.6278v5.309h-5.23365v-5.309h5.23365v-5.3059h-9.547447c-.122288.00081-.243196.0259-.355701.07383-.112505.04794-.214364.11775-.29966.20538-.085295.08763-.152328.19134-.1972019.3051-.0448742.11376-.06669581.2353-.06419744.35757v14.06532c-.00249837.1223.01932324.2438.06419744.3576.0448739.1137.1119069.2175.1972019.3051.085296.0876.187155.1574.29966.2054.112505.0479.233413.073.355701.0738h13.851847c.1223-.0008.2432-.0259.3557-.0738.1125-.048.2144-.1178.2997-.2054s.1523-.1914.1972-.3051c.0449-.1138.0667-.2353.0642-.3576v-9.7013z\"\n      fill=\"url(#").concat(id, ")\"\n    />\n    <path\n      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\"\n      fill=\"currentColor\"\n    />\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "compassLogo-".concat(appearance);
+  }
+
+  return "\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 138 32\"\n    height=\"32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <linearGradient\n      id=\"".concat(id, "\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"14.8536\"\n      x2=\"5.87437\"\n      y1=\"8.27633\"\n      y2=\"17.2556\"\n    >\n      <stop offset=\"20%\" stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n      <stop offset=\"100%\" stop-color=\"").concat(colors.iconGradientStop, "\" />\n    </linearGradient>\n    <path\n      clip-rule=\"evenodd\"\n      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\"\n      fill=\"").concat(colors.textColor, "\"\n      fill-rule=\"evenodd\"\n    />\n    <path\n      d=\"m10.4644 12.6278v5.309h-5.23365v-5.309h5.23365v-5.3059h-9.547447c-.122288.00081-.243196.0259-.355701.07383-.112505.04794-.214364.11775-.29966.20538-.085295.08763-.152328.19134-.1972019.3051-.0448742.11376-.06669581.2353-.06419744.35757v14.06532c-.00249837.1223.01932324.2438.06419744.3576.0448739.1137.1119069.2175.1972019.3051.085296.0876.187155.1574.29966.2054.112505.0479.233413.073.355701.0738h13.851847c.1223-.0008.2432-.0259.3557-.0738.1125-.048.2144-.1178.2997-.2054s.1523-.1914.1972-.3051c.0449-.1138.0667-.2353.0642-.3576v-9.7013z\"\n      fill=\"url(#").concat(id, ")\"\n    />\n    <path\n      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\"\n      fill=\"").concat(colors.iconColor, "\"\n    />\n  </svg>");
 };
 
-var CompassLogo = function CompassLogo(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Compass' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var CompassLogo = function CompassLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Compass' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/compass-logo/wordmark.js

@@ -11,31 +11,42 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
-var svg = "<canvas height=\"32\" width=\"110\" aria-hidden=\"true\"></canvas>\n<svg\n  fill=\"none\"\n  viewBox=\"0 0 110 32\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  focusable=\"false\"\n  aria-hidden=\"true\"\n>\n  <path\n    clip-rule=\"evenodd\"\n    d=\"m14.1286 22.6255c-1.1334.7472-2.9292 1.0769-4.80982 1.0769-5.95893 0-9.31829172-3.5917-9.31829172-9.3089 0-5.50998 3.35936172-9.39365 9.27120172-9.39365 1.76761 0 3.53521.31396 4.83491 1.25583v2.40179c-1.2997-.82885-2.7345-1.25584-4.83491-1.25584-4.25414 0-6.79721 2.82567-6.79721 6.99187s2.6247 6.9353 6.94477 6.9353c1.63605.0146 3.25155-.3656 4.70935-1.1082zm2.2985-6.1319c0-4.1442 2.4301-7.15821 6.5743-7.15821 4.1443 0 6.5115 3.00141 6.5115 7.15821 0 4.1569-2.4049 7.2211-6.5209 7.2211s-6.5649-3.0799-6.5649-7.2211zm2.3202 0c0 2.6247 1.2998 4.9983 4.2541 4.9983 2.9544 0 4.2008-2.3736 4.2008-4.9983s-1.2559-4.9479-4.2008-4.9479-4.2541 2.3232-4.2541 4.9479zm22.9025 6.9327h2.3767v-7.6794c0-2.7911 1.5321-4.2541 3.7298-4.2541 2.2636 0 3.2589 1.4096 3.2589 4.2541v7.6794h2.3767v-8.0938c0-3.8962-1.7143-5.99663-4.8067-5.99663-2.2919 0-4.1443 1.24323-4.9166 3.37193-.6907-2.182-2.2951-3.37193-4.6435-3.37193-.8909-.01851-1.7697.2091-2.5397.65777-.7699.44866-1.4012 1.10106-1.8243 1.88526v-2.26675h-2.3767v13.81415h2.3767v-7.6794c0-2.7911 1.5321-4.2541 3.7298-4.2541 2.2637 0 3.2589 1.1051 3.2589 3.5917zm18.0023-2.4305v7.8176h-2.3767v-19.20173h2.3767v2.48653c.8853-1.8209 2.543-2.76281 4.6685-2.76281 3.6733 0 5.5257 3.13961 5.5257 7.18341 0 3.8962-1.934 7.1833-5.802 7.1833-2.0313 0-3.5791-.9104-4.3922-2.7063zm4.0266-9.4501c-2.1474.0032-4.0266 1.3599-4.0266 4.4205v1.1051c0 3.0674 1.7393 4.4206 3.7675 4.4206 2.678 0 4.0594-1.7676 4.0594-4.9731-.025-3.3118-1.3471-4.9695-3.8003-4.9731zm13.612 12.1564c2.1286 0 3.7863-.9387 4.6686-2.7628l.0031 2.4866h2.3767v-13.81423h-2.3767v2.43323c-.832-1.7959-2.3798-2.70951-4.3954-2.70951-3.868 0-5.802 3.29031-5.802 7.18341 0 4.0626 1.8524 7.1833 5.5257 7.1833zm4.6686-6.6308c0 3.0674-1.9058 4.4206-4.0344 4.4206-2.4583 0-3.7832-1.6577-3.7926-4.9731 0-3.2024 1.3814-4.9731 4.0594-4.9731 2.0282 0 3.7676 1.3563 3.7676 4.4205zm10.307 6.6313c-1.6596.0437-3.3065-.3003-4.8099-1.0047v-2.5116c1.5084.8373 3.1954 1.3012 4.9198 1.3531 1.8241 0 2.7628-.7472 2.7628-1.8241 0-1.0768-.8037-1.6577-3.4253-2.2919-3.0674-.7472-4.3671-1.934-4.3671-4.2007 0-2.4018 1.8523-3.86801 5.0013-3.86801 1.5405-.02191 3.0645.31903 4.4488.99521v2.4583c-1.6577-.8288-3.0108-1.2558-4.477-1.2558-1.7394 0-2.6781.6059-2.6781 1.6828 0 .967.6625 1.5698 3.2024 2.1977 3.0674.7441 4.6152 1.8838 4.6152 4.2793 0 2.2511-1.4913 3.9904-5.1929 3.9904zm7.4606-1.0047c1.5071.7075 3.1581 1.0516 4.8221 1.0047 3.686 0 5.178-1.7393 5.178-3.9904 0-2.3955-1.548-3.5352-4.613-4.2793-2.543-.6279-3.205-1.2307-3.205-2.1977 0-1.0769.939-1.6828 2.678-1.6828 1.466 0 2.819.427 4.477 1.2558v-2.4583c-1.384-.67618-2.908-1.01712-4.449-.99521-3.149 0-5.0011 1.46621-5.0011 3.86801 0 2.2667 1.3001 3.4535 4.3671 4.2007 2.625.6342 3.425 1.2151 3.425 2.2919 0 1.0769-.938 1.8241-2.762 1.8241-1.724-.0517-3.41-.5158-4.9171-1.3531z\"\n    fill=\"inherit\"\n    fill-rule=\"evenodd\"\n  />\n</svg>";
-
-var CompassWordmark = function CompassWordmark(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Compass' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+/* eslint-disable max-len */
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      textColor = _ref.textColor;
+  var colors = {
+    textColor: textColor
+  };
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  }
+
+  return "\n  <svg\n    fill=\"none\"\n    height=\"32\"\n    viewBox=\"0 0 110 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    focusable=\"false\"\n    aria-hidden=\"true\"\n  >\n    <path\n      clip-rule=\"evenodd\"\n      d=\"m14.1286 22.6255c-1.1334.7472-2.9292 1.0769-4.80982 1.0769-5.95893 0-9.31829172-3.5917-9.31829172-9.3089 0-5.50998 3.35936172-9.39365 9.27120172-9.39365 1.76761 0 3.53521.31396 4.83491 1.25583v2.40179c-1.2997-.82885-2.7345-1.25584-4.83491-1.25584-4.25414 0-6.79721 2.82567-6.79721 6.99187s2.6247 6.9353 6.94477 6.9353c1.63605.0146 3.25155-.3656 4.70935-1.1082zm2.2985-6.1319c0-4.1442 2.4301-7.15821 6.5743-7.15821 4.1443 0 6.5115 3.00141 6.5115 7.15821 0 4.1569-2.4049 7.2211-6.5209 7.2211s-6.5649-3.0799-6.5649-7.2211zm2.3202 0c0 2.6247 1.2998 4.9983 4.2541 4.9983 2.9544 0 4.2008-2.3736 4.2008-4.9983s-1.2559-4.9479-4.2008-4.9479-4.2541 2.3232-4.2541 4.9479zm22.9025 6.9327h2.3767v-7.6794c0-2.7911 1.5321-4.2541 3.7298-4.2541 2.2636 0 3.2589 1.4096 3.2589 4.2541v7.6794h2.3767v-8.0938c0-3.8962-1.7143-5.99663-4.8067-5.99663-2.2919 0-4.1443 1.24323-4.9166 3.37193-.6907-2.182-2.2951-3.37193-4.6435-3.37193-.8909-.01851-1.7697.2091-2.5397.65777-.7699.44866-1.4012 1.10106-1.8243 1.88526v-2.26675h-2.3767v13.81415h2.3767v-7.6794c0-2.7911 1.5321-4.2541 3.7298-4.2541 2.2637 0 3.2589 1.1051 3.2589 3.5917zm18.0023-2.4305v7.8176h-2.3767v-19.20173h2.3767v2.48653c.8853-1.8209 2.543-2.76281 4.6685-2.76281 3.6733 0 5.5257 3.13961 5.5257 7.18341 0 3.8962-1.934 7.1833-5.802 7.1833-2.0313 0-3.5791-.9104-4.3922-2.7063zm4.0266-9.4501c-2.1474.0032-4.0266 1.3599-4.0266 4.4205v1.1051c0 3.0674 1.7393 4.4206 3.7675 4.4206 2.678 0 4.0594-1.7676 4.0594-4.9731-.025-3.3118-1.3471-4.9695-3.8003-4.9731zm13.612 12.1564c2.1286 0 3.7863-.9387 4.6686-2.7628l.0031 2.4866h2.3767v-13.81423h-2.3767v2.43323c-.832-1.7959-2.3798-2.70951-4.3954-2.70951-3.868 0-5.802 3.29031-5.802 7.18341 0 4.0626 1.8524 7.1833 5.5257 7.1833zm4.6686-6.6308c0 3.0674-1.9058 4.4206-4.0344 4.4206-2.4583 0-3.7832-1.6577-3.7926-4.9731 0-3.2024 1.3814-4.9731 4.0594-4.9731 2.0282 0 3.7676 1.3563 3.7676 4.4205zm10.307 6.6313c-1.6596.0437-3.3065-.3003-4.8099-1.0047v-2.5116c1.5084.8373 3.1954 1.3012 4.9198 1.3531 1.8241 0 2.7628-.7472 2.7628-1.8241 0-1.0768-.8037-1.6577-3.4253-2.2919-3.0674-.7472-4.3671-1.934-4.3671-4.2007 0-2.4018 1.8523-3.86801 5.0013-3.86801 1.5405-.02191 3.0645.31903 4.4488.99521v2.4583c-1.6577-.8288-3.0108-1.2558-4.477-1.2558-1.7394 0-2.6781.6059-2.6781 1.6828 0 .967.6625 1.5698 3.2024 2.1977 3.0674.7441 4.6152 1.8838 4.6152 4.2793 0 2.2511-1.4913 3.9904-5.1929 3.9904zm7.4606-1.0047c1.5071.7075 3.1581 1.0516 4.8221 1.0047 3.686 0 5.178-1.7393 5.178-3.9904 0-2.3955-1.548-3.5352-4.613-4.2793-2.543-.6279-3.205-1.2307-3.205-2.1977 0-1.0769.939-1.6828 2.678-1.6828 1.466 0 2.819.427 4.477 1.2558v-2.4583c-1.384-.67618-2.908-1.01712-4.449-.99521-3.149 0-5.0011 1.46621-5.0011 3.86801 0 2.2667 1.3001 3.4535 4.3671 4.2007 2.625.6342 3.425 1.2151 3.425 2.2919 0 1.0769-.938 1.8241-2.762 1.8241-1.724-.0517-3.41-.5158-4.9171-1.3531z\"\n      fill=\"".concat(colors.textColor, "\"\n      fill-rule=\"evenodd\"\n    />\n  </svg>");
+};
+
+var CompassWordmark = function CompassWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Compass' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/confluence-logo/icon.js

@@ -13,33 +13,57 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = function svg(iconGradientStart, iconGradientStop) {
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      iconColor = _ref.iconColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"32\" aria-hidden=\"true\"></canvas>\n  <svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"60.6779047%\" y1=\"137.626433%\" x2=\"14.341981%\" y2=\"112.08042%\" id=\"".concat(id, "-1\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n      <linearGradient x1=\"12.3282701%\" y1=\"-53.9760846%\" x2=\"74.1300776%\" y2=\"-33.2553066%\" id=\"").concat(id, "-2\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path d=\"M5.21454927,22.0245336 C4.97082816,22.4219865 4.69711061,22.8831818 4.46463817,23.2506383 C4.25655728,23.602269 4.36826343,24.0557627 4.71585838,24.2705174 L9.59028054,27.2701618 C9.76138278,27.3758032 9.96774369,27.4083016 10.1630326,27.3603607 C10.3583215,27.3124197 10.5261749,27.1880564 10.6289074,27.015192 C10.8238843,26.6889807 11.0751045,26.2652809 11.3488221,25.8115847 C13.2798432,22.6244625 15.2221129,23.0144163 18.7241978,24.686718 L23.5573748,26.9851956 C23.7404243,27.0723219 23.9509502,27.0816253 24.1409716,27.0109854 C24.3309931,26.9403455 24.4843191,26.7957811 24.5660052,26.61024 L26.8869801,21.3608623 C27.0509607,20.9859459 26.8841076,20.5487907 26.5120245,20.3784788 C25.4921454,19.8985357 23.4636359,18.942399 21.6376024,18.0612535 C15.0683811,14.8741313 9.48529299,15.0841064 5.21454927,22.0245336 Z\" fill=\"url(#").concat(id, "-1)\"></path>\n      <path d=\"M27.0752616,9.74267061 C27.3190367,9.34512979 27.5928148,8.88383241 27.8253387,8.51629467 C28.0334656,8.1645861 27.9217347,7.71099215 27.5740629,7.4961899 L22.6985622,4.49588177 C22.5250856,4.3802891 22.3113292,4.3421035 22.1085604,4.39048341 C21.9057917,4.43886333 21.7323024,4.56944439 21.6297024,4.75090796 C21.4346824,5.07719147 21.1834066,5.50098499 20.9096284,5.9547816 C18.9781801,9.14260899 17.0354806,8.75256893 13.5326208,7.07989715 L8.71337588,4.78466143 C8.53028584,4.69751579 8.31971336,4.68821035 8.1296499,4.75886591 C7.93958645,4.82952147 7.78622651,4.97411777 7.70452227,5.15969994 L5.38303386,10.4102392 C5.21901692,10.7852385 5.38590698,11.2224905 5.75807237,11.3928401 C6.77817714,11.8728894 8.80713551,12.8292376 10.6335731,13.7105781 C17.2192494,16.8946551 22.8035729,16.6846336 27.0752616,9.74267061 Z\" fill=\"url(#").concat(id, "-2)\"></path>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "confluenceIcon-".concat(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 32 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"60.6779047%\" y1=\"137.626433%\" x2=\"14.341981%\" y2=\"112.08042%\" id=\"".concat(id, "-1\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n      <linearGradient x1=\"12.3282701%\" y1=\"-53.9760846%\" x2=\"74.1300776%\" y2=\"-33.2553066%\" id=\"").concat(id, "-2\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path fill=\"url(#").concat(id, "-1)\" d=\"M5.21454927,22.0245336 C4.97082816,22.4219865 4.69711061,22.8831818 4.46463817,23.2506383 C4.25655728,23.602269 4.36826343,24.0557627 4.71585838,24.2705174 L9.59028054,27.2701618 C9.76138278,27.3758032 9.96774369,27.4083016 10.1630326,27.3603607 C10.3583215,27.3124197 10.5261749,27.1880564 10.6289074,27.015192 C10.8238843,26.6889807 11.0751045,26.2652809 11.3488221,25.8115847 C13.2798432,22.6244625 15.2221129,23.0144163 18.7241978,24.686718 L23.5573748,26.9851956 C23.7404243,27.0723219 23.9509502,27.0816253 24.1409716,27.0109854 C24.3309931,26.9403455 24.4843191,26.7957811 24.5660052,26.61024 L26.8869801,21.3608623 C27.0509607,20.9859459 26.8841076,20.5487907 26.5120245,20.3784788 C25.4921454,19.8985357 23.4636359,18.942399 21.6376024,18.0612535 C15.0683811,14.8741313 9.48529299,15.0841064 5.21454927,22.0245336 Z\"></path>\n      <path fill=\"url(#").concat(id, "-2)\" d=\"M27.0752616,9.74267061 C27.3190367,9.34512979 27.5928148,8.88383241 27.8253387,8.51629467 C28.0334656,8.1645861 27.9217347,7.71099215 27.5740629,7.4961899 L22.6985622,4.49588177 C22.5250856,4.3802891 22.3113292,4.3421035 22.1085604,4.39048341 C21.9057917,4.43886333 21.7323024,4.56944439 21.6297024,4.75090796 C21.4346824,5.07719147 21.1834066,5.50098499 20.9096284,5.9547816 C18.9781801,9.14260899 17.0354806,8.75256893 13.5326208,7.07989715 L8.71337588,4.78466143 C8.53028584,4.69751579 8.31971336,4.68821035 8.1296499,4.75886591 C7.93958645,4.82952147 7.78622651,4.97411777 7.70452227,5.15969994 L5.38303386,10.4102392 C5.21901692,10.7852385 5.38590698,11.2224905 5.75807237,11.3928401 C6.77817714,11.8728894 8.80713551,12.8292376 10.6335731,13.7105781 C17.2192494,16.8946551 22.8035729,16.6846336 27.0752616,9.74267061 Z\"></path>\n    </g>\n  </svg>");
 };
 
-var ConfluenceIcon = function ConfluenceIcon(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Confluence' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var ConfluenceIcon = function ConfluenceIcon(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Confluence' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor
+    }),
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,

package/dist/cjs/confluence-logo/logo.js

@@ -13,37 +13,64 @@ var _reactUid = require("react-uid");
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = function svg(iconGradientStart, iconGradientStop) {
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      iconGradientStart = _ref.iconGradientStart,
+      iconGradientStop = _ref.iconGradientStop,
+      iconColor = _ref.iconColor,
+      textColor = _ref.textColor;
+  var colors = {
+    iconGradientStart: iconGradientStart,
+    iconGradientStop: iconGradientStop,
+    iconColor: iconColor,
+    textColor: textColor
+  };
   var id = (0, _reactUid.uid)({
     iconGradientStart: iconGradientStop
   });
-  return "<canvas height=\"32\" width=\"158\" aria-hidden=\"true\"></canvas>\n  <svg viewBox=\"0 0 158 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"99.140087%\" y1=\"112.745465%\" x2=\"33.8589812%\" y2=\"37.7675389%\" id=\"".concat(id, "-1\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n      <linearGradient x1=\"14.1838118%\" y1=\"5.80047897%\" x2=\"61.141783%\" y2=\"70.9663868%\" id=\"").concat(id, "-2\">\n        <stop stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path d=\"M45.312,20.984 C44.064,21.608 42.66,22.024 40.866,22.024 C36.81,22.024 34.34,19.424 34.34,15.498 C34.34,11.572 36.732,8.92 40.736,8.92 C42.712,8.92 44.064,9.336 45.286,10.116 L45.286,7.854 C44.064,6.97 42.4,6.658 40.736,6.658 C35.172,6.658 32,10.298 32,15.498 C32,20.88 35.172,24.26 40.788,24.26 C42.556,24.26 44.246,23.948 45.312,23.246 L45.312,20.984 Z M53.918,24.26 C50.018,24.26 47.73,21.374 47.73,17.474 C47.73,13.574 50.018,10.74 53.918,10.74 C57.792,10.74 60.054,13.574 60.054,17.474 C60.054,21.374 57.792,24.26 53.918,24.26 Z M53.918,12.82 C51.136,12.82 49.914,15.004 49.914,17.474 C49.914,19.944 51.136,22.18 53.918,22.18 C56.674,22.18 57.87,19.944 57.87,17.474 C57.87,15.004 56.674,12.82 53.918,12.82 Z M73.704,16.382 C73.704,12.794 71.988,10.74 68.998,10.74 C67.256,10.74 65.722,11.598 64.89,13.132 L64.89,11 L62.654,11 L62.654,24 L64.89,24 L64.89,16.772 C64.89,14.146 66.32,12.768 68.4,12.768 C70.532,12.768 71.468,13.808 71.468,16.148 L71.468,24 L73.704,24 L73.704,16.382 Z M79.918,9.622 C79.918,8.452 80.594,7.646 81.972,7.646 C82.492,7.646 82.986,7.698 83.376,7.776 L83.376,5.722 C82.986,5.618 82.544,5.514 81.868,5.514 C79.086,5.514 77.734,7.152 77.734,9.57 L77.734,11 L75.628,11 L75.628,13.08 L77.734,13.08 L77.734,24 L79.918,24 L79.918,13.08 L83.272,13.08 L83.272,11 L79.918,11 L79.918,9.622 Z M90.318,23.974 L90.318,21.972 C90.058,21.998 89.902,21.998 89.668,21.998 C88.706,21.998 87.926,21.582 87.926,20.412 L87.926,5.566 L85.69,5.566 L85.69,20.672 C85.69,23.064 87.042,24.078 89.174,24.078 C89.746,24.078 90.136,24.026 90.318,23.974 Z M92.216,18.618 C92.216,22.206 93.932,24.26 96.922,24.26 C98.664,24.26 100.198,23.402 101.03,21.868 L101.03,24 L103.266,24 L103.266,11 L101.03,11 L101.03,18.228 C101.03,20.854 99.6,22.232 97.52,22.232 C95.388,22.232 94.452,21.192 94.452,18.852 L94.452,11 L92.216,11 L92.216,18.618 Z M116.89,23.48 C115.824,24.052 114.186,24.26 112.86,24.26 C107.998,24.26 105.866,21.452 105.866,17.474 C105.866,13.548 108.05,10.74 112.002,10.74 C116.006,10.74 117.618,13.522 117.618,17.474 L117.618,18.488 L108.128,18.488 C108.44,20.698 109.87,22.128 112.938,22.128 C114.446,22.128 115.72,21.842 116.89,21.426 L116.89,23.48 Z M111.898,12.768 C109.532,12.768 108.336,14.302 108.102,16.564 L115.356,16.564 C115.226,14.146 114.134,12.768 111.898,12.768 Z M131.32,16.382 C131.32,12.794 129.604,10.74 126.614,10.74 C124.872,10.74 123.338,11.598 122.506,13.132 L122.506,11 L120.27,11 L120.27,24 L122.506,24 L122.506,16.772 C122.506,14.146 123.936,12.768 126.016,12.768 C128.148,12.768 129.084,13.808 129.084,16.148 L129.084,24 L131.32,24 L131.32,16.382 Z M143.618,21.66 C142.812,21.946 141.98,22.128 140.654,22.128 C137.248,22.128 135.844,19.996 135.844,17.474 C135.844,14.952 137.222,12.82 140.602,12.82 C141.824,12.82 142.708,13.054 143.54,13.444 L143.54,11.364 C142.526,10.896 141.616,10.74 140.446,10.74 C135.818,10.74 133.66,13.548 133.66,17.474 C133.66,21.452 135.818,24.26 140.446,24.26 C141.642,24.26 142.838,24.078 143.618,23.662 L143.618,21.66 Z M156.41,23.48 C155.344,24.052 153.706,24.26 152.38,24.26 C147.518,24.26 145.386,21.452 145.386,17.474 C145.386,13.548 147.57,10.74 151.522,10.74 C155.526,10.74 157.138,13.522 157.138,17.474 L157.138,18.488 L147.648,18.488 C147.96,20.698 149.39,22.128 152.458,22.128 C153.966,22.128 155.24,21.842 156.41,21.426 L156.41,23.48 Z M151.418,12.768 C149.052,12.768 147.856,14.302 147.622,16.564 L154.876,16.564 C154.746,14.146 153.654,12.768 151.418,12.768 Z\" fill=\"inherit\" fill-rule=\"evenodd\"></path>\n      <path d=\"M0.85465057,21.7022581 C0.61090057,22.0783871 0.33715057,22.5148387 0.10465057,22.8625806 C-0.10345498,23.195346 0.00826440879,23.6245091 0.35590057,23.8277419 L5.23090057,26.6664516 C5.40202309,26.7664253 5.60840847,26.7971801 5.80372052,26.7518112 C5.99903257,26.7064423 6.16690583,26.5887513 6.26965057,26.4251613 C6.46465057,26.1164516 6.71590057,25.7154839 6.98965057,25.286129 C8.92090057,22.27 10.8634006,22.6390323 14.3659006,24.2216129 L19.1996506,26.3967742 C19.3827218,26.4792261 19.5932727,26.4880304 19.7833166,26.4211804 C19.9733605,26.3543303 20.1267047,26.2175221 20.2084006,26.0419355 L22.5296506,21.0741935 C22.6936507,20.7193919 22.5267777,20.3056906 22.1546506,20.1445161 C21.1346506,19.6903226 19.1059006,18.7854839 17.2796506,17.9516129 C10.7096506,14.9354839 5.12590057,15.1341935 0.85465057,21.7022581 Z\" fill=\"url(#").concat(id, "-1)\"></path>\n      <path d=\"M22.7130274,10.4325806 C22.9567774,10.0564516 23.2305274,9.62 23.4630274,9.27225806 C23.6711329,8.93949274 23.5594135,8.51032964 23.2117774,8.30709677 L18.3367774,5.4683871 C18.1633186,5.35902032 17.9495842,5.32289142 17.7468362,5.36866556 C17.5440883,5.4144397 17.3706168,5.53798759 17.2680274,5.70967742 C17.0730274,6.0183871 16.8217774,6.41935484 16.5480274,6.84870968 C14.6167774,9.86483871 12.6742774,9.49580645 9.17177736,7.91322581 L4.35302736,5.7416129 C4.16995613,5.65916098 3.95940527,5.65035674 3.76936133,5.71720675 C3.5793174,5.78405675 3.42597321,5.92086501 3.34427736,6.09645161 L1.02302736,11.0641935 C0.85902727,11.4189952 1.02590019,11.8326965 1.39802736,11.993871 C2.41802736,12.4480645 4.44677736,13.3529032 6.27302736,14.1867742 C12.8580274,17.1993548 18.4417774,17.0006452 22.7130274,10.4325806 Z\" fill=\"url(#").concat(id, "-2)\"></path>\n    </g>\n  </svg>");
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+    id = "confluenceLogo-".concat(appearance);
+  }
+
+  return "\n  <svg viewBox=\"0 0 158 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient x1=\"99.140087%\" y1=\"112.745465%\" x2=\"33.8589812%\" y2=\"37.7675389%\" id=\"".concat(id, "-1\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n      <linearGradient x1=\"14.1838118%\" y1=\"5.80047897%\" x2=\"61.141783%\" y2=\"70.9663868%\" id=\"").concat(id, "-2\">\n        <stop stop-color=\"").concat(colors.iconGradientStart, "\" ").concat(colors.iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " offset=\"0%\"></stop>\n        <stop stop-color=\"").concat(colors.iconGradientStop, "\" offset=\"100%\"></stop>\n      </linearGradient>\n    </defs>\n    <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"nonzero\">\n      <path fill=\"").concat(colors.textColor, "\" fill-rule=\"evenodd\" d=\"M45.312,20.984 C44.064,21.608 42.66,22.024 40.866,22.024 C36.81,22.024 34.34,19.424 34.34,15.498 C34.34,11.572 36.732,8.92 40.736,8.92 C42.712,8.92 44.064,9.336 45.286,10.116 L45.286,7.854 C44.064,6.97 42.4,6.658 40.736,6.658 C35.172,6.658 32,10.298 32,15.498 C32,20.88 35.172,24.26 40.788,24.26 C42.556,24.26 44.246,23.948 45.312,23.246 L45.312,20.984 Z M53.918,24.26 C50.018,24.26 47.73,21.374 47.73,17.474 C47.73,13.574 50.018,10.74 53.918,10.74 C57.792,10.74 60.054,13.574 60.054,17.474 C60.054,21.374 57.792,24.26 53.918,24.26 Z M53.918,12.82 C51.136,12.82 49.914,15.004 49.914,17.474 C49.914,19.944 51.136,22.18 53.918,22.18 C56.674,22.18 57.87,19.944 57.87,17.474 C57.87,15.004 56.674,12.82 53.918,12.82 Z M73.704,16.382 C73.704,12.794 71.988,10.74 68.998,10.74 C67.256,10.74 65.722,11.598 64.89,13.132 L64.89,11 L62.654,11 L62.654,24 L64.89,24 L64.89,16.772 C64.89,14.146 66.32,12.768 68.4,12.768 C70.532,12.768 71.468,13.808 71.468,16.148 L71.468,24 L73.704,24 L73.704,16.382 Z M79.918,9.622 C79.918,8.452 80.594,7.646 81.972,7.646 C82.492,7.646 82.986,7.698 83.376,7.776 L83.376,5.722 C82.986,5.618 82.544,5.514 81.868,5.514 C79.086,5.514 77.734,7.152 77.734,9.57 L77.734,11 L75.628,11 L75.628,13.08 L77.734,13.08 L77.734,24 L79.918,24 L79.918,13.08 L83.272,13.08 L83.272,11 L79.918,11 L79.918,9.622 Z M90.318,23.974 L90.318,21.972 C90.058,21.998 89.902,21.998 89.668,21.998 C88.706,21.998 87.926,21.582 87.926,20.412 L87.926,5.566 L85.69,5.566 L85.69,20.672 C85.69,23.064 87.042,24.078 89.174,24.078 C89.746,24.078 90.136,24.026 90.318,23.974 Z M92.216,18.618 C92.216,22.206 93.932,24.26 96.922,24.26 C98.664,24.26 100.198,23.402 101.03,21.868 L101.03,24 L103.266,24 L103.266,11 L101.03,11 L101.03,18.228 C101.03,20.854 99.6,22.232 97.52,22.232 C95.388,22.232 94.452,21.192 94.452,18.852 L94.452,11 L92.216,11 L92.216,18.618 Z M116.89,23.48 C115.824,24.052 114.186,24.26 112.86,24.26 C107.998,24.26 105.866,21.452 105.866,17.474 C105.866,13.548 108.05,10.74 112.002,10.74 C116.006,10.74 117.618,13.522 117.618,17.474 L117.618,18.488 L108.128,18.488 C108.44,20.698 109.87,22.128 112.938,22.128 C114.446,22.128 115.72,21.842 116.89,21.426 L116.89,23.48 Z M111.898,12.768 C109.532,12.768 108.336,14.302 108.102,16.564 L115.356,16.564 C115.226,14.146 114.134,12.768 111.898,12.768 Z M131.32,16.382 C131.32,12.794 129.604,10.74 126.614,10.74 C124.872,10.74 123.338,11.598 122.506,13.132 L122.506,11 L120.27,11 L120.27,24 L122.506,24 L122.506,16.772 C122.506,14.146 123.936,12.768 126.016,12.768 C128.148,12.768 129.084,13.808 129.084,16.148 L129.084,24 L131.32,24 L131.32,16.382 Z M143.618,21.66 C142.812,21.946 141.98,22.128 140.654,22.128 C137.248,22.128 135.844,19.996 135.844,17.474 C135.844,14.952 137.222,12.82 140.602,12.82 C141.824,12.82 142.708,13.054 143.54,13.444 L143.54,11.364 C142.526,10.896 141.616,10.74 140.446,10.74 C135.818,10.74 133.66,13.548 133.66,17.474 C133.66,21.452 135.818,24.26 140.446,24.26 C141.642,24.26 142.838,24.078 143.618,23.662 L143.618,21.66 Z M156.41,23.48 C155.344,24.052 153.706,24.26 152.38,24.26 C147.518,24.26 145.386,21.452 145.386,17.474 C145.386,13.548 147.57,10.74 151.522,10.74 C155.526,10.74 157.138,13.522 157.138,17.474 L157.138,18.488 L147.648,18.488 C147.96,20.698 149.39,22.128 152.458,22.128 C153.966,22.128 155.24,21.842 156.41,21.426 L156.41,23.48 Z M151.418,12.768 C149.052,12.768 147.856,14.302 147.622,16.564 L154.876,16.564 C154.746,14.146 153.654,12.768 151.418,12.768 Z\"></path>\n      <path fill=\"url(#").concat(id, "-1)\" d=\"M0.85465057,21.7022581 C0.61090057,22.0783871 0.33715057,22.5148387 0.10465057,22.8625806 C-0.10345498,23.195346 0.00826440879,23.6245091 0.35590057,23.8277419 L5.23090057,26.6664516 C5.40202309,26.7664253 5.60840847,26.7971801 5.80372052,26.7518112 C5.99903257,26.7064423 6.16690583,26.5887513 6.26965057,26.4251613 C6.46465057,26.1164516 6.71590057,25.7154839 6.98965057,25.286129 C8.92090057,22.27 10.8634006,22.6390323 14.3659006,24.2216129 L19.1996506,26.3967742 C19.3827218,26.4792261 19.5932727,26.4880304 19.7833166,26.4211804 C19.9733605,26.3543303 20.1267047,26.2175221 20.2084006,26.0419355 L22.5296506,21.0741935 C22.6936507,20.7193919 22.5267777,20.3056906 22.1546506,20.1445161 C21.1346506,19.6903226 19.1059006,18.7854839 17.2796506,17.9516129 C10.7096506,14.9354839 5.12590057,15.1341935 0.85465057,21.7022581 Z\"></path>\n      <path fill=\"url(#").concat(id, "-2)\" d=\"M22.7130274,10.4325806 C22.9567774,10.0564516 23.2305274,9.62 23.4630274,9.27225806 C23.6711329,8.93949274 23.5594135,8.51032964 23.2117774,8.30709677 L18.3367774,5.4683871 C18.1633186,5.35902032 17.9495842,5.32289142 17.7468362,5.36866556 C17.5440883,5.4144397 17.3706168,5.53798759 17.2680274,5.70967742 C17.0730274,6.0183871 16.8217774,6.41935484 16.5480274,6.84870968 C14.6167774,9.86483871 12.6742774,9.49580645 9.17177736,7.91322581 L4.35302736,5.7416129 C4.16995613,5.65916098 3.95940527,5.65035674 3.76936133,5.71720675 C3.5793174,5.78405675 3.42597321,5.92086501 3.34427736,6.09645161 L1.02302736,11.0641935 C0.85902727,11.4189952 1.02590019,11.8326965 1.39802736,11.993871 C2.41802736,12.4480645 4.44677736,13.3529032 6.27302736,14.1867742 C12.8580274,17.1993548 18.4417774,17.0006452 22.7130274,10.4325806 Z\"></path>\n    </g>\n  </svg>");
 };
 
-var ConfluenceLogo = function ConfluenceLogo(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Confluence' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var ConfluenceLogo = function ConfluenceLogo(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Confluence' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$iconColor = _ref2.iconColor,
+      iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+      _ref2$iconGradientSta = _ref2.iconGradientStart,
+      iconGradientStart = _ref2$iconGradientSta === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref2$iconGradientSta,
+      _ref2$iconGradientSto = _ref2.iconGradientStop,
+      iconGradientStop = _ref2$iconGradientSto === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref2$iconGradientSto,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
     label: label,
     iconColor: iconColor,
     iconGradientStart: iconGradientStart,
     iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      iconGradientStart: iconGradientStart,
+      iconGradientStop: iconGradientStop,
+      iconColor: iconColor,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/confluence-logo/wordmark.js

@@ -11,32 +11,41 @@ var _react = _interopRequireDefault(require("react"));
 
 var _constants = require("../constants");
 
+var _utils = require("../utils");
+
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 
 /* eslint-disable max-len */
-var svg = "<canvas height=\"32\" width=\"126\" aria-hidden=\"true\"></canvas>\n<svg viewBox=\"0 0 126 32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"inherit\">\n    <path d=\"M13.312,20.984 C12.064,21.608 10.66,22.024 8.866,22.024 C4.81,22.024 2.34,19.424 2.34,15.498 C2.34,11.572 4.732,8.92 8.736,8.92 C10.712,8.92 12.064,9.336 13.286,10.116 L13.286,7.854 C12.064,6.97 10.4,6.658 8.736,6.658 C3.172,6.658 -2.04281037e-14,10.298 -2.04281037e-14,15.498 C-2.04281037e-14,20.88 3.172,24.26 8.788,24.26 C10.556,24.26 12.246,23.948 13.312,23.246 L13.312,20.984 Z M21.918,24.26 C18.018,24.26 15.73,21.374 15.73,17.474 C15.73,13.574 18.018,10.74 21.918,10.74 C25.792,10.74 28.054,13.574 28.054,17.474 C28.054,21.374 25.792,24.26 21.918,24.26 Z M21.918,12.82 C19.136,12.82 17.914,15.004 17.914,17.474 C17.914,19.944 19.136,22.18 21.918,22.18 C24.674,22.18 25.87,19.944 25.87,17.474 C25.87,15.004 24.674,12.82 21.918,12.82 Z M41.704,16.382 C41.704,12.794 39.988,10.74 36.998,10.74 C35.256,10.74 33.722,11.598 32.89,13.132 L32.89,11 L30.654,11 L30.654,24 L32.89,24 L32.89,16.772 C32.89,14.146 34.32,12.768 36.4,12.768 C38.532,12.768 39.468,13.808 39.468,16.148 L39.468,24 L41.704,24 L41.704,16.382 Z M47.918,9.622 C47.918,8.452 48.594,7.646 49.972,7.646 C50.492,7.646 50.986,7.698 51.376,7.776 L51.376,5.722 C50.986,5.618 50.544,5.514 49.868,5.514 C47.086,5.514 45.734,7.152 45.734,9.57 L45.734,11 L43.628,11 L43.628,13.08 L45.734,13.08 L45.734,24 L47.918,24 L47.918,13.08 L51.272,13.08 L51.272,11 L47.918,11 L47.918,9.622 Z M58.318,23.974 L58.318,21.972 C58.058,21.998 57.902,21.998 57.668,21.998 C56.706,21.998 55.926,21.582 55.926,20.412 L55.926,5.566 L53.69,5.566 L53.69,20.672 C53.69,23.064 55.042,24.078 57.174,24.078 C57.746,24.078 58.136,24.026 58.318,23.974 Z M60.216,18.618 C60.216,22.206 61.932,24.26 64.922,24.26 C66.664,24.26 68.198,23.402 69.03,21.868 L69.03,24 L71.266,24 L71.266,11 L69.03,11 L69.03,18.228 C69.03,20.854 67.6,22.232 65.52,22.232 C63.388,22.232 62.452,21.192 62.452,18.852 L62.452,11 L60.216,11 L60.216,18.618 Z M84.89,23.48 C83.824,24.052 82.186,24.26 80.86,24.26 C75.998,24.26 73.866,21.452 73.866,17.474 C73.866,13.548 76.05,10.74 80.002,10.74 C84.006,10.74 85.618,13.522 85.618,17.474 L85.618,18.488 L76.128,18.488 C76.44,20.698 77.87,22.128 80.938,22.128 C82.446,22.128 83.72,21.842 84.89,21.426 L84.89,23.48 Z M79.898,12.768 C77.532,12.768 76.336,14.302 76.102,16.564 L83.356,16.564 C83.226,14.146 82.134,12.768 79.898,12.768 Z M99.32,16.382 C99.32,12.794 97.604,10.74 94.614,10.74 C92.872,10.74 91.338,11.598 90.506,13.132 L90.506,11 L88.27,11 L88.27,24 L90.506,24 L90.506,16.772 C90.506,14.146 91.936,12.768 94.016,12.768 C96.148,12.768 97.084,13.808 97.084,16.148 L97.084,24 L99.32,24 L99.32,16.382 Z M111.618,21.66 C110.812,21.946 109.98,22.128 108.654,22.128 C105.248,22.128 103.844,19.996 103.844,17.474 C103.844,14.952 105.222,12.82 108.602,12.82 C109.824,12.82 110.708,13.054 111.54,13.444 L111.54,11.364 C110.526,10.896 109.616,10.74 108.446,10.74 C103.818,10.74 101.66,13.548 101.66,17.474 C101.66,21.452 103.818,24.26 108.446,24.26 C109.642,24.26 110.838,24.078 111.618,23.662 L111.618,21.66 Z M124.41,23.48 C123.344,24.052 121.706,24.26 120.38,24.26 C115.518,24.26 113.386,21.452 113.386,17.474 C113.386,13.548 115.57,10.74 119.522,10.74 C123.526,10.74 125.138,13.522 125.138,17.474 L125.138,18.488 L115.648,18.488 C115.96,20.698 117.39,22.128 120.458,22.128 C121.966,22.128 123.24,21.842 124.41,21.426 L124.41,23.48 Z M119.418,12.768 C117.052,12.768 115.856,14.302 115.622,16.564 L122.876,16.564 C122.746,14.146 121.654,12.768 119.418,12.768 Z\"></path>\n  </g>\n</svg>";
-
-var ConfluenceWordmark = function ConfluenceWordmark(_ref) {
-  var _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
-      _ref$iconGradientStar = _ref.iconGradientStart,
-      iconGradientStart = _ref$iconGradientStar === void 0 ? _constants.defaultLogoParams.iconGradientStart : _ref$iconGradientStar,
-      _ref$iconGradientStop = _ref.iconGradientStop,
-      iconGradientStop = _ref$iconGradientStop === void 0 ? _constants.defaultLogoParams.iconGradientStop : _ref$iconGradientStop,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Confluence' : _ref$label,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
-      testId = _ref.testId,
-      _ref$textColor = _ref.textColor,
-      textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+var svg = function svg(_ref) {
+  var appearance = _ref.appearance,
+      textColor = _ref.textColor;
+  var colors = {
+    textColor: textColor
+  };
+
+  if (appearance) {
+    colors = (0, _utils.getColorsFromAppearance)(appearance);
+  }
+
+  return "\n<svg viewBox=\"0 0 126 32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n  <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\" fill=\"".concat(colors.textColor, "\">\n    <path d=\"M13.312,20.984 C12.064,21.608 10.66,22.024 8.866,22.024 C4.81,22.024 2.34,19.424 2.34,15.498 C2.34,11.572 4.732,8.92 8.736,8.92 C10.712,8.92 12.064,9.336 13.286,10.116 L13.286,7.854 C12.064,6.97 10.4,6.658 8.736,6.658 C3.172,6.658 -2.04281037e-14,10.298 -2.04281037e-14,15.498 C-2.04281037e-14,20.88 3.172,24.26 8.788,24.26 C10.556,24.26 12.246,23.948 13.312,23.246 L13.312,20.984 Z M21.918,24.26 C18.018,24.26 15.73,21.374 15.73,17.474 C15.73,13.574 18.018,10.74 21.918,10.74 C25.792,10.74 28.054,13.574 28.054,17.474 C28.054,21.374 25.792,24.26 21.918,24.26 Z M21.918,12.82 C19.136,12.82 17.914,15.004 17.914,17.474 C17.914,19.944 19.136,22.18 21.918,22.18 C24.674,22.18 25.87,19.944 25.87,17.474 C25.87,15.004 24.674,12.82 21.918,12.82 Z M41.704,16.382 C41.704,12.794 39.988,10.74 36.998,10.74 C35.256,10.74 33.722,11.598 32.89,13.132 L32.89,11 L30.654,11 L30.654,24 L32.89,24 L32.89,16.772 C32.89,14.146 34.32,12.768 36.4,12.768 C38.532,12.768 39.468,13.808 39.468,16.148 L39.468,24 L41.704,24 L41.704,16.382 Z M47.918,9.622 C47.918,8.452 48.594,7.646 49.972,7.646 C50.492,7.646 50.986,7.698 51.376,7.776 L51.376,5.722 C50.986,5.618 50.544,5.514 49.868,5.514 C47.086,5.514 45.734,7.152 45.734,9.57 L45.734,11 L43.628,11 L43.628,13.08 L45.734,13.08 L45.734,24 L47.918,24 L47.918,13.08 L51.272,13.08 L51.272,11 L47.918,11 L47.918,9.622 Z M58.318,23.974 L58.318,21.972 C58.058,21.998 57.902,21.998 57.668,21.998 C56.706,21.998 55.926,21.582 55.926,20.412 L55.926,5.566 L53.69,5.566 L53.69,20.672 C53.69,23.064 55.042,24.078 57.174,24.078 C57.746,24.078 58.136,24.026 58.318,23.974 Z M60.216,18.618 C60.216,22.206 61.932,24.26 64.922,24.26 C66.664,24.26 68.198,23.402 69.03,21.868 L69.03,24 L71.266,24 L71.266,11 L69.03,11 L69.03,18.228 C69.03,20.854 67.6,22.232 65.52,22.232 C63.388,22.232 62.452,21.192 62.452,18.852 L62.452,11 L60.216,11 L60.216,18.618 Z M84.89,23.48 C83.824,24.052 82.186,24.26 80.86,24.26 C75.998,24.26 73.866,21.452 73.866,17.474 C73.866,13.548 76.05,10.74 80.002,10.74 C84.006,10.74 85.618,13.522 85.618,17.474 L85.618,18.488 L76.128,18.488 C76.44,20.698 77.87,22.128 80.938,22.128 C82.446,22.128 83.72,21.842 84.89,21.426 L84.89,23.48 Z M79.898,12.768 C77.532,12.768 76.336,14.302 76.102,16.564 L83.356,16.564 C83.226,14.146 82.134,12.768 79.898,12.768 Z M99.32,16.382 C99.32,12.794 97.604,10.74 94.614,10.74 C92.872,10.74 91.338,11.598 90.506,13.132 L90.506,11 L88.27,11 L88.27,24 L90.506,24 L90.506,16.772 C90.506,14.146 91.936,12.768 94.016,12.768 C96.148,12.768 97.084,13.808 97.084,16.148 L97.084,24 L99.32,24 L99.32,16.382 Z M111.618,21.66 C110.812,21.946 109.98,22.128 108.654,22.128 C105.248,22.128 103.844,19.996 103.844,17.474 C103.844,14.952 105.222,12.82 108.602,12.82 C109.824,12.82 110.708,13.054 111.54,13.444 L111.54,11.364 C110.526,10.896 109.616,10.74 108.446,10.74 C103.818,10.74 101.66,13.548 101.66,17.474 C101.66,21.452 103.818,24.26 108.446,24.26 C109.642,24.26 110.838,24.078 111.618,23.662 L111.618,21.66 Z M124.41,23.48 C123.344,24.052 121.706,24.26 120.38,24.26 C115.518,24.26 113.386,21.452 113.386,17.474 C113.386,13.548 115.57,10.74 119.522,10.74 C123.526,10.74 125.138,13.522 125.138,17.474 L125.138,18.488 L115.648,18.488 C115.96,20.698 117.39,22.128 120.458,22.128 C121.966,22.128 123.24,21.842 124.41,21.426 L124.41,23.48 Z M119.418,12.768 C117.052,12.768 115.856,14.302 115.622,16.564 L122.876,16.564 C122.746,14.146 121.654,12.768 119.418,12.768 Z\"></path>\n  </g>\n</svg>");
+};
+
+var ConfluenceWordmark = function ConfluenceWordmark(_ref2) {
+  var appearance = _ref2.appearance,
+      _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? 'Confluence' : _ref2$label,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+      testId = _ref2.testId,
+      _ref2$textColor = _ref2.textColor,
+      textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     label: label,
-    iconColor: iconColor,
-    iconGradientStart: iconGradientStart,
-    iconGradientStop: iconGradientStop,
     size: size,
-    svg: svg,
+    svg: svg({
+      appearance: appearance,
+      textColor: textColor
+    }),
     testId: testId,
     textColor: textColor
   });