@atlaskit/primitives 12.0.1 → 12.1.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 (27) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/constellation/inline/usage.mdx +19 -0
  3. package/dist/cjs/components/anchor.js +1 -1
  4. package/dist/cjs/components/pressable.js +1 -1
  5. package/dist/cjs/components/text.js +2 -2
  6. package/dist/cjs/xcss/style-maps.partial.js +48 -13
  7. package/dist/cjs/xcss/xcss.js +3 -0
  8. package/dist/es2019/components/anchor.js +1 -1
  9. package/dist/es2019/components/pressable.js +1 -1
  10. package/dist/es2019/components/text.js +3 -3
  11. package/dist/es2019/xcss/style-maps.partial.js +47 -12
  12. package/dist/es2019/xcss/xcss.js +4 -1
  13. package/dist/esm/components/anchor.js +1 -1
  14. package/dist/esm/components/pressable.js +1 -1
  15. package/dist/esm/components/text.js +3 -3
  16. package/dist/esm/xcss/style-maps.partial.js +47 -12
  17. package/dist/esm/xcss/xcss.js +4 -1
  18. package/dist/types/components/text.d.ts +4 -4
  19. package/dist/types/xcss/style-maps.partial.d.ts +61 -13
  20. package/dist/types/xcss/xcss.d.ts +27 -0
  21. package/dist/types-ts4.5/components/text.d.ts +4 -4
  22. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +61 -13
  23. package/dist/types-ts4.5/xcss/xcss.d.ts +27 -0
  24. package/package.json +3 -3
  25. package/scripts/codegen-styles.tsx +12 -0
  26. package/scripts/text-codegen-template.tsx +81 -0
  27. package/scripts/typography-codegen-template.tsx +6 -26
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 12.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e0c305a0be2ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0c305a0be2ce) -
8
+ Added support for typography tokens to XCSS.
9
+
3
10
  ## 12.0.1
4
11
 
5
12
  ### Patch Changes
package/constellation/inline/usage.mdx CHANGED
@@ -42,6 +42,25 @@ Use the inline props to customize the spacing and styling on any child elements.
42
42
  - `rowSpace`
43
43
  - `separator`
44
44
 
45
+ ## Accessibility
46
+
47
+ If you need to hide the markers of an inline list, don't use the `list-style-type: none` CSS
48
+ property, as this strips the list out of its semantics in Safari, causing VoiceOver users not to get
49
+ it announced as such.
50
+
51
+ There are a few options to get around this. Using CSS, you can target the `::marker` pseudoclass of
52
+ the list items and set the font size to zero to get the same visual results while preserving the
53
+ semantics across browsers and assistive technologies.
54
+
55
+ ```tsx
56
+ <Box as="li" xcss={xcss({ '::marker': { fontSize: 0 } })}>
57
+ Example
58
+ </Box>
59
+ ```
60
+
61
+ Alternatively, if you do need to use `list-style-type: none` you can add add `role="list"` to the
62
+ `Inline` element.
63
+
45
64
  ## Related
46
65
 
47
66
  - [Use box for a generic container with access to design tokens](/components/primitives/box/usage)
package/dist/cjs/components/anchor.js CHANGED
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
105
105
  action: 'clicked',
106
106
  componentName: componentName || 'Anchor',
107
107
  packageName: "@atlaskit/primitives",
108
- packageVersion: "12.0.1",
108
+ packageVersion: "12.1.0",
109
109
  analyticsData: analyticsContext,
110
110
  actionSubject: 'link'
111
111
  });
package/dist/cjs/components/pressable.js CHANGED
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
95
95
  action: 'clicked',
96
96
  componentName: componentName || 'Pressable',
97
97
  packageName: "@atlaskit/primitives",
98
- packageVersion: "12.0.1",
98
+ packageVersion: "12.1.0",
99
99
  analyticsData: analyticsContext,
100
100
  actionSubject: 'button'
101
101
  });
package/dist/cjs/components/text.js CHANGED
@@ -107,11 +107,11 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
107
107
  ref: ref,
