@atlaskit/logo 13.9.1 → 13.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/logo
 
+## 13.10.0
+
+### Minor Changes
+
+- [`68e771a783a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68e771a783a) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
 ## 13.9.1
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "13.9.1",
+	"version": "13.10.0",
 	"sideEffects": false
 }

package/dist/cjs/wrapper.js

@@ -15,14 +15,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("./constants");
 
 var _excluded = ["label", "svg", "size", "appearance", "iconGradientStart", "iconGradientStop", "iconColor", "textColor", "testId"];
 var CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';
-var baseWrapperStyles = (0, _core.css)({
+var baseWrapperStyles = (0, _react.css)({
   display: 'inline-block',
   position: 'relative',
   color: "var(".concat(CSS_VAR_COLOR, ")"),
@@ -36,7 +36,7 @@ var baseWrapperStyles = (0, _core.css)({
     fill: 'inherit'
   }
 });
-var stopColorStyles = (0, _core.css)({
+var stopColorStyles = (0, _react.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   stop: {
     stopColor: 'currentColor'
@@ -47,7 +47,7 @@ var sizeStyles = Object.entries(_constants.sizes).reduce(function (acc, _ref) {
       key = _ref2[0],
       val = _ref2[1];
 
-  acc[key] = (0, _core.css)({
+  acc[key] = (0, _react.css)({
     height: "".concat(val, "px")
   });
   return acc;
@@ -73,7 +73,7 @@ var Wrapper = function Wrapper(_ref3) {
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit' && appearance === undefined;
   var testId = userDefinedTestId && "".concat(userDefinedTestId, "--wrapper");
-  return (0, _core.jsx)("span", (0, _extends2.default)({
+  return (0, _react.jsx)("span", (0, _extends2.default)({
     css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
     "data-testid": testId,
     style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, CSS_VAR_COLOR, iconColor), (0, _defineProperty2.default)(_ref4, CSS_VAR_FILL, textColor), _ref4),

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "13.9.1",
+	"version": "13.10.0",
 	"sideEffects": false
 }

package/dist/es2019/wrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { sizes } from './constants';
 const CSS_VAR_COLOR = '--logo-color';
 const CSS_VAR_FILL = '--logo-fill';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/logo",
-	"version": "13.9.1",
+	"version": "13.10.0",
 	"sideEffects": false
 }

package/dist/esm/wrapper.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["label", "svg", "size", "appearance", "iconGradientStart", "iconGradientStop", "iconColor", "textColor", "testId"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { sizes } from './constants';
 var CSS_VAR_COLOR = '--logo-color';
 var CSS_VAR_FILL = '--logo-fill';

package/dist/types/wrapper.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { WrapperProps } from './constants';
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-declare const Wrapper: ({ label, svg, size, appearance, iconGradientStart, iconGradientStop, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => JSX.Element;
+declare const Wrapper: ({ label, svg, size, appearance, iconGradientStart, iconGradientStop, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => jsx.JSX.Element;
 export default Wrapper;

package/dist/types-ts4.0/wrapper.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 /** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { WrapperProps } from './constants';
 /**
  * __Wrapper__
  *
  * An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
  */
-declare const Wrapper: ({ label, svg, size, appearance, iconGradientStart, iconGradientStop, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => JSX.Element;
+declare const Wrapper: ({ label, svg, size, appearance, iconGradientStart, iconGradientStop, iconColor, textColor, testId: userDefinedTestId, ...rest }: WrapperProps) => jsx.JSX.Element;
 export default Wrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/logo",
-  "version": "13.9.1",
+  "version": "13.10.0",
   "description": "A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "react-uid": "^2.2.0"
   },
   "peerDependencies": {
@@ -62,10 +62,10 @@
   "devDependencies": {
     "@atlaskit/atlassian-navigation": "^2.2.2",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/code": "^14.3.0",
+    "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,164 +1,313 @@
-## API Report File for "@atlaskit/logo"
+## API Report File for "@atlaskit/logo".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
+declare type Appearance = 'brand' | 'neutral' | 'inverse';
+
+/**
+ * __Atlassian icon__
+ *
+ * The Atlassian icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const AtlassianIcon: ({
+  appearance,
+  label,
+  size,
   iconColor,
   iconGradientStart,
   iconGradientStop,
-  label,
-  size,
   textColor,
   testId,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Atlassian logo__
+ *
+ * The Atlassian logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const AtlassianLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Atlassian start logo__
+ *
+ * The Atlassian Start logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const AtlassianStartLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Atlassian wordmark__
+ *
+ * The Atlassian brand name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const AtlassianWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Bitbucket icon__
+ *
+ * The Bitbucket icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const BitbucketIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Bitbucket logo__
+ *
+ * The Bitbucket logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const BitbucketLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Bitbucket wordmark__
+ *
+ * The Bitbucket brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const BitbucketWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Compass icon__
+ *
+ * The Compass icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const CompassIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Compass logo__
+ *
+ * The Compass logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const CompassLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Compass wordmark__
+ *
+ * The Compass brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const CompassWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Confluence icon__
+ *
+ * The Confluence icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const ConfluenceIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Confluence logo__
+ *
+ * The Confluence logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const ConfluenceLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Confluence wordmark__
+ *
+ * The Confluence brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const ConfluenceWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Halp icon__
+ *
+ * The Halp icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const HalpIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
-}: LogoProps) => JSX.Element;
-
-export declare const HalpLogo: ({
   iconColor,
   iconGradientStart,
   iconGradientStop,
+}: LogoProps) => JSX.Element;
+
+/**
+ * __Halp logo__
+ *
+ * The Halp logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const HalpLogo: ({
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Halp wordmark__
+ *
+ * The Halp brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const HalpWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
@@ -169,12 +318,12 @@ export declare const HalpWordmark: ({
  * @deprecated HipchatIcon will be removed from @atlaskit/logo in the next major release.
  */
 export declare const HipchatIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
@@ -204,6 +353,63 @@ export declare const HipchatWordmark: ({
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Align icon__
+ *
+ * The Jira Align icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraAlignIcon: ({
+  appearance,
+  label,
+  size,
+  testId,
+  textColor,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
+}: LogoProps) => JSX.Element;
+
+/**
+ * __Jira Align logo__
+ *
+ * The Jira Align logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraAlignLogo: ({
+  appearance,
+  label,
+  size,
+  testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
+  textColor,
+}: LogoProps) => JSX.Element;
+
+/**
+ * __Jira Align wordmark__
+ *
+ * The Jira Align brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraAlignWordmark: ({
+  appearance,
+  label,
+  size,
+  testId,
+  textColor,
+}: LogoProps) => JSX.Element;
+
 /**
  * @deprecated JiraCoreIcon will be removed from @atlaskit/logo in the next major release. Please use JiraWorkManagementIcon instead.
  */
@@ -243,23 +449,43 @@ export declare const JiraCoreWordmark: ({
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira icon__
+ *
+ * The Jira icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
-}: LogoProps) => JSX.Element;
-
-export declare const JiraLogo: ({
   iconColor,
   iconGradientStart,
   iconGradientStop,
+}: LogoProps) => JSX.Element;
+
+/**
+ * __Jira logo__
+ *
+ * The Jira logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraLogo: ({
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
@@ -302,103 +528,197 @@ export declare const JiraServiceDeskWordmark: ({
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Service Management icon__
+ *
+ * The Jira Service Management icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraServiceManagementIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Service Management logo__
+ *
+ * The Jira Service Management logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraServiceManagementLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Service Management wordmark__
+ *
+ * The Jira Service Management brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraServiceManagementWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira software icon__
+ *
+ * The Jira Software icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraSoftwareIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Software logo__
+ *
+ * The Jira Software logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraSoftwareLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Software wordmark__
+ *
+ * The Jira Software brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraSoftwareWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
-}: LogoProps) => JSX.Element;
-
-export declare const JiraWordmark: ({
   iconColor,
   iconGradientStart,
   iconGradientStop,
+}: LogoProps) => JSX.Element;
+
+/**
+ * __Jira wordmark__
+ *
+ * The Jira brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const JiraWordmark: ({
+  appearance,
   label,
   size,
   testId,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Work Management icon__
+ *
+ * The Jira Work Management icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraWorkManagementIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Work Management logo__
+ *
+ * The Jira Work Management logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraWorkManagementLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Jira Work Management wordmark__
+ *
+ * The Jira Work Management brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const JiraWorkManagementWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
@@ -406,26 +726,30 @@ export declare type LogoProps = {
   /**
    * The size of the icon, uses the same sizing scheme as in `@atlaskit/icon`.
    */
-  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  size?: Size;
+  /**
+   * Choice of logo appearance between 3 brand-approved color combinations that will be hooked up to design tokens and theming.
+   */
+  appearance?: Appearance;
   /**
-   * CSS color to be applied to the wordmark portion of the logo SVG.
+   * @deprecated CSS color to be applied to the wordmark portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
    */
   textColor?: string;
   /**
-   * CSS color to be applied to the non-gradient icon portion of the logo SVG.
+   * @deprecated CSS color to be applied to the non-gradient icon portion of the logo SVG. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
    */
   iconColor?: string;
   /**
-   * CSS color to start the gradient/shadow on the icon.
+   * @deprecated CSS color to start the gradient/shadow on the icon. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
    */
   iconGradientStart?: string;
   /**
-   * CSS color to end the gradient/shadow on the icon. Should usually match iconColor to avoid
-   * rendering issues in some browsers such as Safari.
+   * @deprecated CSS color to end the gradient/shadow on the icon. Should usually match iconColor to avoid
+   * rendering issues in some browsers such as Safari. The use of this prop is not recommended as it is not compatible with design tokens; use the `appearance` prop instead.
    */
   iconGradientStop?: string;
   /**
-   * Accessible text to be used for screen readers (it's optional since defaultProps contains empty string for it).
+   * Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo).
    */
   label?: string;
   /**
@@ -448,16 +772,23 @@ export declare const OpsGenieIcon: ({
 }: LogoProps) => JSX.Element;
 
 /**
- * This is the correct seplling of Opsgenie and the icon we are moving towards after OpsGenie is deprecated correctly.
+ * __Opsgenie icon__
+ *
+ * The Opsgenie icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
  */
 export declare const OpsgenieIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
 }: LogoProps) => JSX.Element;
 
 /**
@@ -473,16 +804,23 @@ export declare const OpsGenieLogo: ({
 }: LogoProps) => JSX.Element;
 
 /**
- * This is the correct logo as it has the correct casing. Please do not use old-logo.tsx.
+ * __Opsgenie logo__
+ *
+ * The Opsgenie logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
  */
 export declare const OpsgenieLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
   textColor,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
 }: LogoProps) => JSX.Element;
 
 /**
@@ -497,42 +835,84 @@ export declare const OpsGenieWordmark: ({
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Opsgenie wordmark__
+ *
+ * The Opsgenie brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const OpsgenieWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   size,
   testId,
   textColor,
-}: LogoProps) => JSX.Element;
-
-export declare const StatuspageIcon: ({
   iconColor,
   iconGradientStart,
   iconGradientStop,
+}: LogoProps) => JSX.Element;
+
+declare type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+/**
+ * __Statuspage icon__
+ *
+ * The Statuspage icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+export declare const StatuspageIcon: ({
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Statuspage logo__
+ *
+ * The Statuspage logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const StatuspageLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Statuspage wordmark__
+ *
+ * The Statuspage brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const StatuspageWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
@@ -572,33 +952,63 @@ export declare const StrideWordmark: ({
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Trello logo__
+ *
+ * The Trello icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const TrelloIcon: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Trello logo__
+ *
+ * The Trello logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const TrelloLogo: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;
 
+/**
+ * __Trello wordmark__
+ *
+ * The Trello brand/product name styled as a logo, without an accompanying icon.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
 export declare const TrelloWordmark: ({
-  iconColor,
-  iconGradientStart,
-  iconGradientStop,
+  appearance,
   label,
   size,
   testId,
+  iconColor,
+  iconGradientStart,
+  iconGradientStop,
   textColor,
 }: LogoProps) => JSX.Element;