@atlaskit/form 8.11.13 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/form
 
+## 9.0.0
+
+### Major Changes
+
+- [#41791](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41791) [`ec7c2a38247`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec7c2a38247) - Removed all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and InlineMessage components.
+
 ## 8.11.13
 
 ### Patch Changes

package/dist/cjs/form-header.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
@@ -13,15 +12,15 @@ var _typography = require("@atlaskit/theme/typography");
 var fontFamily = (0, _constants.fontFamily)();
 var formHeaderContentStyles = (0, _react.css)({
   minWidth: '100%',
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formHeaderDescriptionStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formHeaderTitleStyles = (0, _react.css)({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -30,12 +29,6 @@ var formHeaderWrapperStyles = (0, _react.css)({
   fontFamily: "".concat(fontFamily)
 });
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH700Styles = (0, _react.css)((0, _typography.h700)({
-  theme: {
-    mode: 'dark'
-  }
-}));
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
@@ -56,10 +49,8 @@ var FormHeaderDescription = exports.FormHeaderDescription = function FormHeaderD
 };
 var FormHeaderTitle = exports.FormHeaderTitle = function FormHeaderTitle(_ref3) {
   var children = _ref3.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("h2", {
-    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+    css: [lightH700Styles, formHeaderTitleStyles]
   }, children);
 };
 var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {

package/dist/cjs/form-section.js

@@ -5,23 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
 var formSectionDescriptionStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formSectionTitleStyles = (0, _react.css)({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-space-400, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var formSectionWrapperStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-300, 24px)"
+  marginBlockStart: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -30,12 +29,6 @@ var lightH600Styles = (0, _react.css)((0, _typography.h600)({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH600Styles = (0, _react.css)((0, _typography.h600)({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
@@ -44,10 +37,8 @@ var FormSectionWrapper = function FormSectionWrapper(_ref) {
 };
 var FormSectionTitle = function FormSectionTitle(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("h3", {
-    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+    css: [formSectionTitleStyles, lightH600Styles]
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref3) {

package/dist/cjs/label.js

@@ -6,40 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Legend = exports.Label = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
 var fontFamily = (0, _constants.fontFamily)();
-var fieldsetLabelStyles = (0, _react.css)({
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var fieldsetLabelStyles = (0, _react.css)([(0, _typography.h200)({
+  theme: {
+    mode: 'light'
+  }
+}), {
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
+  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   fontFamily: fontFamily
-});
-var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
-  return (0, _react.css)([(0, _typography.h200)({
-    theme: {
-      mode: mode
-    }
-  }), {
-    color: (0, _components.themed)({
-      dark: "var(--ds-text-subtle, ".concat(_colors.DN300, ")"),
-      light: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
-    })({
-      theme: {
-        mode: mode
-      }
-    })
-  }]);
-};
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var lightH200Styles = getFieldsetLabelDynamicStyles('light');
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
+}]);
 
 /**
  * __Label__
@@ -54,10 +37,8 @@ var Label = exports.Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
+    css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
@@ -71,10 +52,8 @@ var Label = exports.Label = function Label(_ref) {
  */
 var Legend = exports.Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme2 = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme2.mode;
   return (0, _react.jsx)("legend", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+    css: fieldsetLabelStyles
   }, children);
 };
 var _default = exports.default = Label;

package/dist/cjs/messages.js

@@ -9,7 +9,6 @@ var _react = require("@emotion/react");
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _fieldIdContext = require("./field-id-context");
@@ -31,18 +30,12 @@ var lightH200Styles = (0, _react.css)((0, _typography.h200)({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH200Styles = (0, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var messageStyles = (0, _react.css)({
   display: 'flex',
-  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: "".concat(fontFamily),
-  fontWeight: 'normal'
+  fontWeight: 'normal',
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 var messageAppearanceStyles = {
   default: (0, _react.css)({
@@ -80,8 +73,6 @@ var Message = function Message(_ref2) {
     appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
     fieldId = _ref2.fieldId,
     testId = _ref2.testId;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var icon = messageIcons[appearance];
 
   /**
@@ -94,7 +85,7 @@ var Message = function Message(_ref2) {
    */
   var content = typeof children === 'string' ? children : (0, _react.jsx)("span", null, children);
   return (0, _react.jsx)("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
+    css: [lightH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
     "aria-live": "polite"

package/dist/es2019/form-header.js

@@ -1,21 +1,20 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
 const formHeaderContentStyles = css({
   minWidth: '100%',
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 const formHeaderDescriptionStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 const formHeaderTitleStyles = css({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -24,12 +23,6 @@ const formHeaderWrapperStyles = css({
   fontFamily: `${fontFamily}`
 });
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const darkH700Styles = css(h700({
-  theme: {
-    mode: 'dark'
-  }
-}));
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH700Styles = css(h700({
   theme: {
@@ -53,11 +46,8 @@ const FormHeaderDescription = ({
 const FormHeaderTitle = ({
   children
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("h2", {
-    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+    css: [lightH700Styles, formHeaderTitleStyles]
   }, children);
 };
 const FormHeaderWrapper = ({

package/dist/es2019/form-section.js

@@ -1,21 +1,20 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';
 const formSectionDescriptionStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 const formSectionTitleStyles = css({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-space-400, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 const formSectionWrapperStyles = css({
-  marginTop: "var(--ds-space-300, 24px)"
+  marginBlockStart: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -24,12 +23,6 @@ const lightH600Styles = css(h600({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const darkH600Styles = css(h600({
-  theme: {
-    mode: 'dark'
-  }
-}));
 const FormSectionWrapper = ({
   children
 }) => {
@@ -40,11 +33,8 @@ const FormSectionWrapper = ({
 const FormSectionTitle = ({
   children
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("h3", {
-    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+    css: [formSectionTitleStyles, lightH600Styles]
   }, children);
 };
 const FormSectionDescription = ({

package/dist/es2019/label.js

@@ -1,38 +1,23 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { DN300, N200 } from '@atlaskit/theme/colors';
-import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { N200 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
-const fieldsetLabelStyles = css({
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const fieldsetLabelStyles = css([h200({
+  theme: {
+    mode: 'light'
+  }
+}), {
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
+  color: `var(--ds-text-subtle, ${N200})`,
   fontFamily: fontFamily
-});
-const getFieldsetLabelDynamicStyles = mode => css([h200({
-  theme: {
-    mode
-  }
-}), {
-  color: themed({
-    dark: `var(--ds-text-subtle, ${DN300})`,
-    light: `var(--ds-text-subtle, ${N200})`
-  })({
-    theme: {
-      mode
-    }
-  })
 }]);
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const lightH200Styles = getFieldsetLabelDynamicStyles('light');
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
-
 /**
  * __Label__
  *
@@ -47,11 +32,8 @@ export const Label = ({
   id,
   testId
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
+    css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
@@ -66,11 +48,8 @@ export const Label = ({
 export const Legend = ({
   children
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("legend", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+    css: fieldsetLabelStyles
   }, children);
 };
 export default Label;

package/dist/es2019/messages.js

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field-id-context';
@@ -25,18 +24,12 @@ const lightH200Styles = css(h200({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
 const messageStyles = css({
   display: 'flex',
-  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: `${fontFamily}`,
-  fontWeight: 'normal'
+  fontWeight: 'normal',
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 const messageAppearanceStyles = {
   default: css({
@@ -75,9 +68,6 @@ const Message = ({
   fieldId,
   testId
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   const icon = messageIcons[appearance];
 
   /**
@@ -90,7 +80,7 @@ const Message = ({
    */
   const content = typeof children === 'string' ? children : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
+    css: [lightH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
     "aria-live": "polite"

package/dist/esm/form-header.js

@@ -1,21 +1,20 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
 var formHeaderContentStyles = css({
   minWidth: '100%',
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formHeaderDescriptionStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formHeaderTitleStyles = css({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-font-lineHeight-500, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -24,12 +23,6 @@ var formHeaderWrapperStyles = css({
   fontFamily: "".concat(fontFamily)
 });
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH700Styles = css(h700({
-  theme: {
-    mode: 'dark'
-  }
-}));
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH700Styles = css(h700({
   theme: {
@@ -50,10 +43,8 @@ var FormHeaderDescription = function FormHeaderDescription(_ref2) {
 };
 var FormHeaderTitle = function FormHeaderTitle(_ref3) {
   var children = _ref3.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("h2", {
-    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+    css: [lightH700Styles, formHeaderTitleStyles]
   }, children);
 };
 var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {

package/dist/esm/form-section.js

@@ -1,21 +1,20 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';
 var formSectionDescriptionStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
+  marginBlockStart: "var(--ds-space-100, 8px)"
 });
 var formSectionTitleStyles = css({
-  marginTop: 0,
-  marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-space-400, 32px)",
+  marginBlockStart: 0,
+  marginInlineEnd: "var(--ds-space-400, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var formSectionWrapperStyles = css({
-  marginTop: "var(--ds-space-300, 24px)"
+  marginBlockStart: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -24,12 +23,6 @@ var lightH600Styles = css(h600({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH600Styles = css(h600({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
   return jsx("div", {
@@ -38,10 +31,8 @@ var FormSectionWrapper = function FormSectionWrapper(_ref) {
 };
 var FormSectionTitle = function FormSectionTitle(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("h3", {
-    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+    css: [formSectionTitleStyles, lightH600Styles]
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref3) {

package/dist/esm/label.js

@@ -1,39 +1,22 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { DN300, N200 } from '@atlaskit/theme/colors';
-import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { N200 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
-var fieldsetLabelStyles = css({
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var fieldsetLabelStyles = css([h200({
+  theme: {
+    mode: 'light'
+  }
+}), {
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
+  color: "var(--ds-text-subtle, ".concat(N200, ")"),
   fontFamily: fontFamily
-});
-var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
-  return css([h200({
-    theme: {
-      mode: mode
-    }
-  }), {
-    color: themed({
-      dark: "var(--ds-text-subtle, ".concat(DN300, ")"),
-      light: "var(--ds-text-subtle, ".concat(N200, ")")
-    })({
-      theme: {
-        mode: mode
-      }
-    })
-  }]);
-};
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var lightH200Styles = getFieldsetLabelDynamicStyles('light');
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
+}]);
 
 /**
  * __Label__
@@ -48,10 +31,8 @@ export var Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
+    css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
@@ -65,10 +46,8 @@ export var Label = function Label(_ref) {
  */
 export var Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  var _useGlobalTheme2 = useGlobalTheme(),
-    mode = _useGlobalTheme2.mode;
   return jsx("legend", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+    css: fieldsetLabelStyles
   }, children);
 };
 export default Label;

package/dist/esm/messages.js

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field-id-context';
@@ -25,18 +24,12 @@ var lightH200Styles = css(h200({
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
 var messageStyles = css({
   display: 'flex',
-  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: "".concat(fontFamily),
-  fontWeight: 'normal'
+  fontWeight: 'normal',
+  marginBlockStart: "var(--ds-space-050, 4px)"
 });
 var messageAppearanceStyles = {
   default: css({
@@ -74,8 +67,6 @@ var Message = function Message(_ref2) {
     appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
     fieldId = _ref2.fieldId,
     testId = _ref2.testId;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var icon = messageIcons[appearance];
 
   /**
@@ -88,7 +79,7 @@ var Message = function Message(_ref2) {
    */
   var content = typeof children === 'string' ? children : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
+    css: [lightH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
     "aria-live": "polite"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.13",
+  "version": "9.0.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -44,8 +44,8 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^16.10.0",
-    "@atlaskit/checkbox": "^12.6.0",
+    "@atlaskit/button": "^16.13.0",
+    "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/select": "^16.7.0",