@atlaskit/ds-explorations 2.2.15 → 2.3.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 (76) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/components/interaction-surface.partial.js +2 -2
  3. package/dist/cjs/components/text.partial.js +2 -2
  4. package/dist/cjs/index.js +0 -21
  5. package/dist/cjs/internal/color-map.js +2 -2
  6. package/dist/es2019/components/interaction-surface.partial.js +2 -2
  7. package/dist/es2019/components/text.partial.js +2 -2
  8. package/dist/es2019/index.js +0 -3
  9. package/dist/es2019/internal/color-map.js +2 -2
  10. package/dist/esm/components/interaction-surface.partial.js +2 -2
  11. package/dist/esm/components/text.partial.js +2 -2
  12. package/dist/esm/index.js +0 -3
  13. package/dist/esm/internal/color-map.js +2 -2
  14. package/dist/types/components/surface-provider.d.ts +2 -2
  15. package/dist/types/components/text.partial.d.ts +2 -2
  16. package/dist/types/index.d.ts +0 -6
  17. package/dist/types/internal/color-map.d.ts +2 -2
  18. package/dist/types-ts4.5/components/surface-provider.d.ts +2 -2
  19. package/dist/types-ts4.5/components/text.partial.d.ts +2 -2
  20. package/dist/types-ts4.5/index.d.ts +0 -6
  21. package/dist/types-ts4.5/internal/color-map.d.ts +2 -2
  22. package/examples/02-text-advanced.tsx +11 -20
  23. package/examples/02-text.tsx +15 -10
  24. package/examples/05-badge.tsx +9 -5
  25. package/examples/06-section-message.tsx +2 -4
  26. package/examples/07-comment.tsx +1 -3
  27. package/examples/08-lozenge.tsx +8 -4
  28. package/examples/99-interactions.tsx +49 -33
  29. package/package.json +4 -6
  30. package/report.api.md +0 -465
  31. package/scripts/codegen-styles.tsx +16 -89
  32. package/src/components/__tests__/unit/interaction-suface.test.tsx +2 -2
  33. package/src/components/interaction-surface.partial.tsx +2 -2
  34. package/src/components/surface-provider.tsx +1 -1
  35. package/src/components/text.partial.tsx +2 -2
  36. package/src/index.tsx +0 -6
  37. package/src/internal/color-map.tsx +2 -2
  38. package/tmp/api-report-tmp.d.ts +0 -451
  39. package/tsconfig.app.json +3 -0
  40. package/tsconfig.dev.json +0 -6
  41. package/box/package.json +0 -15
  42. package/dist/cjs/components/box.partial.js +0 -622
  43. package/dist/cjs/components/inline.partial.js +0 -183
  44. package/dist/cjs/components/stack.partial.js +0 -149
  45. package/dist/es2019/components/box.partial.js +0 -614
  46. package/dist/es2019/components/inline.partial.js +0 -177
  47. package/dist/es2019/components/stack.partial.js +0 -144
  48. package/dist/esm/components/box.partial.js +0 -617
  49. package/dist/esm/components/inline.partial.js +0 -177
  50. package/dist/esm/components/stack.partial.js +0 -143
  51. package/dist/types/components/box.partial.d.ts +0 -357
  52. package/dist/types/components/inline.partial.d.ts +0 -108
  53. package/dist/types/components/stack.partial.d.ts +0 -92
  54. package/dist/types-ts4.5/components/box.partial.d.ts +0 -357
  55. package/dist/types-ts4.5/components/inline.partial.d.ts +0 -108
  56. package/dist/types-ts4.5/components/stack.partial.d.ts +0 -92
  57. package/examples/00-basic.tsx +0 -22
  58. package/examples/01-box.tsx +0 -171
  59. package/examples/03-stack.tsx +0 -99
  60. package/examples/04-inline.tsx +0 -99
  61. package/inline/package.json +0 -15
  62. package/src/components/__tests__/unit/box.test.tsx +0 -55
  63. package/src/components/__tests__/unit/inline.test.tsx +0 -43
  64. package/src/components/__tests__/unit/stack.test.tsx +0 -31
  65. package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png +0 -3
  66. package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png +0 -3
  67. package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png +0 -3
  68. package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png +0 -3
  69. package/src/components/__tests__/visual-regression/inline-snapshot-test.tsx +0 -28
  70. package/src/components/__tests__/visual-regression/stack-snapshot-test.tsx +0 -28
  71. package/src/components/__tests__/vr-tests/__snapshots__/box--default.png +0 -0
  72. package/src/components/__tests__/vr-tests/box-snapshot-test.vr.tsx +0 -6
  73. package/src/components/box.partial.tsx +0 -706
  74. package/src/components/inline.partial.tsx +0 -218
  75. package/src/components/stack.partial.tsx +0 -174
  76. package/stack/package.json +0 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 2.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`83cd2ae7c5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83cd2ae7c5a) - Regenerates codegen artifacts as a result of introducting new visited link token.
8
+ - Updated dependencies
9
+
10
+ ## 2.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`933fd5192d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/933fd5192d6) - - Removes UNSAFE_Box component.
15
+ - Removes UNSAFE_Inline component.
16
+ - Removes UNSAFE_Stack component.
17
+
3
18
  ## 2.2.15
