@atlaskit/smart-card 18.0.15 → 18.0.16

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -6,7 +6,8 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
 import { IconType } from '../../../../../constants';
-// prettier-ignore
+import { token } from '@atlaskit/tokens'; // prettier-ignore
+
 var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMapper, IconType.Archive, function () {
   return import(
   /* webpackChunkName: "glyphArchive" */
@@ -295,10 +296,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
         iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case IconType.Error:
@@ -306,7 +311,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       });
 
     default:

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -6,8 +6,9 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import ImageLoader from 'react-render-image';
+import { token } from '@atlaskit/tokens';
 var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -16,6 +16,7 @@ var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateL
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
 

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -85,7 +86,7 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",
           size: "small",
-          primaryColor: R300
+          primaryColor: token('color.icon.danger', R300)
         })),
         title: this.renderMessage()
       }));

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { R400, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -24,7 +25,7 @@ import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardForbiddenView, _React$Component);
@@ -113,7 +114,7 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         title: this.renderMessage(),
-        titleColor: N500
+        titleColor: token('color.text.subtle', N500)
       }));
     }
   }]);

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -3,24 +3,24 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from '@emotion/styled';
-import { B100, B400, B50, N20 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { e100 } from '@atlaskit/theme/elevation';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 import { TitleWrapperClassName } from '../IconAndTitleLayout/styled';
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(token('color.border.selected', B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
     return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat(themed({
-      light: N20,
-      dark: BACKGROUND_COLOR_DARK
+      light: token('color.background.neutral.subtle.hovered', N20),
+      dark: token('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat(themed({
-      light: B50,
-      dark: BACKGROUND_COLOR_DARK
+      light: token('color.background.selected', B50),
+      dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
   } else {
     return '';
@@ -55,18 +55,21 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
   return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
 }, akBorderRadius(), themed({
-  light: B400,
-  dark: '#4794FF'
+  light: token('color.link', B400),
+  dark: token('color.link', '#4794FF')
 }), function (props) {
   return props.withoutBackground ? '' : themed({
-    light: 'white',
-    dark: BACKGROUND_COLOR_DARK
+    light: token('elevation.surface.raised', 'white'),
+    dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
   });
 }, function (props) {
-  return props.withoutBackground ? '' : e100();
+  return props.withoutBackground ? '' : themed({
+    light: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A)), ";"),
+    dark: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A)), ";")
+  });
 }, function (props) {
   return isInteractive(props);
 }, function (props) {

package/dist/esm/view/InlineCard/Icon.js

@@ -4,6 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
 var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
@@ -15,4 +16,4 @@ export var Icon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemp
 // TODO: Replace this override with proper AtlasKit solution.
 
 export var AKIconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));
-export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);

package/dist/esm/view/InlineCard/UnauthorisedView/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import Button from '@atlaskit/button/custom-theme-button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { N500, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
@@ -23,7 +24,7 @@ import { IconStyledButton, LinkAppearance } from '../styled';
 var FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardUnauthorizedView, _React$Component);
@@ -83,7 +84,7 @@ export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component)
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
         title: this.renderMessage(),
-        titleColor: N500
+        titleColor: token('color.text.subtle', N500)
       }));
     }
   }]);

package/dist/esm/view/InlineCard/styled.js

@@ -5,16 +5,17 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
 export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
-  light: N200,
-  dark: LINK_COLOR_DARK
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', LINK_COLOR_DARK)
 }));
 export var LowercaseAppearance = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-transform: lowercase;\n"])));
 export var LinkAppearance = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
-  light: B400,
-  dark: LINK_COLOR_DARK
+  light: token('color.link', B400),
+  dark: token('color.link', LINK_COLOR_DARK)
 }));

package/dist/esm/view/common/Byline.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs, mq } from './utils';
 export var Byline = function Byline(_ref) {
   var text = _ref.text,
@@ -11,7 +12,7 @@ export var Byline = function Byline(_ref) {
     css: mq({
       fontSize: gs(1.5),
       lineHeight: gs(2.5),
-      color: "".concat(N300),
+      color: "".concat(token('color.text.subtlest', N300)),
       fontWeight: 'normal',
       marginTop: gs(0.5),
       // Spec: only allow two lines MAX to be shown.

package/dist/esm/view/common/Metadata.js

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var Metadata = function Metadata(_ref) {
   var text = _ref.text,
       icon = _ref.icon,
@@ -29,7 +30,7 @@ export var Metadata = function Metadata(_ref) {
   }, metadataIcon, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: "".concat(N300),
+      color: "".concat(token('color.text.subtlest', N300)),
       marginRight: gs(0.5),
       marginLeft: '2px'
     }

package/dist/esm/view/common/ModalHeader.js

@@ -6,6 +6,7 @@ import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N100, N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { FormattedMessage } from 'react-intl-next';
 import { gs } from './utils';
 import { Icon } from './Icon';
@@ -42,7 +43,7 @@ export var Header = function Header(_ref) {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'baseline',
-      borderBottom: "1px solid ".concat(N30A)
+      borderBottom: "1px solid ".concat(token('color.border', N30A))
     }
   }, jsx("div", {
     css: {
@@ -59,7 +60,7 @@ export var Header = function Header(_ref) {
     }
   }, jsx("h3", null, title), jsx("div", {
     css: {
-      color: N100
+      color: token('color.text.subtlest', N100)
     }
   }, metadata.items.length && jsx(MetadataList, {
     items: metadata.items

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.15",
+  "version": "18.0.16",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -125,5 +125,10 @@
     "./hooks": "./src/hooks.ts",
     ".": "./src/index.ts"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  }
 }