@atlaskit/heading 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/heading.partial.js +59 -38
  3. package/dist/es2019/heading.partial.js +60 -35
  4. package/dist/esm/heading.partial.js +59 -35
  5. package/dist/types/heading.partial.d.ts +21 -31
  6. package/dist/types-ts4.5/heading.partial.d.ts +21 -31
  7. package/package.json +5 -5
  8. package/scripts/codegen.tsx +6 -4
  9. package/dist/cjs/heading.partial.compiled.css +0 -13
  10. package/dist/es2019/heading.partial.compiled.css +0 -13
  11. package/dist/esm/heading.partial.compiled.css +0 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 4.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 4.0.0
4
10
 
5
11
  ### Major Changes
package/dist/cjs/heading.partial.js CHANGED
@@ -1,21 +1,20 @@
1
- /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
2
1
  "use strict";
3
2
 
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
4
  Object.defineProperty(exports, "__esModule", {
7
5
  value: true
8
6
  });
9
7
  exports.default = void 0;
10
- require("./heading.partial.compiled.css");
11
- var React = _interopRequireWildcard(require("react"));
12
- var _runtime = require("@compiled/react/runtime");
13
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = require("@emotion/react");
14
10
  var _primitives = require("@atlaskit/primitives");
15
11
  var _headingContext = require("./heading-context");