108
108
  css: [resetStyles,
109
109
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
110
- _styleMaps.fontStylesMap[size],
110
+ _styleMaps.textSizeStylesMap[size],
111
111
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
112
112
  color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
113
113
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
114
- weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
114
+ weight && _styleMaps.textWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
115
115
  style: {
116
116
  WebkitLineClamp: maxLines
117
117
  },
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
7
+ exports.textWeightStylesMap = exports.textWeightMap = exports.textSizeStylesMap = exports.textSizeMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.getSerializedStylesMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _tokens = require("@atlaskit/tokens");
@@ -499,24 +499,32 @@ var borderRadiusMap = exports.borderRadiusMap = {
499
499
 
500
500
  /**
501
501
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
502
- * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
502
+ * @codegen <<SignedSource::80cc7623e264a740959237b5a1643873>>
503
503
  * @codegenId typography
504
504
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
505
505
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
506
506
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
507
507
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
508
508
  */
509
- var fontSizeMap = exports.fontSizeMap = {
510
- medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
511
- UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
- large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
509
+ var fontMap = exports.fontMap = {
510
+ 'font.body': "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
511
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
+ 'font.body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
+ 'font.body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
514
+ 'font.code': "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
515
+ 'font.heading.large': "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
516
+ 'font.heading.medium': "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
517
+ 'font.heading.small': "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
518
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
519
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
520
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
521
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
514
522
  };
515
523
  var fontWeightMap = exports.fontWeightMap = {
516
- bold: "var(--ds-font-weight-bold, 700)",
517
- medium: "var(--ds-font-weight-medium, 500)",
518
- regular: "var(--ds-font-weight-regular, 400)",
519
- semibold: "var(--ds-font-weight-semibold, 600)"
524
+ 'font.weight.bold': "var(--ds-font-weight-bold, 700)",
525
+ 'font.weight.medium': "var(--ds-font-weight-medium, 500)",
526
+ 'font.weight.regular': "var(--ds-font-weight-regular, 400)",
527
+ 'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
520
528
  };
521
529
  var fontFamilyMap = exports.fontFamilyMap = {
522
530
  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -525,6 +533,30 @@ var fontFamilyMap = exports.fontFamilyMap = {
525
533
  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
526
534
  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
527
535
  };
536
+ /**
537
+ * @codegenEnd
538
+ */
539
+
540
+ /**
541
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
542
+ * @codegen <<SignedSource::d92525f319a39edc53a30184bd02aa2c>>
543
+ * @codegenId text
544
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
545
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
546
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
547
+ */
548
+ var textSizeMap = exports.textSizeMap = {
549
+ medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
550
+ UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
551
+ large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
552
+ small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
553
+ };
554
+ var textWeightMap = exports.textWeightMap = {
555
+ bold: "var(--ds-font-weight-bold, 700)",
556
+ medium: "var(--ds-font-weight-medium, 500)",
557
+ regular: "var(--ds-font-weight-regular, 400)",
558
+ semibold: "var(--ds-font-weight-semibold, 600)"
559
+ };
528
560
 
529
561
  /**
530
562
  * @codegenEnd
@@ -538,8 +570,9 @@ var spacingProperties = [
538
570
  'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
539
571
  // Used by Inline and Stack
540
572
  'gap', 'rowGap', 'columnGap'];
541
- var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
573
+ var getSerializedStylesMap = exports.getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
542
574
  return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
575
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
543
576
  emotionSpacingMap[token] = (0, _react.css)((0, _defineProperty2.default)({}, cssProperty, tokenMap[token]));
544
577
  return emotionSpacingMap;
545
578
  }, {});
@@ -556,7 +589,9 @@ var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedS
556
589
  var textColorStylesMap = exports.textColorStylesMap = getSerializedStylesMap('color', textColorMap);
557
590
  var fontWeightStylesMap = exports.fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
558
591
  var fontFamilyStylesMap = exports.fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
559
- var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
592
+ var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', fontMap);
593
+ var textSizeStylesMap = exports.textSizeStylesMap = getSerializedStylesMap('font', textSizeMap);
594
+ var textWeightStylesMap = exports.textWeightStylesMap = getSerializedStylesMap('fontWeight', textWeightMap);
560
595
  var surfaceColorStylesMap = exports.surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
561
596
  var isSurfaceColorToken = exports.isSurfaceColorToken = function isSurfaceColorToken(color) {
562
597
  return surfaceColorMap[color] !== undefined;
package/dist/cjs/xcss/xcss.js CHANGED
@@ -54,6 +54,9 @@ var tokensMap = exports.tokensMap = {
54
54
  boxShadow: _styleMaps.shadowMap,
55
55
  color: _styleMaps.textColorMap,
56
56
  columnGap: _styleMaps.positiveSpaceMap,
57
+ font: _styleMaps.fontMap,
58
+ fontFamily: _styleMaps.fontFamilyMap,
59
+ fontWeight: _styleMaps.fontWeightMap,
57
60
  gap: _styleMaps.positiveSpaceMap,
58
61
  height: _styleMaps.dimensionMap,
59
62
  inlineSize: _styleMaps.dimensionMap,
package/dist/es2019/components/anchor.js CHANGED
@@ -95,7 +95,7 @@ const AnchorNoRef = ({
95
95
  action: 'clicked',
96
96
  componentName: componentName || 'Anchor',
97
97
  packageName: "@atlaskit/primitives",
98
- packageVersion: "12.0.1",
98
+ packageVersion: "12.1.0",
99
99
  analyticsData: analyticsContext,
100
100
  actionSubject: 'link'
101
101
  });
package/dist/es2019/components/pressable.js CHANGED
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
85
85
  action: 'clicked',
86
86
  componentName: componentName || 'Pressable',
87
87
  packageName: "@atlaskit/primitives",
88
- packageVersion: "12.0.1",
88
+ packageVersion: "12.1.0",
89
89
  analyticsData: analyticsContext,
90
90
  actionSubject: 'button'
91
91
  });
package/dist/es2019/components/text.js CHANGED
@@ -7,7 +7,7 @@ import { createContext, forwardRef, useContext } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import invariant from 'tiny-invariant';
10
- import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
10
+ import { inverseColorMap, textColorStylesMap, textSizeStylesMap, textWeightStylesMap } from '../xcss/style-maps.partial';
11
11
  import { useSurface } from './internal/surface-provider';
12
12
  const asAllowlist = ['span', 'p', 'strong', 'em'];
13
13
  // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -96,11 +96,11 @@ const Text = /*#__PURE__*/forwardRef(({
96
96
  ref: ref,
97
97
  css: [resetStyles,
98
98
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
99
- fontStylesMap[size],
99
+ textSizeStylesMap[size],
100
100
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
101
101
  color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
102
102
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
103
- weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
103
+ weight && textWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
104
104
  style: {
105
105
  WebkitLineClamp: maxLines
106
106
  },
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -494,24 +494,32 @@ export const borderRadiusMap = {
494
494
 
495
495
  /**
496
496
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
497
- * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
497
+ * @codegen <<SignedSource::80cc7623e264a740959237b5a1643873>>
498
498
  * @codegenId typography
499
499
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
500
500
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
501
501
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
502
502
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
503
503
  */
504
- export const fontSizeMap = {
505
- medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
506
- UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
507
- large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
508
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
504
+ export const fontMap = {
505
+ 'font.body': "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
506
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
507
+ 'font.body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
508
+ 'font.body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
509
+ 'font.code': "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
510
+ 'font.heading.large': "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
511
+ 'font.heading.medium': "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
+ 'font.heading.small': "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
514
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
515
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
516
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
509
517
  };
510
518
  export const fontWeightMap = {
511
- bold: "var(--ds-font-weight-bold, 700)",
512
- medium: "var(--ds-font-weight-medium, 500)",
513
- regular: "var(--ds-font-weight-regular, 400)",
514
- semibold: "var(--ds-font-weight-semibold, 600)"
519
+ 'font.weight.bold': "var(--ds-font-weight-bold, 700)",
520
+ 'font.weight.medium': "var(--ds-font-weight-medium, 500)",
521
+ 'font.weight.regular': "var(--ds-font-weight-regular, 400)",
522
+ 'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
515
523
  };
516
524
  export const fontFamilyMap = {
517
525
  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -520,6 +528,30 @@ export const fontFamilyMap = {
520
528
  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
521
529
  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
522
530
  };
531
+ /**
532
+ * @codegenEnd
533
+ */
534
+
535
+ /**
536
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
537
+ * @codegen <<SignedSource::d92525f319a39edc53a30184bd02aa2c>>
538
+ * @codegenId text
539
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
540
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
541
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
542
+ */
543
+ export const textSizeMap = {
544
+ medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
545
+ UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
546
+ large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
547
+ small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
548
+ };
549
+ export const textWeightMap = {
550
+ bold: "var(--ds-font-weight-bold, 700)",
551
+ medium: "var(--ds-font-weight-medium, 500)",
552
+ regular: "var(--ds-font-weight-regular, 400)",
553
+ semibold: "var(--ds-font-weight-semibold, 600)"
554
+ };
523
555
 
524
556
  /**
525
557
  * @codegenEnd
@@ -533,8 +565,9 @@ const spacingProperties = [
533
565
  'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
534
566
  // Used by Inline and Stack
535
567
  'gap', 'rowGap', 'columnGap'];
536
- const getSerializedStylesMap = (cssProperty, tokenMap) => {
568
+ export const getSerializedStylesMap = (cssProperty, tokenMap) => {
537
569
  return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
570
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
538
571
  emotionSpacingMap[token] = css({
539
572
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
540
573
  [cssProperty]: tokenMap[token]
@@ -554,6 +587,8 @@ export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor'
554
587
  export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
555
588
  export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
556
589
  export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
557
- export const fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
590
+ export const fontStylesMap = getSerializedStylesMap('font', fontMap);
591
+ export const textSizeStylesMap = getSerializedStylesMap('font', textSizeMap);
592
+ export const textWeightStylesMap = getSerializedStylesMap('fontWeight', textWeightMap);
558
593
  export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
559
594
  export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;
package/dist/es2019/xcss/xcss.js CHANGED
@@ -4,7 +4,7 @@ import { css as cssEmotion } from '@emotion/react';
4
4
 
5
5
  // eslint-disable-next-line import/no-extraneous-dependencies
6
6
 
7
- import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
7
+ import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, fontFamilyMap, fontMap, fontWeightMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
8
8
  export const tokensMap = {
9
9
  backgroundColor: backgroundColorMap,
10
10
  blockSize: dimensionMap,
@@ -43,6 +43,9 @@ export const tokensMap = {
43
43
  boxShadow: shadowMap,
44
44
  color: textColorMap,
45
45
  columnGap: positiveSpaceMap,
46
+ font: fontMap,
47
+ fontFamily: fontFamilyMap,
48
+ fontWeight: fontWeightMap,
46
49
  gap: positiveSpaceMap,
47
50
  height: dimensionMap,
48
51
  inlineSize: dimensionMap,
package/dist/esm/components/anchor.js CHANGED
@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
99
99
  action: 'clicked',
100
100
  componentName: componentName || 'Anchor',
101
101
  packageName: "@atlaskit/primitives",
102
- packageVersion: "12.0.1",
102
+ packageVersion: "12.1.0",
103
103
  analyticsData: analyticsContext,
104
104
  actionSubject: 'link'
105
105
  });
package/dist/esm/components/pressable.js CHANGED
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
89
89
  action: 'clicked',
90
90
  componentName: componentName || 'Pressable',
91
91
  packageName: "@atlaskit/primitives",
92
- packageVersion: "12.0.1",
92
+ packageVersion: "12.1.0",
93
93
  analyticsData: analyticsContext,
94
94
  actionSubject: 'button'
95
95
  });
package/dist/esm/components/text.js CHANGED
@@ -7,7 +7,7 @@ import { createContext, forwardRef, useContext } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import invariant from 'tiny-invariant';
10
- import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
10
+ import { inverseColorMap, textColorStylesMap, textSizeStylesMap, textWeightStylesMap } from '../xcss/style-maps.partial';
11
11
  import { useSurface } from './internal/surface-provider';
12
12
  var asAllowlist = ['span', 'p', 'strong', 'em'];
13
13
  // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -99,11 +99,11 @@ var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
99
99
  ref: ref,
100
100
  css: [resetStyles,
101
101
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
102
- fontStylesMap[size],
102
+ textSizeStylesMap[size],
103
103
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
104
104
  color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, align && textAlignMap[align],
105
105
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
106
- weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
106
+ weight && textWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
107
107
  style: {
108
108
  WebkitLineClamp: maxLines
109
109
  },
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -494,24 +494,32 @@ export var borderRadiusMap = {
494
494
 
495
495
  /**
496
496
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
497
- * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
497
+ * @codegen <<SignedSource::80cc7623e264a740959237b5a1643873>>
498
498
  * @codegenId typography
499
499
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
500
500
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
501
501
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
502
502
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
503
503
  */
504
- export var fontSizeMap = {
505
- medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
506
- UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
507
- large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
508
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
504
+ export var fontMap = {
505
+ 'font.body': "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
506
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
507
+ 'font.body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
508
+ 'font.body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
509
+ 'font.code': "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
510
+ 'font.heading.large': "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
511
+ 'font.heading.medium': "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
+ 'font.heading.small': "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge, normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
514
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
515
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
516
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
509
517
  };
510
518
  export var fontWeightMap = {
511
- bold: "var(--ds-font-weight-bold, 700)",
512
- medium: "var(--ds-font-weight-medium, 500)",
513
- regular: "var(--ds-font-weight-regular, 400)",
514
- semibold: "var(--ds-font-weight-semibold, 600)"
519
+ 'font.weight.bold': "var(--ds-font-weight-bold, 700)",
520
+ 'font.weight.medium': "var(--ds-font-weight-medium, 500)",
521
+ 'font.weight.regular': "var(--ds-font-weight-regular, 400)",
522
+ 'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
515
523
  };
516
524
  export var fontFamilyMap = {
517
525
  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -520,6 +528,30 @@ export var fontFamilyMap = {
520
528
  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
521
529
  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
522
530
  };
531
+ /**
532
+ * @codegenEnd
533
+ */
534
+
535
+ /**
536
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
537
+ * @codegen <<SignedSource::d92525f319a39edc53a30184bd02aa2c>>
538
+ * @codegenId text
539
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
540
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
541
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
542
+ */
543
+ export var textSizeMap = {
544
+ medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
545
+ UNSAFE_small: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
546
+ large: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
547
+ small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
548
+ };
549
+ export var textWeightMap = {
550
+ bold: "var(--ds-font-weight-bold, 700)",
551
+ medium: "var(--ds-font-weight-medium, 500)",
552
+ regular: "var(--ds-font-weight-regular, 400)",
553
+ semibold: "var(--ds-font-weight-semibold, 600)"
554
+ };
523
555
 
524
556
  /**
525
557
  * @codegenEnd
@@ -533,8 +565,9 @@ var spacingProperties = [
533
565
  'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd',
534
566
  // Used by Inline and Stack
535
567
  'gap', 'rowGap', 'columnGap'];
536
- var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
568
+ export var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
537
569
  return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
570
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
538
571
  emotionSpacingMap[token] = css(_defineProperty({}, cssProperty, tokenMap[token]));
539
572
  return emotionSpacingMap;
540
573
  }, {});
@@ -551,7 +584,9 @@ export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor',
551
584
  export var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
552
585
  export var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
553
586
  export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
554
- export var fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
587
+ export var fontStylesMap = getSerializedStylesMap('font', fontMap);
588
+ export var textSizeStylesMap = getSerializedStylesMap('font', textSizeMap);
589
+ export var textWeightStylesMap = getSerializedStylesMap('fontWeight', textWeightMap);
555
590
  export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
556
591
  export var isSurfaceColorToken = function isSurfaceColorToken(color) {
557
592
  return surfaceColorMap[color] !== undefined;
package/dist/esm/xcss/xcss.js CHANGED
@@ -11,7 +11,7 @@ import { css as cssEmotion } from '@emotion/react';
11
11
 
12
12
  // eslint-disable-next-line import/no-extraneous-dependencies
13
13
 
14
- import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
14
+ import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, fontFamilyMap, fontMap, fontWeightMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
15
15
  export var tokensMap = {
16
16
  backgroundColor: backgroundColorMap,
17
17
  blockSize: dimensionMap,
@@ -50,6 +50,9 @@ export var tokensMap = {
50
50
  boxShadow: shadowMap,
51
51
  color: textColorMap,
52
52
  columnGap: positiveSpaceMap,
53
+ font: fontMap,
54
+ fontFamily: fontFamilyMap,
55
+ fontWeight: fontWeightMap,
53
56
  gap: positiveSpaceMap,
54
57
  height: dimensionMap,
55
58
  inlineSize: dimensionMap,
package/dist/types/components/text.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
6
- import { type FontSize, type FontWeight, type TextColor } from '../xcss/style-maps.partial';
6
+ import { type TextColor, type TextSize, type TextWeight } from '../xcss/style-maps.partial';
7
7
  import type { BasePrimitiveProps } from './types';
8
8
  declare const asAllowlist: readonly ["span", "p", "strong", "em"];
9
9
  type AsElement = (typeof asAllowlist)[number];
@@ -39,11 +39,11 @@ type TextPropsBase<T extends ElementType = 'span'> = {
39
39
  /**
40
40
  * Text size.
41
41
  */
42
- size?: FontSize;
42
+ size?: TextSize;
43
43
  /**
44
- * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
44
+ * Font weight.
45
45
  */
46
- weight?: FontWeight;
46
+ weight?: TextWeight;
47
47
  /**
48
48
  * Forwarded ref.
49
49
  */
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type SerializedStyles } from '@emotion/react';
2
+ import { CURRENT_SURFACE_CSS_VAR, token } from '@atlaskit/tokens';
2
3
  /**
3
4
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
5
  * @codegen <<SignedSource::c98c944b8a999cfc194a2cfe851d2433>>
@@ -518,25 +519,33 @@ export type BorderRadius = keyof typeof borderRadiusMap;
518
519
  */
519
520
  /**
520
521
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
521
- * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
522
+ * @codegen <<SignedSource::80cc7623e264a740959237b5a1643873>>
522
523
  * @codegenId typography
523
524
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
524
525
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
525
526
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
526
527
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
527
528
  */
528
- export declare const fontSizeMap: {
529
- medium: "var(--ds-font-body)";
530
- UNSAFE_small: "var(--ds-font-body-UNSAFE_small)";
531
- large: "var(--ds-font-body-large)";
532
- small: "var(--ds-font-body-small)";
529
+ export declare const fontMap: {
530
+ 'font.body': "var(--ds-font-body)";
531
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small)";
532
+ 'font.body.large': "var(--ds-font-body-large)";
533
+ 'font.body.small': "var(--ds-font-body-small)";
534
+ 'font.code': "var(--ds-font-code)";
535
+ 'font.heading.large': "var(--ds-font-heading-large)";
536
+ 'font.heading.medium': "var(--ds-font-heading-medium)";
537
+ 'font.heading.small': "var(--ds-font-heading-small)";
538
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge)";
539
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
540
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
541
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
533
542
  };
534
- export type FontSize = keyof typeof fontSizeMap;
543
+ export type Font = keyof typeof fontMap;
535
544
  export declare const fontWeightMap: {
536
- bold: "var(--ds-font-weight-bold)";
537
- medium: "var(--ds-font-weight-medium)";
538
- regular: "var(--ds-font-weight-regular)";
539
- semibold: "var(--ds-font-weight-semibold)";
545
+ 'font.weight.bold': "var(--ds-font-weight-bold)";
546
+ 'font.weight.medium': "var(--ds-font-weight-medium)";
547
+ 'font.weight.regular': "var(--ds-font-weight-regular)";
548
+ 'font.weight.semibold': "var(--ds-font-weight-semibold)";
540
549
  };
541
550
  export type FontWeight = keyof typeof fontWeightMap;
542
551
  export declare const fontFamilyMap: {
@@ -547,6 +556,31 @@ export declare const fontFamilyMap: {
547
556
  'font.family.heading': "var(--ds-font-family-heading)";
548
557
  };
549
558
  export type FontFamily = keyof typeof fontFamilyMap;
559
+ /**
560
+ * @codegenEnd
561
+ */
562
+ /**
563
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
564
+ * @codegen <<SignedSource::d92525f319a39edc53a30184bd02aa2c>>
565
+ * @codegenId text
566
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
567
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
568
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
569
+ */
570
+ export declare const textSizeMap: {
571
+ medium: "var(--ds-font-body)";
572
+ UNSAFE_small: "var(--ds-font-body-UNSAFE_small)";
573
+ large: "var(--ds-font-body-large)";
574
+ small: "var(--ds-font-body-small)";
575
+ };
576
+ export type TextSize = keyof typeof textSizeMap;
577
+ export declare const textWeightMap: {
578
+ bold: "var(--ds-font-weight-bold)";
579
+ medium: "var(--ds-font-weight-medium)";
580
+ regular: "var(--ds-font-weight-regular)";
581
+ semibold: "var(--ds-font-weight-semibold)";
582
+ };
583
+ export type TextWeight = keyof typeof textWeightMap;
550
584
  /**
551
585
  * @codegenEnd
552
586
  */
@@ -592,6 +626,9 @@ export type TokenisedProps = {
592
626
  boxShadow?: Shadow;
593
627
  color?: TextColor;
594
628
  columnGap?: Space;
629
+ font?: Font | string;
630
+ fontFamily?: FontFamily | string;
631
+ fontWeight?: FontWeight | string | number;
595
632
  gap?: Space;
596
633
  height?: Dimension | string;
597
634
  inlineSize?: Dimension | string;
@@ -645,20 +682,29 @@ export type TokenisedProps = {
645
682
  };
646
683
  declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
647
684
  type SpacingProperty = (typeof spacingProperties)[number];
685
+ type TokenMappableProperty = SpacingProperty | 'backgroundColor' | 'fontWeight' | 'fontSize' | 'fontFamily' | 'lineHeight' | 'color' | 'font' | typeof CURRENT_SURFACE_CSS_VAR;
686
+ type PropsToken = SpacingToken | BackgroundColorToken | FontWeightToken | FontFamilyToken | TextColorToken | FontToken | TextWeightToken | TextSizeToken;
687
+ type TokenMap = Partial<Record<PropsToken, ReturnType<typeof token>>>;
688
+ type SerializedStylesMap = Record<PropsToken, SerializedStyles>;
689
+ export declare const getSerializedStylesMap: (cssProperty: TokenMappableProperty, tokenMap: TokenMap) => SerializedStylesMap;
648
690
  type SpacingToken = keyof typeof positiveSpaceMap;
649
691
  type BackgroundColorToken = keyof typeof backgroundColorMap;
650
692
  type SurfaceColorToken = keyof typeof surfaceColorMap;
651
693
  type TextColorToken = keyof typeof textColorMap;
652
694
  type FontWeightToken = keyof typeof fontWeightMap;
653
695
  type FontFamilyToken = keyof typeof fontFamilyMap;
654
- type BodyFontToken = keyof typeof fontSizeMap;
696
+ type FontToken = keyof typeof fontMap;
697
+ type TextWeightToken = keyof typeof textWeightMap;
698
+ type TextSizeToken = keyof typeof textSizeMap;
655
699
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
656
700
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
657
701
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
658
702
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
659
703
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
660
704
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
661
- type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
705
+ type FontStyleMap = Record<FontToken, SerializedStyles>;
706
+ type TextWeightStyleMap = Record<TextWeightToken, SerializedStyles>;
707
+ type TextStyleMap = Record<TextSizeToken, SerializedStyles>;
662
708
  export declare const paddingStylesMap: SpacingStyleMap;
663
709
  export declare const spaceStylesMap: SpacingStyleMap;
664
710
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
@@ -666,6 +712,8 @@ export declare const textColorStylesMap: TextColorStyleMap;
666
712
  export declare const fontWeightStylesMap: FontWeightStyleMap;
667
713
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
668
714
  export declare const fontStylesMap: FontStyleMap;
715
+ export declare const textSizeStylesMap: TextStyleMap;
716
+ export declare const textWeightStylesMap: TextWeightStyleMap;
669
717
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
670
718
  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";
671
719
  export {};
package/dist/types/xcss/xcss.d.ts CHANGED
@@ -722,6 +722,33 @@ export declare const tokensMap: {
722
722
  'space.800': "var(--ds-space-800)";
723
723
  'space.1000': "var(--ds-space-1000)";
724
724
  };
725
+ readonly font: {
726
+ 'font.body': "var(--ds-font-body)";
727
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small)";
728
+ 'font.body.large': "var(--ds-font-body-large)";
729
+ 'font.body.small': "var(--ds-font-body-small)";
730
+ 'font.code': "var(--ds-font-code)";
731
+ 'font.heading.large': "var(--ds-font-heading-large)";
732
+ 'font.heading.medium': "var(--ds-font-heading-medium)";
733
+ 'font.heading.small': "var(--ds-font-heading-small)";
734
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge)";
735
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
736
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
737
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
738
+ };
739
+ readonly fontFamily: {
740
+ 'font.family.body': "var(--ds-font-family-body)";
741
+ 'font.family.brand.body': "var(--ds-font-family-brand-body)";
742
+ 'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
743
+ 'font.family.code': "var(--ds-font-family-code)";
744
+ 'font.family.heading': "var(--ds-font-family-heading)";
745
+ };
746
+ readonly fontWeight: {
747
+ 'font.weight.bold': "var(--ds-font-weight-bold)";
748
+ 'font.weight.medium': "var(--ds-font-weight-medium)";
749
+ 'font.weight.regular': "var(--ds-font-weight-regular)";
750
+ 'font.weight.semibold': "var(--ds-font-weight-semibold)";
751
+ };
725
752
  readonly gap: {
726
753
  'space.0': "var(--ds-space-0)";
727
754
  'space.025': "var(--ds-space-025)";
package/dist/types-ts4.5/components/text.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
6
- import { type FontSize, type FontWeight, type TextColor } from '../xcss/style-maps.partial';
6
+ import { type TextColor, type TextSize, type TextWeight } from '../xcss/style-maps.partial';
7
7
  import type { BasePrimitiveProps } from './types';
8
8
  declare const asAllowlist: readonly [
9
9
  "span",
@@ -44,11 +44,11 @@ type TextPropsBase<T extends ElementType = 'span'> = {
44
44
  /**
45
45
  * Text size.
46
46
  */
47
- size?: FontSize;
47
+ size?: TextSize;
48
48
  /**
49
- * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
49
+ * Font weight.
50
50
  */
51
- weight?: FontWeight;
51
+ weight?: TextWeight;
52
52
  /**
53
53
  * Forwarded ref.
54
54
  */
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type SerializedStyles } from '@emotion/react';
2
+ import { CURRENT_SURFACE_CSS_VAR, token } from '@atlaskit/tokens';
2
3
  /**
3
4
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
5
  * @codegen <<SignedSource::c98c944b8a999cfc194a2cfe851d2433>>
@@ -518,25 +519,33 @@ export type BorderRadius = keyof typeof borderRadiusMap;
518
519
  */
519
520
  /**
520
521
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
521
- * @codegen <<SignedSource::cd260411f17d54ff1ac7e627ef070ef4>>
522
+ * @codegen <<SignedSource::80cc7623e264a740959237b5a1643873>>
522
523
  * @codegenId typography
523
524
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
524
525
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
525
526
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
526
527
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
527
528
  */
528
- export declare const fontSizeMap: {
529
- medium: "var(--ds-font-body)";
530
- UNSAFE_small: "var(--ds-font-body-UNSAFE_small)";
531
- large: "var(--ds-font-body-large)";
532
- small: "var(--ds-font-body-small)";
529
+ export declare const fontMap: {
530
+ 'font.body': "var(--ds-font-body)";
531
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small)";
532
+ 'font.body.large': "var(--ds-font-body-large)";
533
+ 'font.body.small': "var(--ds-font-body-small)";
534
+ 'font.code': "var(--ds-font-code)";
535
+ 'font.heading.large': "var(--ds-font-heading-large)";
536
+ 'font.heading.medium': "var(--ds-font-heading-medium)";
537
+ 'font.heading.small': "var(--ds-font-heading-small)";
538
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge)";
539
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
540
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
541
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
533
542
  };
534
- export type FontSize = keyof typeof fontSizeMap;
543
+ export type Font = keyof typeof fontMap;
535
544
  export declare const fontWeightMap: {
536
- bold: "var(--ds-font-weight-bold)";
537
- medium: "var(--ds-font-weight-medium)";
538
- regular: "var(--ds-font-weight-regular)";
539
- semibold: "var(--ds-font-weight-semibold)";
545
+ 'font.weight.bold': "var(--ds-font-weight-bold)";
546
+ 'font.weight.medium': "var(--ds-font-weight-medium)";
547
+ 'font.weight.regular': "var(--ds-font-weight-regular)";
548
+ 'font.weight.semibold': "var(--ds-font-weight-semibold)";
540
549
  };
541
550
  export type FontWeight = keyof typeof fontWeightMap;
542
551
  export declare const fontFamilyMap: {
@@ -547,6 +556,31 @@ export declare const fontFamilyMap: {
547
556
  'font.family.heading': "var(--ds-font-family-heading)";
548
557
  };
549
558
  export type FontFamily = keyof typeof fontFamilyMap;
559
+ /**
560
+ * @codegenEnd
561
+ */
562
+ /**
563
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
564
+ * @codegen <<SignedSource::d92525f319a39edc53a30184bd02aa2c>>
565
+ * @codegenId text
566
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
567
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
568
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
569
+ */
570
+ export declare const textSizeMap: {
571
+ medium: "var(--ds-font-body)";
572
+ UNSAFE_small: "var(--ds-font-body-UNSAFE_small)";
573
+ large: "var(--ds-font-body-large)";
574
+ small: "var(--ds-font-body-small)";
575
+ };
576
+ export type TextSize = keyof typeof textSizeMap;
577
+ export declare const textWeightMap: {
578
+ bold: "var(--ds-font-weight-bold)";
579
+ medium: "var(--ds-font-weight-medium)";
580
+ regular: "var(--ds-font-weight-regular)";
581
+ semibold: "var(--ds-font-weight-semibold)";
582
+ };
583
+ export type TextWeight = keyof typeof textWeightMap;
550
584
  /**
551
585
  * @codegenEnd
552
586
  */
@@ -592,6 +626,9 @@ export type TokenisedProps = {
592
626
  boxShadow?: Shadow;
593
627
  color?: TextColor;
594
628
  columnGap?: Space;
629
+ font?: Font | string;
630
+ fontFamily?: FontFamily | string;
631
+ fontWeight?: FontWeight | string | number;
595
632
  gap?: Space;
596
633
  height?: Dimension | string;
597
634
  inlineSize?: Dimension | string;
@@ -656,20 +693,29 @@ declare const spacingProperties: readonly [
656
693
  "columnGap"
657
694
  ];
658
695
  type SpacingProperty = (typeof spacingProperties)[number];
696
+ type TokenMappableProperty = SpacingProperty | 'backgroundColor' | 'fontWeight' | 'fontSize' | 'fontFamily' | 'lineHeight' | 'color' | 'font' | typeof CURRENT_SURFACE_CSS_VAR;
697
+ type PropsToken = SpacingToken | BackgroundColorToken | FontWeightToken | FontFamilyToken | TextColorToken | FontToken | TextWeightToken | TextSizeToken;
698
+ type TokenMap = Partial<Record<PropsToken, ReturnType<typeof token>>>;
699
+ type SerializedStylesMap = Record<PropsToken, SerializedStyles>;
700
+ export declare const getSerializedStylesMap: (cssProperty: TokenMappableProperty, tokenMap: TokenMap) => SerializedStylesMap;
659
701
  type SpacingToken = keyof typeof positiveSpaceMap;
660
702
  type BackgroundColorToken = keyof typeof backgroundColorMap;
661
703
  type SurfaceColorToken = keyof typeof surfaceColorMap;
662
704
  type TextColorToken = keyof typeof textColorMap;
663
705
  type FontWeightToken = keyof typeof fontWeightMap;
664
706
  type FontFamilyToken = keyof typeof fontFamilyMap;
665
- type BodyFontToken = keyof typeof fontSizeMap;
707
+ type FontToken = keyof typeof fontMap;
708
+ type TextWeightToken = keyof typeof textWeightMap;
709
+ type TextSizeToken = keyof typeof textSizeMap;
666
710
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
667
711
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
668
712
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
669
713
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
670
714
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
671
715
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
672
- type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
716
+ type FontStyleMap = Record<FontToken, SerializedStyles>;
717
+ type TextWeightStyleMap = Record<TextWeightToken, SerializedStyles>;
718
+ type TextStyleMap = Record<TextSizeToken, SerializedStyles>;
673
719
  export declare const paddingStylesMap: SpacingStyleMap;
674
720
  export declare const spaceStylesMap: SpacingStyleMap;
675
721
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
@@ -677,6 +723,8 @@ export declare const textColorStylesMap: TextColorStyleMap;
677
723
  export declare const fontWeightStylesMap: FontWeightStyleMap;
678
724
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
679
725
  export declare const fontStylesMap: FontStyleMap;
726
+ export declare const textSizeStylesMap: TextStyleMap;
727
+ export declare const textWeightStylesMap: TextWeightStyleMap;
680
728
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
681
729
  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";
682
730
  export {};
package/dist/types-ts4.5/xcss/xcss.d.ts CHANGED
@@ -722,6 +722,33 @@ export declare const tokensMap: {
722
722
  'space.800': "var(--ds-space-800)";
723
723
  'space.1000': "var(--ds-space-1000)";
724
724
  };
725
+ readonly font: {
726
+ 'font.body': "var(--ds-font-body)";
727
+ 'font.body.UNSAFE_small': "var(--ds-font-body-UNSAFE_small)";
728
+ 'font.body.large': "var(--ds-font-body-large)";
729
+ 'font.body.small': "var(--ds-font-body-small)";
730
+ 'font.code': "var(--ds-font-code)";
731
+ 'font.heading.large': "var(--ds-font-heading-large)";
732
+ 'font.heading.medium': "var(--ds-font-heading-medium)";
733
+ 'font.heading.small': "var(--ds-font-heading-small)";
734
+ 'font.heading.xlarge': "var(--ds-font-heading-xlarge)";
735
+ 'font.heading.xsmall': "var(--ds-font-heading-xsmall)";
736
+ 'font.heading.xxlarge': "var(--ds-font-heading-xxlarge)";
737
+ 'font.heading.xxsmall': "var(--ds-font-heading-xxsmall)";
738
+ };
739
+ readonly fontFamily: {
740
+ 'font.family.body': "var(--ds-font-family-body)";
741
+ 'font.family.brand.body': "var(--ds-font-family-brand-body)";
742
+ 'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
743
+ 'font.family.code': "var(--ds-font-family-code)";
744
+ 'font.family.heading': "var(--ds-font-family-heading)";
745
+ };
746
+ readonly fontWeight: {
747
+ 'font.weight.bold': "var(--ds-font-weight-bold)";
748
+ 'font.weight.medium': "var(--ds-font-weight-medium)";
749
+ 'font.weight.regular': "var(--ds-font-weight-regular)";
750
+ 'font.weight.semibold': "var(--ds-font-weight-semibold)";
751
+ };
725
752
  readonly gap: {
726
753
  'space.0': "var(--ds-space-0)";
727
754
  'space.025': "var(--ds-space-025)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "12.0.1",
3
+ "version": "12.1.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -120,9 +120,9 @@
120
120
  "@atlaskit/analytics-next": "^10.1.0",
121
121
  "@atlaskit/app-provider": "^1.4.0",
122
122
  "@atlaskit/css": "^0.4.0",
123
- "@atlaskit/ds-lib": "^2.4.0",
123
+ "@atlaskit/ds-lib": "^2.5.0",
124
124
  "@atlaskit/interaction-context": "^2.1.0",
125
- "@atlaskit/tokens": "^1.58.0",
125
+ "@atlaskit/tokens": "^1.59.0",
126
126
  "@atlaskit/visually-hidden": "^1.5.0",
127
127
  "@babel/runtime": "^7.0.0",
128
128
  "@emotion/react": "^11.7.1",
package/scripts/codegen-styles.tsx CHANGED
@@ -10,6 +10,7 @@ import { createElevationStylesFromTemplate } from './elevation-codegen-template'
10
10
  import { createInverseColorMapTemplate } from './inverse-color-map-template';
11
11
  import { createStylesFromFileTemplate } from './misc-codegen-template';
12
12
  import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
13
+ import { createTextStylesFromTemplate } from './text-codegen-template';
13
14
  import { createTypographyStylesFromTemplate } from './typography-codegen-template';
14
15
 
15
16
  const colorTokensDependencyPath = require.resolve(
@@ -119,6 +120,17 @@ const sourceFns = [
119
120
  dependencies: templateFiles,
120
121
  },
121
122
  ),
123
+ // font and weight map for text primitive
124
+ () =>
125
+ createPartialSignedArtifact(
126
+ createTextStylesFromTemplate,
127
+ 'yarn workspace @atlaskit/primitives codegen-styles',
128
+ {
129
+ id: 'text',
130
+ absoluteFilePath: targetPath,
131
+ dependencies: templateFiles,
132
+ },
133
+ ),
122
134
  ];
123
135
 
124
136
  sourceFns.forEach((sourceFn) => {
package/scripts/text-codegen-template.tsx ADDED
@@ -0,0 +1,81 @@
1
+ import format from '@af/formatting/sync';
2
+ import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
3
+
4
+ import { capitalize, constructTokenFunctionCall } from './utils';
5
+
6
+ type Token = {
7
+ name: string;
8
+ fallback: string;
9
+ };
10
+
11
+ const activeTokens: Token[] = tokens
12
+ .filter((t) => t.attributes.state === 'active')
13
+ .map((t) => ({
14
+ name: t.name,
15
+ fallback: t.value,
16
+ }));
17
+
18
+ const textProperties = [
19
+ {
20
+ objectName: 'textSize',
21
+ cssProperty: 'font',
22
+ prefix: 'font.body',
23
+ filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
24
+ },
25
+ {
26
+ objectName: 'textWeight',
27
+ cssProperty: 'fontWeight',
28
+ prefix: 'font.weight.',
29
+ filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
30
+ },
31
+ ] as const;
32
+
33
+ const bodySizeMap = {
34
+ 'body.small': 'small',
35
+ 'body.UNSAFE_small': 'UNSAFE_small',
36
+ body: 'medium',
37
+ 'body.large': 'large',
38
+ };
39
+
40
+ const removeVerbosity = (name: string): string => {
41
+ const partialRemove = ['font.body'];
42
+ if (partialRemove.some((s) => name.includes(s))) {
43
+ // @ts-expect-error Indexing bodySizeMap
44
+ return bodySizeMap[name.replace('font.', '')];
45
+ }
46
+
47
+ const fullRemove = ['font.weight'];
48
+ const removeIndex = fullRemove.findIndex((s) => name.includes(s));
49
+ if (removeIndex > -1) {
50
+ return name.replace(`${fullRemove[removeIndex]}.`, '');
51
+ }
52
+
53
+ return name;
54
+ };
55
+
56
+ export const createTextStylesFromTemplate = () => {
57
+ return textProperties
58
+ .map((textProperty) => {
59
+ const { filterFn, objectName } = textProperty;
60
+
61
+ return (
62
+ format(
63
+ `
64
+ export const ${objectName}Map = {
65
+ ${activeTokens
66
+ .filter(filterFn)
67
+ .map((t) => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
68
+ .sort((a, b) => (a.name < b.name ? -1 : 1))
69
+ .map((token) => {
70
+ return `
71
+ '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(token.name, token.fallback)}
72
+ `.trim();
73
+ })
74
+ .join(',\n\t')}
75
+ };`,
76
+ 'typescript',
77
+ ) + `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
78
+ );
79
+ })
80
+ .join('\n');
81
+ };
package/scripts/typography-codegen-template.tsx CHANGED
@@ -17,10 +17,13 @@ const activeTokens: Token[] = tokens
17
17
 
18
18
  const typographyProperties = [
19
19
  {
20
- objectName: 'fontSize',
20
+ objectName: 'font',
21
21
  cssProperty: 'font',
22
22
  prefix: 'font.body',
23
- filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
23
+ filterFn: <T extends Token>(t: T) =>
24
+ t.name.startsWith('font.body') ||
25
+ t.name.startsWith('font.heading') ||
26
+ t.name.startsWith('font.code'),
24
27
  },
25
28
  {
26
29
  objectName: 'fontWeight',
@@ -36,29 +39,6 @@ const typographyProperties = [
36
39
  },
37
40
  ] as const;
38
41
 
39
- const bodySizeMap = {
40
- 'body.small': 'small',
41
- 'body.UNSAFE_small': 'UNSAFE_small',
42
- body: 'medium',
43
- 'body.large': 'large',
44
- };
45
-
46
- const removeVerbosity = (name: string): string => {
47
- const partialRemove = ['font.body'];
48
- if (partialRemove.some((s) => name.includes(s))) {
49
- // @ts-expect-error Indexing bodySizeMap
50
- return bodySizeMap[name.replace('font.', '')];
51
- }
52
-
53
- const fullRemove = ['font.weight'];
54
- const removeIndex = fullRemove.findIndex((s) => name.includes(s));
55
- if (removeIndex > -1) {
56
- return name.replace(`${fullRemove[removeIndex]}.`, '');
57
- }
58
-
59
- return name;
60
- };
61
-
62
42
  export const createTypographyStylesFromTemplate = () => {
63
43
  return typographyProperties
64
44
  .map((typographyProperty) => {
@@ -74,7 +54,7 @@ ${activeTokens
74
54
  .sort((a, b) => (a.name < b.name ? -1 : 1))
75
55
  .map((token) => {
76
56
  return `
77
- '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(token.name, token.fallback)}
57
+ '${token.name}': ${constructTokenFunctionCall(token.name, token.fallback)}
78
58
  `.trim();
79
59
  })
80
60
  .join(',\n\t')}