@atlaskit/css-reset - npm Package Compare versions

Comparing version 6.0.5 to 6.1.0

build/tsconfig.json

@@ -12,3 +12,14 @@ {
   ],
-  "exclude": ["../src/**/__tests__/*"]
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  // Most ts-node options can be specified here using their programmatic names.
+  "ts-node": {
+    // It is faster to skip typechecking.
+    "transpileOnly": true,
+    // We must load files for third party defs - https://typestrong.org/ts-node/docs/types
+    "files": true
+  }
 }

CHANGELOG.md

 # @atlaskit/css-reset
 
+## 6.1.0
+
+### Minor Changes
+
+- [`92620c3aa0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92620c3aa0d) - [ux] Reduced motion support has been added to the CSS reset.
+- [`950a744a150`](https://bitbucket.org/atlassian/atlassian-frontend/commits/950a744a150) - [ux] Color values now sourced through tokens.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.5
@@ -4,0 +15,0 @@

dist/cjs/base.js

@@ -14,16 +14,10 @@ "use strict";
 
+var _tokens = require("@atlaskit/tokens");
+
 var _evaluateInner = _interopRequireDefault(require("./utils/evaluate-inner"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: #fff;\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px #ccc dotted;\n    cursor: help;\n  }\n"], ["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: #fff;\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px #ccc dotted;\n    cursor: help;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _default = (0, _evaluateInner.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px ", " dotted;\n    cursor: help;\n  }\n"], ["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px ", " dotted;\n    cursor: help;\n  }\n"])), (0, _tokens.token)('color.background.default', '#fff'), (0, _tokens.token)('color.text.highEmphasis', _theme.colors.N800), _theme.fontFamily, (0, _theme.gridSize)() * 1.5, (0, _tokens.token)('color.text.link.resting', _theme.colors.B400), (0, _tokens.token)('color.text.link.hover', _theme.colors.B300), (0, _tokens.token)('color.text.link.pressed', _theme.colors.B500), (0, _tokens.token)('color.border.focus', _theme.colors.B100), _theme.typography.h800(), _theme.typography.h700(), _theme.typography.h600(), _theme.typography.h500(), _theme.typography.h400(), _theme.typography.h300(), (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() / 2, (0, _theme.gridSize)() / 2, (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() * 5, _theme.typography.h100(), _theme.codeFontFamily, (0, _tokens.token)('color.border.neutral', '#ccc'));
 
-  return data;
-}
-
-var _default = (0, _evaluateInner.default)(_templateObject(), _theme.colors.N800, _theme.fontFamily, (0, _theme.gridSize)() * 1.5, _theme.colors.B400, _theme.colors.B300, _theme.colors.B500, _theme.colors.B100, _theme.typography.h800(), _theme.typography.h700(), _theme.typography.h600(), _theme.typography.h500(), _theme.typography.h400(), _theme.typography.h300(), (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() / 2, (0, _theme.gridSize)() / 2, (0, _theme.gridSize)() * 5, (0, _theme.gridSize)() * 5, _theme.typography.h100(), _theme.codeFontFamily);
-
 exports.default = _default;

dist/cjs/browser-fixes.js

@@ -14,14 +14,6 @@ "use strict";
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  /* IE11 doesn't support <template> elements which shouldn't be displayed */\n  template {\n    display: none;\n  }\n\n  /* IE11 and some older browsers don't support these elements yet and treat them as display: inline; */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  main,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n\n  /* Suppress the ugly broken image styling in Firefox */\n  @-moz-document url-prefix() {\n    img {\n      font-size: 0;\n    }\n    img:-moz-broken {\n      font-size: inherit;\n    }\n  }\n\n/*\n  Chrome 83.0.4103.61 introduced a new user-agent style that broke all buttons for us. This default override reverts it.\n  chrome user agent added this => font: 400 13.3333px Arial;\n*/\nbutton {\n  font-family: inherit;\n}\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _default = (0, _evaluateInner.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* IE11 doesn't support <template> elements which shouldn't be displayed */\n  template {\n    display: none;\n  }\n\n  /* IE11 and some older browsers don't support these elements yet and treat them as display: inline; */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  main,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n\n  /* Suppress the ugly broken image styling in Firefox */\n  @-moz-document url-prefix() {\n    img {\n      font-size: 0;\n    }\n    img:-moz-broken {\n      font-size: inherit;\n    }\n  }\n\n/*\n  Chrome 83.0.4103.61 introduced a new user-agent style that broke all buttons for us. This default override reverts it.\n  chrome user agent added this => font: 400 13.3333px Arial;\n*/\nbutton {\n  font-family: inherit;\n}\n"])));
 
-  return data;
-}
-
-var _default = (0, _evaluateInner.default)(_templateObject());
-
 exports.default = _default;

dist/cjs/index.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _accessibility = _interopRequireDefault(require("./accessibility"));
+
 var _base = _interopRequireDefault(require("./base"));
@@ -21,4 +23,4 @@
 
-var _default = "\n".concat(_reset.default, "\n").concat(_base.default, "\n").concat(_tables.default, "\n").concat(_browserFixes.default, "\n").concat(_utils.default, "\n");
+var _default = "\n".concat(_reset.default, "\n").concat(_base.default, "\n").concat(_tables.default, "\n").concat(_browserFixes.default, "\n").concat(_utils.default, "\n").concat(_accessibility.default, "\n");
 
 exports.default = _default;

dist/cjs/reset.js

@@ -14,15 +14,6 @@ "use strict";
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  html,\n  body,\n  p,\n  div,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ul,\n  ol,\n  dl,\n  img,\n  pre,\n  form,\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n  img,\n  fieldset {\n    border: 0;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _default = (0, _evaluateInner.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  html,\n  body,\n  p,\n  div,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ul,\n  ol,\n  dl,\n  img,\n  pre,\n  form,\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n  img,\n  fieldset {\n    border: 0;\n  }\n"])));
 
-  return data;
-}
-
-// Reset
-var _default = (0, _evaluateInner.default)(_templateObject());
-
 exports.default = _default;

dist/cjs/tables.js

@@ -14,18 +14,10 @@ "use strict";
 
+var _tokens = require("@atlaskit/tokens");
+
 var _evaluateInner = _interopRequireDefault(require("./utils/evaluate-inner"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  table {\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  thead,\n  tbody,\n  tfoot {\n    border-bottom: ", "px solid ", ";\n  }\n\n  td,\n  th {\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n  }\n\n  th {\n    vertical-align: top;\n  }\n\n  td:first-child,\n  th:first-child {\n    padding-left: 0;\n  }\n\n  td:last-child,\n  th:last-child {\n    padding-right: 0;\n  }\n\n  caption {\n    ", "\n    margin-bottom: ", "px;\n    text-align: left;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _default = (0, _evaluateInner.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  table {\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  thead,\n  tbody,\n  tfoot {\n    border-bottom: 2px solid ", ";\n  }\n\n  td,\n  th {\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n  }\n\n  th {\n    vertical-align: top;\n  }\n\n  td:first-child,\n  th:first-child {\n    padding-left: 0;\n  }\n\n  td:last-child,\n  th:last-child {\n    padding-right: 0;\n  }\n\n  caption {\n    ", "\n    margin-bottom: ", "px;\n    text-align: left;\n  }\n"])), (0, _tokens.token)('color.border.neutral', _theme.colors.N40), (0, _theme.gridSize)() / 2, (0, _theme.gridSize)(), _theme.typography.h600(), (0, _theme.gridSize)());
 
-  return data;
-}
-
-var tableBorderWdth = 2;
-
-var _default = (0, _evaluateInner.default)(_templateObject(), tableBorderWdth, _theme.colors.N40, (0, _theme.gridSize)() / 2, (0, _theme.gridSize)(), _theme.typography.h600(), (0, _theme.gridSize)());
-
 exports.default = _default;

dist/cjs/utils.js

@@ -14,14 +14,6 @@ "use strict";
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  .assistive {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    height: 1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _default = (0, _evaluateInner.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .assistive {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    height: 1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n"])));
 
-  return data;
-}
-
-var _default = (0, _evaluateInner.default)(_templateObject());
-
 exports.default = _default;

dist/cjs/utils/evaluate-inner.js

@@ -18,3 +18,3 @@ "use strict";
  * The below code is inspired by the css function in styled components
-  https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
+ * https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
  */
@@ -71,4 +71,5 @@ function evaluateInner(styles) {
       return ruleSet;
-    }
+    } // TODO: Fix bug in lint rule, this shouldn't be an error!
 
+
     ruleSet.push(isPlainObject(chunk) ? objToCss(chunk) : chunk.toString());
@@ -80,2 +81,3 @@ return ruleSet;
 function isPlainObject(x) {
+  // TODO: Fix bug in lint rule, this shouldn't be an error!
   return (0, _typeof2.default)(x) === 'object' && x.constructor === Object;
@@ -82,0 +84,0 @@ }

dist/cjs/version.json

 {
 	"name": "@atlaskit/css-reset",
-	"version": "6.0.5"
+	"version": "6.1.0"
 }

dist/es2019/base.js

 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors, typography, gridSize, fontFamily, codeFontFamily } from '@atlaskit/theme';
+import { codeFontFamily, colors, fontFamily, gridSize, typography } from '@atlaskit/theme';
+import { token } from '@atlaskit/tokens';
 import evaluateInner from './utils/evaluate-inner';
@@ -13,4 +14,4 @@ export default evaluateInner`
   body {
-    background-color: #fff;
-    color: ${colors.N800};
+    background-color: ${token('color.background.default', '#fff')};
+    color: ${token('color.text.highEmphasis', colors.N800)};
     font-family: ${fontFamily};
@@ -45,14 +46,14 @@ font-size: 14px;
   a {
-    color: ${colors.B400};
+    color: ${token('color.text.link.resting', colors.B400)};
     text-decoration: none;
   }
   a:hover {
-    color: ${colors.B300};
+    color: ${token('color.text.link.hover', colors.B300)};
     text-decoration: underline;
   }
   a:active {
-    color: ${colors.B500};
+    color: ${token('color.text.link.pressed', colors.B500)};
   }
   a:focus {
-    outline: 2px solid ${colors.B100};
+    outline: 2px solid ${token('color.border.focus', colors.B100)};
     outline-offset: 2px;
@@ -184,5 +185,5 @@ }
   abbr {
-    border-bottom: 1px #ccc dotted;
+    border-bottom: 1px ${token('color.border.neutral', '#ccc')} dotted;
     cursor: help;
   }
 `;

dist/es2019/index.js

@@ -0,1 +1,2 @@
+import accessibility from './accessibility';
 import baseStyles from './base';
@@ -12,2 +13,3 @@ import browserFixesStyles from './browser-fixes';
 ${utilStyles}
+${accessibility}
 `;

dist/es2019/reset.js

@@ -1,4 +0,3 @@
-import css from './utils/evaluate-inner'; // Reset
-
-export default css`
+import evaluateInner from './utils/evaluate-inner';
+export default evaluateInner`
   html,
@@ -5,0 +4,0 @@ body,

dist/es2019/tables.js

 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors, gridSize, typography } from '@atlaskit/theme';
+import { token } from '@atlaskit/tokens';
 import evaluateInner from './utils/evaluate-inner';
-const tableBorderWdth = 2;
 export default evaluateInner`
@@ -15,3 +15,3 @@ table {
   tfoot {
-    border-bottom: ${tableBorderWdth}px solid ${colors.N40};
+    border-bottom: 2px solid ${token('color.border.neutral', colors.N40)};
   }
@@ -18,0 +18,0 @@

dist/es2019/utils/evaluate-inner.js

 import hyphenate from 'fbjs/lib/hyphenateStyleName';
 /**
  * The below code is inspired by the css function in styled components
-  https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
+ * https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
  */
@@ -52,4 +52,5 @@
       return ruleSet;
-    }
+    } // TODO: Fix bug in lint rule, this shouldn't be an error!
 
+
     ruleSet.push(isPlainObject(chunk) ? objToCss(chunk) : chunk.toString());
@@ -61,2 +62,3 @@ return ruleSet;
 function isPlainObject(x) {
+  // TODO: Fix bug in lint rule, this shouldn't be an error!
   return typeof x === 'object' && x.constructor === Object;
@@ -63,0 +65,0 @@ }

dist/es2019/version.json

 {
 	"name": "@atlaskit/css-reset",
-	"version": "6.0.5"
+	"version": "6.1.0"
 }

dist/esm/base.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: #fff;\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px #ccc dotted;\n    cursor: help;\n  }\n"], ["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: #fff;\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px #ccc dotted;\n    cursor: help;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors, typography, gridSize, fontFamily, codeFontFamily } from '@atlaskit/theme';
+import { codeFontFamily, colors, fontFamily, gridSize, typography } from '@atlaskit/theme';
+import { token } from '@atlaskit/tokens';
 import evaluateInner from './utils/evaluate-inner';
-export default evaluateInner(_templateObject(), colors.N800, fontFamily, gridSize() * 1.5, colors.B400, colors.B300, colors.B500, colors.B100, typography.h800(), typography.h700(), typography.h600(), typography.h500(), typography.h400(), typography.h300(), gridSize() * 5, gridSize() * 5, gridSize() / 2, gridSize() / 2, gridSize() * 5, gridSize() * 5, typography.h100(), codeFontFamily);
+export default evaluateInner(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px ", " dotted;\n    cursor: help;\n  }\n"], ["\n  body,\n  html {\n    height: 100%;\n    width: 100%;\n  }\n\n  body {\n    background-color: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    -ms-overflow-style: -ms-autohiding-scrollbar;\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Default margins */\n  p,\n  ul,\n  ol,\n  dl,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  blockquote,\n  pre,\n  form,\n  table {\n    margin: ", "px 0 0 0;\n  }\n\n  /* Links */\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n  a:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n  a:active {\n    color: ", ";\n  }\n  a:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  /* Headings */\n  h1 {\n    ", "\n  }\n  h2 {\n    ", "\n  }\n  h3 {\n    ", "\n  }\n  h4 {\n    ", "\n  }\n  h5 {\n    ", "\n  }\n  h6 {\n    ", "\n  }\n\n  /* Lists */\n  ul,\n  ol,\n  dl {\n    padding-left: ", "px;\n  }\n  [dir='rtl']ul,\n  [dir='rtl']ol,\n  [dir='rtl']dl {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  dd,\n  dd + dt,\n  li + li {\n    margin-top: ", "px;\n  }\n  ul ul:not(:first-child),\n  ol ul:not(:first-child),\n  ul ol:not(:first-child),\n  ol ol:not(:first-child) {\n    margin-top: ", "px;\n  }\n\n  /* remove top margin for first element */\n  p:first-child,\n  ul:first-child,\n  ol:first-child,\n  dl:first-child,\n  h1:first-child,\n  h2:first-child,\n  h3:first-child,\n  h4:first-child,\n  h5:first-child,\n  h6:first-child,\n  blockquote:first-child,\n  pre:first-child,\n  form:first-child,\n  table:first-child {\n    margin-top: 0;\n  }\n\n  /* Quotes */\n  blockquote,\n  q {\n    color: inherit;\n  }\n  blockquote {\n    border: none;\n    padding-left: ", "px;\n  }\n  [dir='rtl'] blockquote {\n    padding-left: 0;\n    padding-right: ", "px;\n  }\n\n  blockquote::before,\n  q::before {\n    content: '\\\\201C';\n  }\n\n  blockquote::after,\n  q::after {\n    content: '\\\\201D';\n  }\n\n  blockquote::before {\n    float: left;\n    /* to keep the quotes left of any child elements like blockquote > p */\n    margin-left: -1em;\n    text-align: right;\n    width: 1em;\n  }\n  [dir='rtl'] blockquote::before {\n    float: right;\n    margin-right: -1em;\n    text-align: left;\n  }\n\n  blockquote > :last-child {\n    display: inline-block; /* so the quotes added via pseudos follow it immediately. */\n  }\n\n  /* Other typographical elements */\n  small {\n    ", "\n    font-weight: normal;\n  }\n\n  code,\n  kbd {\n    font-family: ", ";\n  }\n\n  var,\n  address,\n  dfn,\n  cite {\n    font-style: italic;\n  }\n\n  abbr {\n    border-bottom: 1px ", " dotted;\n    cursor: help;\n  }\n"])), token('color.background.default', '#fff'), token('color.text.highEmphasis', colors.N800), fontFamily, gridSize() * 1.5, token('color.text.link.resting', colors.B400), token('color.text.link.hover', colors.B300), token('color.text.link.pressed', colors.B500), token('color.border.focus', colors.B100), typography.h800(), typography.h700(), typography.h600(), typography.h500(), typography.h400(), typography.h300(), gridSize() * 5, gridSize() * 5, gridSize() / 2, gridSize() / 2, gridSize() * 5, gridSize() * 5, typography.h100(), codeFontFamily, token('color.border.neutral', '#ccc'));

dist/esm/browser-fixes.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  /* IE11 doesn't support <template> elements which shouldn't be displayed */\n  template {\n    display: none;\n  }\n\n  /* IE11 and some older browsers don't support these elements yet and treat them as display: inline; */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  main,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n\n  /* Suppress the ugly broken image styling in Firefox */\n  @-moz-document url-prefix() {\n    img {\n      font-size: 0;\n    }\n    img:-moz-broken {\n      font-size: inherit;\n    }\n  }\n\n/*\n  Chrome 83.0.4103.61 introduced a new user-agent style that broke all buttons for us. This default override reverts it.\n  chrome user agent added this => font: 400 13.3333px Arial;\n*/\nbutton {\n  font-family: inherit;\n}\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 import evaluateInner from './utils/evaluate-inner';
-export default evaluateInner(_templateObject());
+export default evaluateInner(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* IE11 doesn't support <template> elements which shouldn't be displayed */\n  template {\n    display: none;\n  }\n\n  /* IE11 and some older browsers don't support these elements yet and treat them as display: inline; */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  main,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n\n  /* Suppress the ugly broken image styling in Firefox */\n  @-moz-document url-prefix() {\n    img {\n      font-size: 0;\n    }\n    img:-moz-broken {\n      font-size: inherit;\n    }\n  }\n\n/*\n  Chrome 83.0.4103.61 introduced a new user-agent style that broke all buttons for us. This default override reverts it.\n  chrome user agent added this => font: 400 13.3333px Arial;\n*/\nbutton {\n  font-family: inherit;\n}\n"])));

dist/esm/index.js

@@ -0,1 +1,2 @@
+import accessibility from './accessibility';
 import baseStyles from './base';
@@ -6,2 +7,2 @@ import browserFixesStyles from './browser-fixes';
 import utilStyles from './utils';
-export default "\n".concat(resetStyles, "\n").concat(baseStyles, "\n").concat(tableStyles, "\n").concat(browserFixesStyles, "\n").concat(utilStyles, "\n");
+export default "\n".concat(resetStyles, "\n").concat(baseStyles, "\n").concat(tableStyles, "\n").concat(browserFixesStyles, "\n").concat(utilStyles, "\n").concat(accessibility, "\n");

dist/esm/reset.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  html,\n  body,\n  p,\n  div,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ul,\n  ol,\n  dl,\n  img,\n  pre,\n  form,\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n  img,\n  fieldset {\n    border: 0;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import css from './utils/evaluate-inner'; // Reset
-
-export default css(_templateObject());
+import evaluateInner from './utils/evaluate-inner';
+export default evaluateInner(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  html,\n  body,\n  p,\n  div,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  ul,\n  ol,\n  dl,\n  img,\n  pre,\n  form,\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n  img,\n  fieldset {\n    border: 0;\n  }\n"])));

dist/esm/tables.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  table {\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  thead,\n  tbody,\n  tfoot {\n    border-bottom: ", "px solid ", ";\n  }\n\n  td,\n  th {\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n  }\n\n  th {\n    vertical-align: top;\n  }\n\n  td:first-child,\n  th:first-child {\n    padding-left: 0;\n  }\n\n  td:last-child,\n  th:last-child {\n    padding-right: 0;\n  }\n\n  caption {\n    ", "\n    margin-bottom: ", "px;\n    text-align: left;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors, gridSize, typography } from '@atlaskit/theme';
+import { token } from '@atlaskit/tokens';
 import evaluateInner from './utils/evaluate-inner';
-var tableBorderWdth = 2;
-export default evaluateInner(_templateObject(), tableBorderWdth, colors.N40, gridSize() / 2, gridSize(), typography.h600(), gridSize());
+export default evaluateInner(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  table {\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  thead,\n  tbody,\n  tfoot {\n    border-bottom: 2px solid ", ";\n  }\n\n  td,\n  th {\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n  }\n\n  th {\n    vertical-align: top;\n  }\n\n  td:first-child,\n  th:first-child {\n    padding-left: 0;\n  }\n\n  td:last-child,\n  th:last-child {\n    padding-right: 0;\n  }\n\n  caption {\n    ", "\n    margin-bottom: ", "px;\n    text-align: left;\n  }\n"])), token('color.border.neutral', colors.N40), gridSize() / 2, gridSize(), typography.h600(), gridSize());

dist/esm/utils.js

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  .assistive {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    height: 1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 import evaluateInner from './utils/evaluate-inner';
-export default evaluateInner(_templateObject());
+export default evaluateInner(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .assistive {\n    border: 0 !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    height: 1px !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    width: 1px !important;\n    white-space: nowrap !important;\n  }\n"])));

dist/esm/utils/evaluate-inner.js

@@ -6,3 +6,3 @@ import _typeof from "@babel/runtime/helpers/typeof";
  * The below code is inspired by the css function in styled components
-  https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
+ * https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
  */
@@ -60,4 +60,5 @@
       return ruleSet;
-    }
+    } // TODO: Fix bug in lint rule, this shouldn't be an error!
 
+
     ruleSet.push(isPlainObject(chunk) ? objToCss(chunk) : chunk.toString());
@@ -69,2 +70,3 @@ return ruleSet;
 function isPlainObject(x) {
+  // TODO: Fix bug in lint rule, this shouldn't be an error!
   return _typeof(x) === 'object' && x.constructor === Object;
@@ -71,0 +73,0 @@ }

dist/esm/version.json

 {
 	"name": "@atlaskit/css-reset",
-	"version": "6.0.5"
+	"version": "6.1.0"
 }

dist/types/utils/evaluate-inner.d.ts

 /**
  * The below code is inspired by the css function in styled components
-  https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
+ * https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/types.js
  */
 export default function evaluateInner(styles: TemplateStringsArray, ...interpolations: any[]): string;

package.json

 {
   "name": "@atlaskit/css-reset",
-  "version": "6.0.5",
+  "version": "6.1.0",
   "description": "Base stylesheet for ADG",
@@ -15,7 +15,6 @@ "publishConfig": {
   "types": "dist/types/index.d.ts",
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlaskit:designLink": "https://atlassian.design/guidelines/product/overview",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -26,8 +25,18 @@ "website": {
   },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./accessibility": "./src/accessibility.tsx",
+    "./base": "./src/base.tsx",
+    "./browser-fixes": "./src/browser-fixes.tsx",
+    "./reset": "./src/reset.tsx",
+    "./tables": "./src/tables.tsx",
+    "./utils": "./src/utils.tsx"
+  },
   "scripts": {
-    "build-css": "ts-node --compiler-options='{ \"module\": \"CommonJS\", \"allowJs\": true }' build/js-to-css.ts",
+    "build-css": "ts-node --compiler-options='{ \"module\": \"CommonJS\" }' -P ./tsconfig.json build/js-to-css.tsx",
     "ak-postbuild": "yarn build-css"
   },
   "dependencies": {
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/tokens": "^0.0.17",
     "@babel/runtime": "^7.0.0",
@@ -41,4 +50,7 @@ "fbjs": "^3.0.0"
     "@atlaskit/docs": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "mkdirp": "^0.5.1",
-    "ts-node": "^6.1.1",
+    "ts-node": "^10.0.0",
+    "tsconfig-paths": "^3.9.0",
     "typescript": "3.9.6"
@@ -50,3 +62,15 @@ },
     "ui"
-  ]
+  ],
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "ui-components": "lite-mode",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

tsconfig.json

 {
   "extends": "../../../tsconfig.json",
   "include": [
-    "./src/**/*.ts",
+    "__tests__",
+    "./build/*.tsx",
     "./src/**/*.tsx",
-    "./docs/**/*.ts",
     "./docs/**/*.tsx",
-    "./examples/**/*.ts",
     "./examples/**/*.tsx"
@@ -13,3 +12,12 @@ ],
     "baseUrl": "./"
+  },
+  // Most ts-node options can be specified here using their programmatic names.
+  "ts-node": {
+    // It is faster to skip typechecking.
+    "transpileOnly": true,
+    // We must load files for third party defs - https://typestrong.org/ts-node/docs/types
+    "files": true,
+    // This enables accessing af entrypoints in a node environment before they've been built.
+    "require": ["tsconfig-paths/register"]
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

64404

increased by8.81%

Number of package files

49

increased by11.36%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

7

increased by75%

Lines of code

1108

decreased by-4.81%

Dependency changes

• + Added@atlaskit/tokens@^0.0.17

• + Added@atlaskit/tokens@0.0.17(transitive)

• Updated@atlaskit/theme@^11.4.0