@atlaskit/primitives 3.1.0 → 4.0.0

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 (56) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/constellation/text/code.mdx +1 -1
  3. package/constellation/text/examples.mdx +3 -3
  4. package/constellation/text/usage.mdx +2 -4
  5. package/dist/cjs/components/anchor.js +4 -2
  6. package/dist/cjs/components/bleed.js +3 -2
  7. package/dist/cjs/components/box.js +5 -5
  8. package/dist/cjs/components/flex.js +3 -2
  9. package/dist/cjs/components/grid.js +3 -2
  10. package/dist/cjs/components/inline.js +8 -3
  11. package/dist/cjs/components/pressable.js +5 -1
  12. package/dist/cjs/components/stack.js +8 -3
  13. package/dist/cjs/components/text.js +2 -5
  14. package/dist/cjs/xcss/style-maps.partial.js +8 -39
  15. package/dist/cjs/xcss/xcss.js +52 -14
  16. package/dist/es2019/components/anchor.js +4 -2
  17. package/dist/es2019/components/bleed.js +3 -2
  18. package/dist/es2019/components/box.js +5 -5
  19. package/dist/es2019/components/flex.js +3 -2
  20. package/dist/es2019/components/grid.js +3 -2
  21. package/dist/es2019/components/inline.js +8 -3
  22. package/dist/es2019/components/pressable.js +5 -1
  23. package/dist/es2019/components/stack.js +8 -3
  24. package/dist/es2019/components/text.js +2 -6
  25. package/dist/es2019/xcss/style-maps.partial.js +7 -38
  26. package/dist/es2019/xcss/xcss.js +38 -8
  27. package/dist/esm/components/anchor.js +4 -2
  28. package/dist/esm/components/bleed.js +3 -2
  29. package/dist/esm/components/box.js +5 -5
  30. package/dist/esm/components/flex.js +3 -2
  31. package/dist/esm/components/grid.js +3 -2
  32. package/dist/esm/components/inline.js +8 -3
  33. package/dist/esm/components/pressable.js +5 -1
  34. package/dist/esm/components/stack.js +8 -3
  35. package/dist/esm/components/text.js +2 -6
  36. package/dist/esm/xcss/style-maps.partial.js +7 -38
  37. package/dist/esm/xcss/xcss.js +52 -10
  38. package/dist/types/components/flex.d.ts +2 -2
  39. package/dist/types/components/grid.d.ts +3 -3
  40. package/dist/types/components/pressable.d.ts +1 -1
  41. package/dist/types/components/stack.d.ts +1 -1
  42. package/dist/types/components/text.d.ts +12 -23
  43. package/dist/types/components/types.d.ts +3 -2
  44. package/dist/types/xcss/style-maps.partial.d.ts +9 -49
  45. package/dist/types/xcss/xcss.d.ts +11 -5
  46. package/dist/types-ts4.5/components/flex.d.ts +2 -2
  47. package/dist/types-ts4.5/components/grid.d.ts +3 -3
  48. package/dist/types-ts4.5/components/pressable.d.ts +1 -1
  49. package/dist/types-ts4.5/components/stack.d.ts +1 -1
  50. package/dist/types-ts4.5/components/text.d.ts +12 -23
  51. package/dist/types-ts4.5/components/types.d.ts +3 -2
  52. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +9 -49
  53. package/dist/types-ts4.5/xcss/xcss.d.ts +11 -5
  54. package/package.json +3 -2
  55. package/scripts/codegen-styles.tsx +1 -1
  56. package/scripts/typography-codegen-template.tsx +34 -56
@@ -63,5 +63,5 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
63
63
  * Additional information to be included in the `context` of analytics events that come from pressable.
64
64
  */
65
65
  analyticsContext?: Record<string, any> | undefined;
66
- }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
66
+ }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
67
67
  export default UNSAFE_PRESSABLE;
@@ -58,7 +58,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
58
58
  /**
59
59
  * Used to align children along the block axis (typically vertical).
60
60
  */
61
- alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
61
+ alignBlock?: "center" | "stretch" | "end" | "start" | undefined;
62
62
  /**
63
63
  * Used to align children along the inline axis (typically horizontal).
64
64
  */
@@ -1,30 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { FC, ReactNode } from 'react';
3
- import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
3
+ import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
4
4
  import type { BasePrimitiveProps } from './types';
5
5
  declare const asAllowlist: readonly ["span", "p", "strong", "em"];
6
6
  type AsElement = (typeof asAllowlist)[number];