16
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ /**
13
+ * @jsxRuntime classic
14
+ * @jsx jsx
15
+ */
18
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
+
19
18
  var sizeTagMap = {
20
19
  xxlarge: 'h1',
21
20
  xlarge: 'h1',
@@ -25,34 +24,12 @@ var sizeTagMap = {
25
24
  xsmall: 'h5',
26
25
  xxsmall: 'h6'
27
26
  };
28
- var styles = {
29
- root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
30
- };
31
- var headingColorStylesMap = {
32
- 'color.text': "_syaz1fxt",
33
- 'color.text.inverse': "_syaz15cr",
34
- 'color.text.warning.inverse': "_syazal3n"
35
- };
36
-
37
- /**
38
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
39
- * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
40
- * @codegenId typography
41
- * @codegenCommand yarn workspace @atlaskit/heading codegen
42
- */
43
- var headingSizeStylesMap = {
44
- xxlarge: "_11c813hg",
45
- xlarge: "_11c8iyik",
46
- large: "_11c81p5s",
47
- medium: "_11c8o0gd",
48
- small: "_11c81bk4",
49
- xsmall: "_11c81il0",
50
- xxsmall: "_11c816g6"
51
- };
52
- /**
53
- * @codegenEnd
54
- */
55
-
27
+ var headingResetStyles = (0, _react.css)({
28
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
29
+ letterSpacing: 'normal',
30
+ marginBlock: 0,
31
+ textTransform: 'none'
32
+ });
56
33
  var useColor = function useColor(colorProp) {
57
34
  var surface = (0, _primitives.UNSAFE_useSurface)();
58
35
 
@@ -89,7 +66,7 @@ var Heading = function Heading(_ref) {
89
66
  }
90
67
 
91
68
  // Technically size can be undefined here due to how the types work.
92
- // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
69
+ // Once removing the level prop this assertion can be removed since size will be a required prop.
93
70
  var _useHeading = (0, _headingContext.useHeading)(sizeTagMap[size]),
94
71
  _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
95
72
  hLevel = _useHeading2[0],
@@ -97,12 +74,56 @@ var Heading = function Heading(_ref) {
97
74
  var Component = as || inferredElement;
98
75
  var needsAriaRole = Component === 'div' && hLevel;
99
76
  var color = useColor(colorProp);
100
- return /*#__PURE__*/React.createElement(Component, {
77
+ return (0, _react.jsx)(Component, {
101
78
  id: id,
102
79
  "data-testid": testId,
103
80
  role: needsAriaRole ? 'heading' : undefined,
104
81
  "aria-level": needsAriaRole ? hLevel : undefined,
105
- className: (0, _runtime.ax)([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
82
+ css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
106
83
  }, children);
107
84
  };
85
+ var headingColorStylesMap = {
86
+ 'color.text': (0, _react.css)({
87
+ color: "var(--ds-text, #172B4D)"
88
+ }),
89
+ 'color.text.inverse': (0, _react.css)({
90
+ color: "var(--ds-text-inverse, #FFFFFF)"
91
+ }),
92
+ 'color.text.warning.inverse': (0, _react.css)({
93
+ color: "var(--ds-text-warning-inverse, #172B4D)"
94
+ })
95
+ };
96
+
97
+ /**
98
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
99
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
100
+ * @codegenId typography
101
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
102
+ */
103
+ var headingSizeStylesMap = {
104
+ xxlarge: (0, _react.css)({
105
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
106
+ }),
107
+ xlarge: (0, _react.css)({
108
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
109
+ }),
110
+ large: (0, _react.css)({
111
+ font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
112
+ }),
113
+ medium: (0, _react.css)({
114
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
115
+ }),
116
+ small: (0, _react.css)({
117
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
118
+ }),
119
+ xsmall: (0, _react.css)({
120
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
121
+ }),
122
+ xxsmall: (0, _react.css)({
123
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
124
+ })
125
+ };
126
+ /**
127
+ * @codegenEnd
128
+ */
108
129
  var _default = exports.default = Heading;
package/dist/es2019/heading.partial.js CHANGED
@@ -1,8 +1,10 @@
1
- /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
- import "./heading.partial.compiled.css";
4
- import * as React from 'react';
5
- import { ax, ix } from "@compiled/react/runtime";
6
+
7
+ import { css, jsx } from '@emotion/react';
6
8
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
7
9
  import { useHeading } from './heading-context';
8
10
  const sizeTagMap = {
@@ -14,34 +16,12 @@ const sizeTagMap = {
14
16
  xsmall: 'h5',
15
17
  xxsmall: 'h6'
16
18
  };
17
- const styles = {
18
- root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
19
- };
20
- const headingColorStylesMap = {
21
- 'color.text': "_syaz1fxt",
22
- 'color.text.inverse': "_syaz15cr",
23
- 'color.text.warning.inverse': "_syazal3n"
24
- };
25
-
26
- /**
27
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
28
- * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
29
- * @codegenId typography
30
- * @codegenCommand yarn workspace @atlaskit/heading codegen
31
- */
32
- const headingSizeStylesMap = {
33
- xxlarge: "_11c813hg",
34
- xlarge: "_11c8iyik",
35
- large: "_11c81p5s",
36
- medium: "_11c8o0gd",
37
- small: "_11c81bk4",
38
- xsmall: "_11c81il0",
39
- xxsmall: "_11c816g6"
40
- };
41
- /**
42
- * @codegenEnd
43
- */
44
-
19
+ const headingResetStyles = css({
20
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
21
+ letterSpacing: 'normal',
22
+ marginBlock: 0,
23
+ textTransform: 'none'
24
+ });
45
25
  const useColor = colorProp => {
46
26
  const surface = UNSAFE_useSurface();
47
27
 
@@ -79,17 +59,62 @@ const Heading = ({
79
59
  }
80
60
 
81
61
  // Technically size can be undefined here due to how the types work.
82
- // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
62
+ // Once removing the level prop this assertion can be removed since size will be a required prop.
83
63
  const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
84
64
  const Component = as || inferredElement;
85
65
  const needsAriaRole = Component === 'div' && hLevel;
86
66
  const color = useColor(colorProp);
87
- return /*#__PURE__*/React.createElement(Component, {
67
+ return jsx(Component, {
88
68
  id: id,
89
69
  "data-testid": testId,
90
70
  role: needsAriaRole ? 'heading' : undefined,
91
71
  "aria-level": needsAriaRole ? hLevel : undefined,
92
- className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
72
+ css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
93
73
  }, children);
94
74
  };
75
+ const headingColorStylesMap = {
76
+ 'color.text': css({
77
+ color: "var(--ds-text, #172B4D)"
78
+ }),
79
+ 'color.text.inverse': css({
80
+ color: "var(--ds-text-inverse, #FFFFFF)"
81
+ }),
82
+ 'color.text.warning.inverse': css({
83
+ color: "var(--ds-text-warning-inverse, #172B4D)"
84
+ })
85
+ };
86
+
87
+ /**
88
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
89
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
90
+ * @codegenId typography
91
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
92
+ */
93
+ const headingSizeStylesMap = {
94
+ xxlarge: css({
95
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
96
+ }),
97
+ xlarge: css({
98
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
99
+ }),
100
+ large: css({
101
+ font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
102
+ }),
103
+ medium: css({
104
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
105
+ }),
106
+ small: css({
107
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
108
+ }),
109
+ xsmall: css({
110
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
111
+ }),
112
+ xxsmall: css({
113
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
114
+ })
115
+ };
116
+ /**
117
+ * @codegenEnd
118
+ */
119
+
95
120
  export default Heading;
package/dist/esm/heading.partial.js CHANGED
@@ -1,10 +1,11 @@
1
- /* heading.partial.tsx generated by @compiled/babel-plugin v0.32.2 */
2
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import "./heading.partial.compiled.css";
4
- import * as React from 'react';
5
- import { ax, ix } from "@compiled/react/runtime";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
 
8
+ import { css, jsx } from '@emotion/react';
8
9
  import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
9
10
  import { useHeading } from './heading-context';
10
11
  var sizeTagMap = {
@@ -16,34 +17,12 @@ var sizeTagMap = {
16
17
  xsmall: 'h5',
17
18
  xxsmall: 'h6'
18
19
  };
19
- var styles = {
20
- root: "_1dyz4jg8 _1mouidpf _1p1dglyw"
21
- };
22
- var headingColorStylesMap = {
23
- 'color.text': "_syaz1fxt",
24
- 'color.text.inverse': "_syaz15cr",
25
- 'color.text.warning.inverse': "_syazal3n"
26
- };
27
-
28
- /**
29
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
30
- * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
31
- * @codegenId typography
32
- * @codegenCommand yarn workspace @atlaskit/heading codegen
33
- */
34
- var headingSizeStylesMap = {
35
- xxlarge: "_11c813hg",
36
- xlarge: "_11c8iyik",
37
- large: "_11c81p5s",
38
- medium: "_11c8o0gd",
39
- small: "_11c81bk4",
40
- xsmall: "_11c81il0",
41
- xxsmall: "_11c816g6"
42
- };
43
- /**
44
- * @codegenEnd
45
- */
46
-
20
+ var headingResetStyles = css({
21
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
22
+ letterSpacing: 'normal',
23
+ marginBlock: 0,
24
+ textTransform: 'none'
25
+ });
47
26
  var useColor = function useColor(colorProp) {
48
27
  var surface = UNSAFE_useSurface();
49
28
 
@@ -80,7 +59,7 @@ var Heading = function Heading(_ref) {
80
59
  }
81
60
 
82
61
  // Technically size can be undefined here due to how the types work.
83
- // Once removing the level prop this assertion can be removed since size ws ill be a required prop.
62
+ // Once removing the level prop this assertion can be removed since size will be a required prop.
84
63
  var _useHeading = useHeading(sizeTagMap[size]),
85
64
  _useHeading2 = _slicedToArray(_useHeading, 2),
86
65
  hLevel = _useHeading2[0],
@@ -88,12 +67,57 @@ var Heading = function Heading(_ref) {
88
67
  var Component = as || inferredElement;
89
68
  var needsAriaRole = Component === 'div' && hLevel;
90
69
  var color = useColor(colorProp);
91
- return /*#__PURE__*/React.createElement(Component, {
70
+ return jsx(Component, {
92
71
  id: id,
93
72
  "data-testid": testId,
94
73
  role: needsAriaRole ? 'heading' : undefined,
95
74
  "aria-level": needsAriaRole ? hLevel : undefined,
96
- className: ax([styles.root, size && headingSizeStylesMap[size], headingColorStylesMap[color]])
75
+ css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
97
76
  }, children);
98
77
  };
78
+ var headingColorStylesMap = {
79
+ 'color.text': css({
80
+ color: "var(--ds-text, #172B4D)"
81
+ }),
82
+ 'color.text.inverse': css({
83
+ color: "var(--ds-text-inverse, #FFFFFF)"
84
+ }),
85
+ 'color.text.warning.inverse': css({
86
+ color: "var(--ds-text-warning-inverse, #172B4D)"
87
+ })
88
+ };
89
+
90
+ /**
91
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
92
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
93
+ * @codegenId typography
94
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
95
+ */
96
+ var headingSizeStylesMap = {
97
+ xxlarge: css({
98
+ font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
99
+ }),
100
+ xlarge: css({
101
+ font: "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
102
+ }),
103
+ large: css({
104
+ font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
105
+ }),
106
+ medium: css({
107
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
108
+ }),
109
+ small: css({
110
+ font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
111
+ }),
112
+ xsmall: css({
113
+ font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
114
+ }),
115
+ xxsmall: css({
116
+ font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
117
+ })
118
+ };
119
+ /**
120
+ * @codegenEnd
121
+ */
122
+
99
123
  export default Heading;
package/dist/types/heading.partial.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
+ import { jsx, type SerializedStyles } from '@emotion/react';
6
7
  export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
7
8
  export type HeadingProps = {
8
9
  /**
@@ -36,36 +37,6 @@ export type HeadingProps = {
36
37
  */
37
38
  testId?: string;
38
39
  };
39
- /**
40
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
41
- * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
42
- * @codegenId typography
43
- * @codegenCommand yarn workspace @atlaskit/heading codegen
44
- */
45
- declare const headingSizeStylesMap: {
46
- readonly xxlarge: import("@compiled/react").CompiledStyles<{
47
- font: "var(--ds-font-heading-xxlarge)";
48
- }>;
49
- readonly xlarge: import("@compiled/react").CompiledStyles<{
50
- font: "var(--ds-font-heading-xlarge)";
51
- }>;
52
- readonly large: import("@compiled/react").CompiledStyles<{
53
- font: "var(--ds-font-heading-large)";
54
- }>;
55
- readonly medium: import("@compiled/react").CompiledStyles<{
56
- font: "var(--ds-font-heading-medium)";
57
- }>;
58
- readonly small: import("@compiled/react").CompiledStyles<{
59
- font: "var(--ds-font-heading-small)";
60
- }>;
61
- readonly xsmall: import("@compiled/react").CompiledStyles<{
62
- font: "var(--ds-font-heading-xsmall)";
63
- }>;
64
- readonly xxsmall: import("@compiled/react").CompiledStyles<{
65
- font: "var(--ds-font-heading-xxsmall)";
66
- }>;
67
- };
68
- type HeadingSize = keyof typeof headingSizeStylesMap;
69
40
  /**
70
41
  * __Heading__
71
42
  *
@@ -77,5 +48,24 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
77
48
  * <Heading size="xxlarge">Page title</Heading>
78
49
  * ```
79
50
  */
80
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
51
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
52
+ /**
53
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
54
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
55
+ * @codegenId typography
56
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
57
+ */
58
+ declare const headingSizeStylesMap: {
59
+ xxlarge: SerializedStyles;
60
+ xlarge: SerializedStyles;
61
+ large: SerializedStyles;
62
+ medium: SerializedStyles;
63
+ small: SerializedStyles;
64
+ xsmall: SerializedStyles;
65
+ xxsmall: SerializedStyles;
66
+ };
67
+ export type HeadingSize = keyof typeof headingSizeStylesMap;
68
+ /**
69
+ * @codegenEnd
70
+ */
81
71
  export default Heading;
package/dist/types-ts4.5/heading.partial.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ReactNode } from 'react';
6
+ import { jsx, type SerializedStyles } from '@emotion/react';
6
7
  export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
7
8
  export type HeadingProps = {
8
9
  /**
@@ -36,36 +37,6 @@ export type HeadingProps = {
36
37
  */
37
38
  testId?: string;
38
39
  };
39
- /**
40
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
41
- * @codegen <<SignedSource::c47bed69b7a147a63fdb8c394e98514a>>
42
- * @codegenId typography
43
- * @codegenCommand yarn workspace @atlaskit/heading codegen
44
- */
45
- declare const headingSizeStylesMap: {
46
- readonly xxlarge: import("@compiled/react").CompiledStyles<{
47
- font: "var(--ds-font-heading-xxlarge)";
48
- }>;
49
- readonly xlarge: import("@compiled/react").CompiledStyles<{
50
- font: "var(--ds-font-heading-xlarge)";
51
- }>;
52
- readonly large: import("@compiled/react").CompiledStyles<{
53
- font: "var(--ds-font-heading-large)";
54
- }>;
55
- readonly medium: import("@compiled/react").CompiledStyles<{
56
- font: "var(--ds-font-heading-medium)";
57
- }>;
58
- readonly small: import("@compiled/react").CompiledStyles<{
59
- font: "var(--ds-font-heading-small)";
60
- }>;
61
- readonly xsmall: import("@compiled/react").CompiledStyles<{
62
- font: "var(--ds-font-heading-xsmall)";
63
- }>;
64
- readonly xxsmall: import("@compiled/react").CompiledStyles<{
65
- font: "var(--ds-font-heading-xxsmall)";
66
- }>;
67
- };
68
- type HeadingSize = keyof typeof headingSizeStylesMap;
69
40
  /**
70
41
  * __Heading__
71
42
  *
@@ -77,5 +48,24 @@ type HeadingSize = keyof typeof headingSizeStylesMap;
77
48
  * <Heading size="xxlarge">Page title</Heading>
78
49
  * ```
79
50
  */
80
- declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => JSX.Element;
51
+ declare const Heading: ({ children, size, id, testId, as, color: colorProp }: HeadingProps) => jsx.JSX.Element;
52
+ /**
53
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
54
+ * @codegen <<SignedSource::df829c6c0aa19bb57c0c77dc08d12d60>>
55
+ * @codegenId typography
56
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
57
+ */
58
+ declare const headingSizeStylesMap: {
59
+ xxlarge: SerializedStyles;
60
+ xlarge: SerializedStyles;
61
+ large: SerializedStyles;
62
+ medium: SerializedStyles;
63
+ small: SerializedStyles;
64
+ xsmall: SerializedStyles;
65
+ xxsmall: SerializedStyles;
66
+ };
67
+ export type HeadingSize = keyof typeof headingSizeStylesMap;
68
+ /**
69
+ * @codegenEnd
70
+ */
81
71
  export default Heading;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "4.0.0",
3
+ "version": "4.0.1",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,9 +32,9 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/primitives": "^13.3.0",
35
- "@atlaskit/tokens": "^2.4.0",
35
+ "@atlaskit/tokens": "^3.0.0",
36
36
  "@babel/runtime": "^7.0.0",
37
- "@compiled/react": "^0.18.1"
37
+ "@emotion/react": "^11.7.1"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -45,7 +45,7 @@
45
45
  "@af/integration-testing": "*",
46
46
  "@atlaskit/ds-lib": "^3.3.0",
47
47
  "@atlaskit/ssr": "*",
48
- "@atlaskit/toggle": "^13.4.0",
48
+ "@atlaskit/toggle": "^14.0.0",
49
49
  "@atlaskit/visual-regression": "*",
50
50
  "@atlassian/codegen": "^0.1.0",
51
51
  "@testing-library/react": "^12.1.5",
@@ -63,7 +63,7 @@
63
63
  "dom-events": "use-bind-event-listener",
64
64
  "design-system": "v1",
65
65
  "styling": [
66
- "compiled"
66
+ "emotion"
67
67
  ],
68
68
  "ui-components": "lite-mode",
69
69
  "analytics": "analytics-next",
package/scripts/codegen.tsx CHANGED
@@ -24,17 +24,19 @@ export const createTypographyStylesFromTemplate = () => {
24
24
  return (
25
25
  format(
26
26
  `
27
- const headingSizeStylesMap = cssMap({
27
+ const headingSizeStylesMap = {
28
28
  ${headingTokens
29
29
  .map((token) => {
30
30
  return `
31
- '${removeVerbosity(token.name)}': { font: ${constructTokenFunctionCall(token.cleanName)} }
31
+ '${removeVerbosity(
32
+ token.name,
33
+ )}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
32
34
  `.trim();
33
35
  })
34
36
  .join(',\n\t')}
35
- });`,
37
+ };`,
36
38
  'typescript',
37
- ) + `\ntype HeadingSize = keyof typeof headingSizeStylesMap;\n`
39
+ ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
38
40
  );
39
41
  };
40
42
 
package/dist/cjs/heading.partial.compiled.css DELETED
@@ -1,13 +0,0 @@
1
- ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
- ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
- ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
- ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
- ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
- ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
- ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
- ._1mouidpf{margin-block:0}
9
- ._1dyz4jg8{letter-spacing:normal}
10
- ._1p1dglyw{text-transform:none}
11
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
package/dist/es2019/heading.partial.compiled.css DELETED
@@ -1,13 +0,0 @@
1
- ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
- ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
- ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
- ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
- ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
- ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
- ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
- ._1mouidpf{margin-block:0}
9
- ._1dyz4jg8{letter-spacing:normal}
10
- ._1p1dglyw{text-transform:none}
11
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
package/dist/esm/heading.partial.compiled.css DELETED
@@ -1,13 +0,0 @@
1
- ._11c813hg{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
- ._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
- ._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
- ._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
5
- ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
6
- ._11c8iyik{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
7
- ._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
8
- ._1mouidpf{margin-block:0}
9
- ._1dyz4jg8{letter-spacing:normal}
10
- ._1p1dglyw{text-transform:none}
11
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
12
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
13
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}