4
19
 
5
20
  ### Patch Changes
@@ -53,11 +53,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
53
53
  var _default = InteractionSurface;
54
54
  /**
55
55
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
56
- * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
56
+ * @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
57
57
  * @codegenId interactions
58
58
  * @codegenCommand yarn codegen-styles
59
59
  * @codegenParams ["background"]
60
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
60
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
61
61
  */
62
62
  exports.default = _default;
63
63
  var backgroundActiveColorMap = {
@@ -230,11 +230,11 @@ var lineHeightMap = {
230
230
  */
231
231
  /**
232
232
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
233
- * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
233
+ * @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
234
234
  * @codegenId colors
235
235
  * @codegenCommand yarn codegen-styles
236
236
  * @codegenParams ["text"]
237
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
237
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
238
238
  */
239
239
  var textColorMap = {
240
240
  'color.text': (0, _react2.css)({
package/dist/cjs/index.js CHANGED
@@ -4,38 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- Object.defineProperty(exports, "UNSAFE_Box", {
8
- enumerable: true,
9
- get: function get() {
10
- return _box.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "UNSAFE_Inline", {
14
- enumerable: true,
15
- get: function get() {
16
- return _inline.default;
17
- }
18
- });
19
7
  Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
20
8
  enumerable: true,
21
9
  get: function get() {
22
10
  return _interactionSurface.default;
23
11
  }
24
12
  });
25
- Object.defineProperty(exports, "UNSAFE_Stack", {
26
- enumerable: true,
27
- get: function get() {
28
- return _stack.default;
29
- }
30
- });
31
13
  Object.defineProperty(exports, "UNSAFE_Text", {
32
14
  enumerable: true,
33
15
  get: function get() {
34
16
  return _text.default;
35
17
  }
36
18
  });
37
- var _box = _interopRequireDefault(require("./components/box.partial"));
38
19
  var _text = _interopRequireDefault(require("./components/text.partial"));
39
- var _inline = _interopRequireDefault(require("./components/inline.partial"));
40
- var _stack = _interopRequireDefault(require("./components/stack.partial"));
41
20
  var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));
@@ -9,9 +9,9 @@ exports.default = void 0;
9
9
  *
10
10
  * The color map is used to map a background color token to a matching text color that will meet contrast.
11
11
  *
12
- * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
12
+ * @codegen <<SignedSource::f70c0e13112cb1620980353c239c14d8>>
13
13
  * @codegenCommand yarn codegen-styles
14
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
14
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
15
15
  */
16
16
  var _default = {
17
17
  'neutral.bold': 'inverse',
@@ -48,11 +48,11 @@ export default InteractionSurface;
48
48
 
49
49
  /**
50
50
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
51
- * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
51
+ * @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
52
52
  * @codegenId interactions
53
53
  * @codegenCommand yarn codegen-styles
54
54
  * @codegenParams ["background"]
55
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
55
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
56
56
  */
57
57
  const backgroundActiveColorMap = {
58
58
  'accent.lime.subtlest': css({
@@ -220,11 +220,11 @@ const lineHeightMap = {
220
220
  */
221
221
  /**
222
222
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
223
- * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
223
+ * @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
224
224
  * @codegenId colors
225
225
  * @codegenCommand yarn codegen-styles
226
226
  * @codegenParams ["text"]
227
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
227
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
228
228
  */
229
229
  const textColorMap = {
230
230
  'color.text': css({
@@ -1,5 +1,2 @@
1
- export { default as UNSAFE_Box } from './components/box.partial';
2
1
  export { default as UNSAFE_Text } from './components/text.partial';
3
- export { default as UNSAFE_Inline } from './components/inline.partial';
4
- export { default as UNSAFE_Stack } from './components/stack.partial';
5
2
  export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
6
+ * @codegen <<SignedSource::f70c0e13112cb1620980353c239c14d8>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
9
9
  */
10
10
  export default {
11
11
  'neutral.bold': 'inverse',
@@ -47,11 +47,11 @@ export default InteractionSurface;
47
47
 
48
48
  /**
49
49
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
50
- * @codegen <<SignedSource::03b3f0bf0d4f1326c6bfa087f92bef36>>
50
+ * @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
51
51
  * @codegenId interactions
52
52
  * @codegenCommand yarn codegen-styles
53
53
  * @codegenParams ["background"]
54
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
54
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
55
55
  */
56
56
  var backgroundActiveColorMap = {
57
57
  'accent.lime.subtlest': css({
@@ -223,11 +223,11 @@ var lineHeightMap = {
223
223
  */
224
224
  /**
225
225
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
226
- * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
226
+ * @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
227
227
  * @codegenId colors
228
228
  * @codegenCommand yarn codegen-styles
229
229
  * @codegenParams ["text"]
230
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
230
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
231
231
  */
232
232
  var textColorMap = {
233
233
  'color.text': css({
package/dist/esm/index.js CHANGED
@@ -1,5 +1,2 @@
1
- export { default as UNSAFE_Box } from './components/box.partial';
2
1
  export { default as UNSAFE_Text } from './components/text.partial';
3
- export { default as UNSAFE_Inline } from './components/inline.partial';
4
- export { default as UNSAFE_Stack } from './components/stack.partial';
5
2
  export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
6
+ * @codegen <<SignedSource::f70c0e13112cb1620980353c239c14d8>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
9
9
  */
10
10
  export default {
11
11
  'neutral.bold': 'inverse',
@@ -4,7 +4,7 @@
4
4
  *
5
5
  * A surface context provides context information on the current background (if set).
6
6
  */
7
- export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
7
+ export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
8
8
  /**
9
9
  * __useSurface__
10
10
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
12
12
  *
13
13
  * @see SurfaceContext
14
14
  */
15
- export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
15
+ export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
@@ -129,11 +129,11 @@ export type LineHeight = keyof typeof lineHeightMap;
129
129
  */
130
130
  /**
131
131
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
132
- * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
132
+ * @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
133
133
  * @codegenId colors
134
134
  * @codegenCommand yarn codegen-styles
135
135
  * @codegenParams ["text"]
136
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
136
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
137
137
  */
138
138
  declare const textColorMap: {
139
139
  readonly 'color.text': import("@emotion/react").SerializedStyles;
@@ -1,9 +1,3 @@
1
- export { default as UNSAFE_Box } from './components/box.partial';
2
1
  export { default as UNSAFE_Text } from './components/text.partial';
3
- export { default as UNSAFE_Inline } from './components/inline.partial';
4
- export { default as UNSAFE_Stack } from './components/stack.partial';
5
2
  export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
6
- export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
7
3
  export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
8
- export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
9
- export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
6
+ * @codegen <<SignedSource::f70c0e13112cb1620980353c239c14d8>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
9
9
  */
10
10
  declare const _default: {
11
11
  readonly 'neutral.bold': "inverse";
@@ -4,7 +4,7 @@
4
4
  *
5
5
  * A surface context provides context information on the current background (if set).
6
6
  */
7
- export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
7
+ export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
8
8
  /**
9
9
  * __useSurface__
10
10
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
12
12
  *
13
13
  * @see SurfaceContext
14
14
  */
15
- export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.subtlest" | "brand.bold" | "brand.boldest" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
15
+ export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
@@ -134,11 +134,11 @@ export type LineHeight = keyof typeof lineHeightMap;
134
134
  */
135
135
  /**
136
136
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
137
- * @codegen <<SignedSource::d2da3ae653a14d48ae7649d16e323e40>>
137
+ * @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
138
138
  * @codegenId colors
139
139
  * @codegenCommand yarn codegen-styles
140
140
  * @codegenParams ["text"]
141
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
141
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
142
142
  */
143
143
  declare const textColorMap: {
144
144
  readonly 'color.text': import("@emotion/react").SerializedStyles;
@@ -1,9 +1,3 @@
1
- export { default as UNSAFE_Box } from './components/box.partial';
2
1
  export { default as UNSAFE_Text } from './components/text.partial';
3
- export { default as UNSAFE_Inline } from './components/inline.partial';
4
- export { default as UNSAFE_Stack } from './components/stack.partial';
5
2
  export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
6
- export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
7
3
  export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
8
- export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
9
- export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::49cf3a9a4b6ea82d76f3d977759cac32>>
6
+ * @codegen <<SignedSource::f70c0e13112cb1620980353c239c14d8>>
7
7
  * @codegenCommand yarn codegen-styles
8
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
9
9
  */
10
10
  declare const _default: {
11
11
  readonly 'neutral.bold': "inverse";
@@ -1,37 +1,28 @@
1
1
  import React from 'react';
2
2
 
3
- import Inline from '@atlaskit/primitives/inline';
3
+ import { Box, Inline, xcss } from '@atlaskit/primitives';
4
4
 
5
- import Box from '../src/components/box.partial';
6
5
  import Text from '../src/components/text.partial';
7
6
 
7
+ const boxStyles = xcss({
8
+ display: 'flex',
9
+ paddingBlock: 'space.400',
10
+ paddingInline: 'space.400',
11
+ alignItems: 'center',
12
+ });
13
+
8
14
  export default () => {
9
15
  return (
10
16
  <Inline space="space.100">
11
- <Box
12
- paddingBlock="space.400"
13
- paddingInline="space.400"
14
- alignItems="center"
15
- backgroundColor="information"
16
- >
17
+ <Box xcss={boxStyles} backgroundColor="color.background.information">
17
18
  <Text>
18
19
  <Text>Text that deletes its redundant wrapping</Text>
19
20
  </Text>
20
21
  </Box>
21
- <Box
22
- paddingBlock="space.400"
23
- paddingInline="space.400"
24
- alignItems="center"
25
- backgroundColor="information"
26
- >
22
+ <Box xcss={boxStyles} backgroundColor="color.background.information">
27
23
  <Text fontWeight="semibold">Text on information</Text>
28
24
  </Box>
29
- <Box
30
- paddingBlock="space.400"
31
- paddingInline="space.400"
32
- alignItems="center"
33
- backgroundColor="brand.bold"
34
- >
25
+ <Box xcss={boxStyles} backgroundColor="color.background.brand.bold">
35
26
  <Text fontWeight="semibold">Text on brand bold</Text>
36
27
  </Box>
37
28
  </Inline>
@@ -1,10 +1,15 @@
1
1
  import React from 'react';
2
2
 
3
3
  import Heading from '@atlaskit/heading';
4
- import Inline from '@atlaskit/primitives/inline';
5
- import Stack from '@atlaskit/primitives/stack';
4
+ import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
6
5
 
7
- import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
6
+ import { UNSAFE_Text as Text } from '../src';
7
+
8
+ const fixedWidthStyles = xcss({ display: 'flex', width: '200px' });
9
+
10
+ const lineHeightContainerStyles = xcss({
11
+ display: 'inline-flex',
12
+ });
8
13
 
9
14
  export default () => {
10
15
  return (
@@ -13,7 +18,7 @@ export default () => {
13
18
  Text examples
14
19
  </Heading>
15
20
  <Stack space="space.200">
16
- <Box display="block">
21
+ <Box>
17
22
  <Heading level="h300">Font size</Heading>
18
23
  <Inline space="space.200" testId="font-sizes">
19
24
  {(
@@ -34,7 +39,7 @@ export default () => {
34
39
  ))}
35
40
  </Inline>
36
41
  </Box>
37
- <Box display="block">
42
+ <Box>
38
43
  <Heading level="h300" as="h4">
39
44
  Font weight
40
45
  </Heading>
@@ -48,7 +53,7 @@ export default () => {
48
53
  )}
49
54
  </Inline>
50
55
  </Box>
51
- <Box display="block">
56
+ <Box>
52
57
  <Heading level="h300" as="h4">
53
58
  Line height
54
59
  </Heading>
@@ -65,15 +70,15 @@ export default () => {
65
70
  ).map((lineHeight) => (
66
71
  <Box
67
72
  key={lineHeight}
68
- display="inlineFlex"
69
- backgroundColor="neutral"
73
+ xcss={lineHeightContainerStyles}
74
+ backgroundColor="color.background.neutral"
70
75
  >
71
76
  <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
72
77
  </Box>
73
78
  ))}
74
79
  </Inline>
75
80
  </Box>
76
- <Box display="block">
81
+ <Box>
77
82
  <Heading level="h300" as="h4">
78
83
  Testing
79
84
  </Heading>
@@ -92,7 +97,7 @@ export default () => {
92
97
  >
93
98
  Text with various props
94
99
  </Text>
95
- <Box UNSAFE_style={{ width: '200px' }}>
100
+ <Box xcss={fixedWidthStyles}>
96
101
  <Text shouldTruncate>Long truncated text that is cut off.</Text>
97
102
  </Box>
98
103
  </Stack>
@@ -1,20 +1,24 @@
1
1
  import React from 'react';
2
2
 
3
3
  import Badge from '@atlaskit/badge';
4
+ import { Box, xcss } from '@atlaskit/primitives';
4
5
 
5
- import { UNSAFE_Box as Box } from '../src';
6
6
  import Text from '../src/components/text.partial';
7
7
 
8
+ const containerStyles = xcss({
9
+ borderRadius: 'border.radius.200',
10
+ display: 'inlineFlex',
11
+ lineHeight: '16px',
12
+ });
13
+
8
14
  export default () => {
9
15
  return (
10
16
  <>
11
17
  <Badge>{8}</Badge>
12
18
  <Box
13
- borderRadius="badge"
14
- backgroundColor="neutral"
15
- display="inlineFlex"
19
+ xcss={containerStyles}
20
+ backgroundColor="color.background.neutral"
16
21
  paddingInline="space.075"
17
- UNSAFE_style={{ lineHeight: '16px' }}
18
22
  >
19
23
  <Text fontSize="size.075">8</Text>
20
24
  </Box>
@@ -6,14 +6,12 @@ import Button from '@atlaskit/button';
6
6
  import __noop from '@atlaskit/ds-lib/noop';
7
7
  import Heading from '@atlaskit/heading';
8
8
  import InfoIcon from '@atlaskit/icon/glyph/info';
9
- import Inline from '@atlaskit/primitives/inline';
10
- import Stack from '@atlaskit/primitives/stack';
9
+ import { Box, Inline, Stack } from '@atlaskit/primitives';
11
10
  import SectionMessage, {
12
11
  SectionMessageAction,
13
12
  } from '@atlaskit/section-message';
14
13
  import { token } from '@atlaskit/tokens';
15
14
 
16
- import { UNSAFE_Box as Box } from '../src';
17
15
  import Text from '../src/components/text.partial';
18
16
 
19
17
  export default () => {
@@ -22,7 +20,7 @@ export default () => {
22
20
  <Box
23
21
  paddingBlock="space.200"
24
22
  paddingInline="space.200"
25
- backgroundColor="information"
23
+ backgroundColor="color.background.information"
26
24
  >
27
25
  <Inline space="space.200">
28
26
  <InfoIcon
@@ -2,10 +2,8 @@
2
2
  import { jsx } from '@emotion/react';
3
3
 
4
4
  import Lozenge from '@atlaskit/lozenge';
5
- import Inline from '@atlaskit/primitives/inline';
6
- import Stack from '@atlaskit/primitives/stack';
5
+ import { Box, Inline, Stack } from '@atlaskit/primitives';
7
6
 
8
- import { UNSAFE_Box as Box } from '../src';
9
7
  import Text from '../src/components/text.partial';
10
8
 
11
9
  const Author = ({ children }: any) => {