7
- type TextPropsBody = {
8
- /**
9
- * Text variant.
10
- */
11
- variant?: BodyText;
12
- /**
13
- * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
14
- *
15
- * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
16
- *
17
- * Only available for `body` text variants.
18
- */
19
- maxLines?: number;
20
- };
21
- type TextPropsUi = {
22
- /**
23
- * Text variant.
24
- */
25
- variant: UiText;
26
- maxLines?: never;
27
- };
28
7
  type TextPropsBase = {
29
8
  /**
30
9
  * HTML tag to be rendered. Defaults to `span`.
@@ -44,16 +23,26 @@ type TextPropsBase = {
44
23
  * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
45
24
  */
46
25
  id?: string;
26
+ /**
27
+ * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
28
+ *
29
+ * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
30
+ */
31
+ maxLines?: number;
47
32
  /**
48
33
  * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
49
34
  */
50
35
  textAlign?: TextAlign;
36
+ /**
37
+ * Text variant.
38
+ */
39
+ variant?: BodyFont;
51
40
  /**
52
41
  * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
53
42
  */
54
43
  weight?: FontWeight;
55
44
  };
56
- export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
45
+ export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
57
46
  type TextAlign = keyof typeof textAlignMap;
58
47
  declare const textAlignMap: {
59
48
  center: import("@emotion/react").SerializedStyles;
@@ -1,4 +1,5 @@
1
1
  import type { CSSProperties } from 'react';
2
+ import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
2
3
  import type { XCSS } from '../xcss/xcss';
3
4
  export type BasePrimitiveProps = {
4
5
  /**
@@ -11,9 +12,9 @@ export type BasePrimitiveProps = {
11
12
  */
12
13
  'data-testid'?: never;
13
14
  /**
14
- * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
15
+ * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
15
16
  */
16
- xcss?: XCSS | Array<XCSS | false | undefined>;
17
+ xcss?: XCSS | Array<XCSS | false | undefined> | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
17
18
  /**
18
19
  * Accessible role.
19
20
  */
@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
515
515
  */
516
516
  /**
517
517
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
518
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
518
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
519
519
  * @codegenId typography
520
520
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
521
521
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
522
522
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
523
523
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
524
524
  */
525
- export declare const fontSizeMap: {
526
- 'font.size.050': "var(--ds-font-size-050)";
527
- 'font.size.075': "var(--ds-font-size-075)";
528
- 'font.size.100': "var(--ds-font-size-100)";
529
- 'font.size.200': "var(--ds-font-size-200)";
530
- 'font.size.300': "var(--ds-font-size-300)";
531
- 'font.size.400': "var(--ds-font-size-400)";
532
- 'font.size.500': "var(--ds-font-size-500)";
533
- 'font.size.600': "var(--ds-font-size-600)";
525
+ export declare const bodyFontMap: {
526
+ body: "var(--ds-font-body)";
527
+ 'body.large': "var(--ds-font-body-large)";
528
+ 'body.small': "var(--ds-font-body-small)";
534
529
  };
535
- export type FontSize = keyof typeof fontSizeMap;
530
+ export type BodyFont = keyof typeof bodyFontMap;
536
531
  export declare const fontWeightMap: {
537
532
  bold: "var(--ds-font-weight-bold)";
538
533
  medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
541
536
  };
542
537
  export type FontWeight = keyof typeof fontWeightMap;
543
538
  export declare const fontFamilyMap: {
544
- 'font.family.body': "var(--ds-font-family-body)";
545
539
  'font.family.brand.body': "var(--ds-font-family-brand-body)";
546
540
  'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
547
- 'font.family.code': "var(--ds-font-family-code)";
548
- 'font.family.heading': "var(--ds-font-family-heading)";
549
- 'font.family.monospace': "var(--ds-font-family-monospace)";
550
- 'font.family.sans': "var(--ds-font-family-sans)";
551
541
  };
552
542
  export type FontFamily = keyof typeof fontFamilyMap;
553
- export declare const lineHeightMap: {
554
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
555
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
556
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
557
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
558
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
559
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
560
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
561
- };
562
- export type LineHeight = keyof typeof lineHeightMap;
563
- export declare const bodyTextMap: {
564
- body: "var(--ds-font-body)";
565
- 'body.large': "var(--ds-font-body-large)";
566
- 'body.small': "var(--ds-font-body-small)";
567
- };
568
- export type BodyText = keyof typeof bodyTextMap;
569
- export declare const uiTextMap: {
570
- ui: "var(--ds-font-ui)";
571
- 'ui.small': "var(--ds-font-ui-small)";
572
- };
573
- export type UiText = keyof typeof uiTextMap;
574
543
  /**
575
544
  * @codegenEnd
576
545
  */
@@ -671,32 +640,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
671
640
  type BackgroundColorToken = keyof typeof backgroundColorMap;
672
641
  type SurfaceColorToken = keyof typeof surfaceColorMap;
673
642
  type TextColorToken = keyof typeof textColorMap;
674
- type FontSizeToken = keyof typeof fontSizeMap;
675
643
  type FontWeightToken = keyof typeof fontWeightMap;
676
644
  type FontFamilyToken = keyof typeof fontFamilyMap;
677
- type LineHeightToken = keyof typeof lineHeightMap;
678
- type BodyTextToken = keyof typeof bodyTextMap;
679
- type UITextToken = keyof typeof uiTextMap;
645
+ type BodyFontToken = keyof typeof bodyFontMap;
680
646
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
681
647
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
682
648
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
683
649
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
684
- type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
685
650
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
686
651
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
687
- type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
688
- type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
689
- type UITextStyleMap = Record<UITextToken, SerializedStyles>;
652
+ type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
690
653
  export declare const paddingStylesMap: SpacingStyleMap;
691
654
  export declare const spaceStylesMap: SpacingStyleMap;
692
655
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
693
656
  export declare const textColorStylesMap: TextColorStyleMap;
694
- export declare const fontSizeStylesMap: FontSizeStyleMap;
695
657
  export declare const fontWeightStylesMap: FontWeightStyleMap;
696
658
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
697
- export declare const lineHeightStylesMap: LineHeightStyleMap;
698
- export declare const bodyTextStylesMap: BodyTextStyleMap;
699
- export declare const uiTextStylesMap: UITextStyleMap;
659
+ export declare const fontStylesMap: FontStyleMap;
700
660
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
701
661
  export declare const isSurfaceColorToken: (color: unknown) => color is "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";
702
662
  export {};
@@ -1,6 +1,6 @@
1
- import { css as cssEmotion } from '@emotion/react';
2
1
  import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
3
2
  import type * as CSS from 'csstype';
3
+ import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
4
4
  import type { MediaQuery } from '../responsive/types';
5
5
  import { TokenisedProps } from './style-maps.partial';
6
6
  export declare const tokensMap: {
@@ -1627,11 +1627,17 @@ export declare const tokensMap: {
1627
1627
  };
1628
1628
  declare const uniqueSymbol: unique symbol;
1629
1629
  /**
1630
- * @internal used in primitives
1631
- * @returns a collection of styles that can be applied to the respective primitive
1630
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
1631
+ * to supported both Emotion and Compiled styles until we've fully migrated
1632
+ * to Compiled.
1633
+ *
1634
+ * @private
1635
+ * @deprecated
1632
1636
  */
1633
- type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
1634
- export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
1637
+ export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[] | undefined | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>) => {
1638
+ emotion?: SerializedStyles[];
1639
+ static?: string;
1640
+ };
1635
1641
  type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
1636
1642
  type CSSMediaQueries = {
1637
1643
  [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
@@ -100,11 +100,11 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
100
100
  /**
101
101
  * Used to align children along the main axis.
102
102
  */
103
- justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
103
+ justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
104
104
  /**
105
105
  * Used to align children along the cross axis.
106
106
  */
107
- alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
107
+ alignItems?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
108
108
  /**
109
109
  * Represents the space between each child.
110
110
  */
@@ -136,11 +136,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
136
136
  /**
137
137
  * Used to align children along the inline axis.
138
138
  */
139
- justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
139
+ justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
140
140
  /**
141
141
  * Used to align the grid along the inline axis.
142
142
  */
143
- justifyItems?: "stretch" | "center" | "end" | "start" | undefined;
143
+ justifyItems?: "center" | "stretch" | "end" | "start" | undefined;
144
144
  /**
145
145
  * Used to align children along the block axis.
146
146
  */
@@ -148,7 +148,7 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
148
148
  /**
149
149
  * Used to align the grid along the block axis.
150
150
  */
151
- alignContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
151
+ alignContent?: "center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start" | undefined;
152
152
  /**
153
153
  * Represents the space between each column.
154
154
  */
@@ -63,5 +63,5 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
63
63
  * Additional information to be included in the `context` of analytics events that come from pressable.
64
64
  */
65
65
  analyticsContext?: Record<string, any> | undefined;
66
- }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
66
+ }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
67
67
  export default UNSAFE_PRESSABLE;
@@ -58,7 +58,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
58
58
  /**
59
59
  * Used to align children along the block axis (typically vertical).
60
60
  */
61
- alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
61
+ alignBlock?: "center" | "stretch" | "end" | "start" | undefined;
62
62
  /**
63
63
  * Used to align children along the inline axis (typically horizontal).
64
64
  */
@@ -1,6 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { FC, ReactNode } from 'react';
3
- import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
3
+ import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
4
4
  import type { BasePrimitiveProps } from './types';
5
5
  declare const asAllowlist: readonly [
6
6
  "span",
@@ -9,27 +9,6 @@ declare const asAllowlist: readonly [
9
9
  "em"
10
10
  ];
11
11
  type AsElement = (typeof asAllowlist)[number];
12
- type TextPropsBody = {
13
- /**
14
- * Text variant.
15
- */
16
- variant?: BodyText;
17
- /**
18
- * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
19
- *
20
- * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
21
- *
22
- * Only available for `body` text variants.
23
- */
24
- maxLines?: number;
25
- };
26
- type TextPropsUi = {
27
- /**
28
- * Text variant.
29
- */
30
- variant: UiText;
31
- maxLines?: never;
32
- };
33
12
  type TextPropsBase = {
34
13
  /**
35
14
  * HTML tag to be rendered. Defaults to `span`.
@@ -49,16 +28,26 @@ type TextPropsBase = {
49
28
  * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
50
29
  */
51
30
  id?: string;
31
+ /**
32
+ * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
33
+ *
34
+ * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
35
+ */
36
+ maxLines?: number;
52
37
  /**
53
38
  * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
54
39
  */
55
40
  textAlign?: TextAlign;
41
+ /**
42
+ * Text variant.
43
+ */
44
+ variant?: BodyFont;
56
45
  /**
57
46
  * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
58
47
  */
59
48
  weight?: FontWeight;
60
49
  };
61
- export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
50
+ export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
62
51
  type TextAlign = keyof typeof textAlignMap;
63
52
  declare const textAlignMap: {
64
53
  center: import("@emotion/react").SerializedStyles;
@@ -1,4 +1,5 @@
1
1
  import type { CSSProperties } from 'react';
2
+ import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
2
3
  import type { XCSS } from '../xcss/xcss';
3
4
  export type BasePrimitiveProps = {
4
5
  /**
@@ -11,9 +12,9 @@ export type BasePrimitiveProps = {
11
12
  */
12
13
  'data-testid'?: never;
13
14
  /**
14
- * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
15
+ * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
15
16
  */
16
- xcss?: XCSS | Array<XCSS | false | undefined>;
17
+ xcss?: XCSS | Array<XCSS | false | undefined> | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
17
18
  /**
18
19
  * Accessible role.
19
20
  */
@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
515
515
  */
516
516
  /**
517
517
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
518
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
518
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
519
519
  * @codegenId typography
520
520
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
521
521
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
522
522
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
523
523
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
524
524
  */
525
- export declare const fontSizeMap: {
526
- 'font.size.050': "var(--ds-font-size-050)";
527
- 'font.size.075': "var(--ds-font-size-075)";
528
- 'font.size.100': "var(--ds-font-size-100)";
529
- 'font.size.200': "var(--ds-font-size-200)";
530
- 'font.size.300': "var(--ds-font-size-300)";
531
- 'font.size.400': "var(--ds-font-size-400)";
532
- 'font.size.500': "var(--ds-font-size-500)";
533
- 'font.size.600': "var(--ds-font-size-600)";
525
+ export declare const bodyFontMap: {
526
+ body: "var(--ds-font-body)";
527
+ 'body.large': "var(--ds-font-body-large)";
528
+ 'body.small': "var(--ds-font-body-small)";
534
529
  };
535
- export type FontSize = keyof typeof fontSizeMap;
530
+ export type BodyFont = keyof typeof bodyFontMap;
536
531
  export declare const fontWeightMap: {
537
532
  bold: "var(--ds-font-weight-bold)";
538
533
  medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
541
536
  };
542
537
  export type FontWeight = keyof typeof fontWeightMap;
543
538
  export declare const fontFamilyMap: {
544
- 'font.family.body': "var(--ds-font-family-body)";
545
539
  'font.family.brand.body': "var(--ds-font-family-brand-body)";
546
540
  'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
547
- 'font.family.code': "var(--ds-font-family-code)";
548
- 'font.family.heading': "var(--ds-font-family-heading)";
549
- 'font.family.monospace': "var(--ds-font-family-monospace)";
550
- 'font.family.sans': "var(--ds-font-family-sans)";
551
541
  };
552
542
  export type FontFamily = keyof typeof fontFamilyMap;
553
- export declare const lineHeightMap: {
554
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
555
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
556
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
557
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
558
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
559
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
560
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
561
- };
562
- export type LineHeight = keyof typeof lineHeightMap;
563
- export declare const bodyTextMap: {
564
- body: "var(--ds-font-body)";
565
- 'body.large': "var(--ds-font-body-large)";
566
- 'body.small': "var(--ds-font-body-small)";
567
- };
568
- export type BodyText = keyof typeof bodyTextMap;
569
- export declare const uiTextMap: {
570
- ui: "var(--ds-font-ui)";
571
- 'ui.small': "var(--ds-font-ui-small)";
572
- };
573
- export type UiText = keyof typeof uiTextMap;
574
543
  /**
575
544
  * @codegenEnd
576
545
  */
@@ -682,32 +651,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
682
651
  type BackgroundColorToken = keyof typeof backgroundColorMap;
683
652
  type SurfaceColorToken = keyof typeof surfaceColorMap;
684
653
  type TextColorToken = keyof typeof textColorMap;
685
- type FontSizeToken = keyof typeof fontSizeMap;
686
654
  type FontWeightToken = keyof typeof fontWeightMap;
687
655
  type FontFamilyToken = keyof typeof fontFamilyMap;
688
- type LineHeightToken = keyof typeof lineHeightMap;
689
- type BodyTextToken = keyof typeof bodyTextMap;
690
- type UITextToken = keyof typeof uiTextMap;
656
+ type BodyFontToken = keyof typeof bodyFontMap;
691
657
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
692
658
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
693
659
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
694
660
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
695
- type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
696
661
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
697
662
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
698
- type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
699
- type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
700
- type UITextStyleMap = Record<UITextToken, SerializedStyles>;
663
+ type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
701
664
  export declare const paddingStylesMap: SpacingStyleMap;
702
665
  export declare const spaceStylesMap: SpacingStyleMap;
703
666
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
704
667
  export declare const textColorStylesMap: TextColorStyleMap;
705
- export declare const fontSizeStylesMap: FontSizeStyleMap;
706
668
  export declare const fontWeightStylesMap: FontWeightStyleMap;
707
669
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
708
- export declare const lineHeightStylesMap: LineHeightStyleMap;
709
- export declare const bodyTextStylesMap: BodyTextStyleMap;
710
- export declare const uiTextStylesMap: UITextStyleMap;
670
+ export declare const fontStylesMap: FontStyleMap;
711
671
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
712
672
  export declare const isSurfaceColorToken: (color: unknown) => color is "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";
713
673
  export {};
@@ -1,6 +1,6 @@
1
- import { css as cssEmotion } from '@emotion/react';
2
1
  import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
3
2
  import type * as CSS from 'csstype';
3
+ import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
4
4
  import type { MediaQuery } from '../responsive/types';
5
5
  import { TokenisedProps } from './style-maps.partial';
6
6
  export declare const tokensMap: {
@@ -1627,11 +1627,17 @@ export declare const tokensMap: {
1627
1627
  };
1628
1628
  declare const uniqueSymbol: unique symbol;
1629
1629
  /**
1630
- * @internal used in primitives
1631
- * @returns a collection of styles that can be applied to the respective primitive
1630
+ * Picks out runtime XCSS objects and build-time XCSS strings. This is needed
1631
+ * to supported both Emotion and Compiled styles until we've fully migrated
1632
+ * to Compiled.
1633
+ *
1634
+ * @private
1635
+ * @deprecated
1632
1636
  */
1633
- type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
1634
- export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
1637
+ export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[] | undefined | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>) => {
1638
+ emotion?: SerializedStyles[];
1639
+ static?: string;
1640
+ };
1635
1641
  type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
1636
1642
  type CSSMediaQueries = {
1637
1643
  [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -124,9 +124,10 @@
124
124
  "dependencies": {
125
125
  "@atlaskit/analytics-next": "^9.2.0",
126
126
  "@atlaskit/app-provider": "^1.0.0",
127
+ "@atlaskit/css": "^0.0.3",
127
128
  "@atlaskit/ds-lib": "^2.2.0",
128
129
  "@atlaskit/interaction-context": "^2.1.0",
129
- "@atlaskit/tokens": "^1.38.0",
130
+ "@atlaskit/tokens": "^1.39.0",
130
131
  "@babel/runtime": "^7.0.0",
131
132
  "@emotion/react": "^11.7.1",
132
133
  "@emotion/serialize": "^1.1.0",
@@ -117,7 +117,7 @@ const sourceFns = [
117
117
  // font*, lineheight
118
118
  () =>
119
119
  createPartialSignedArtifact(
120
- options => options.map(createTypographyStylesFromTemplate).join('\n'),
120
+ createTypographyStylesFromTemplate,
121
121
  'yarn workspace @atlaskit/primitives codegen-styles',
122
122
  {
123
123
  id: 'typography',