@atlaskit/primitives 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/primitives
 
+## 1.20.0
+
+### Minor Changes
+
+- [#68163](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68163) [`67d09e3f972d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67d09e3f972d) - `weight` property added to `Text` to allow overriding text variant default font weight.
+- [#69343](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69343) [`77249f536425`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77249f536425) - `Text` color prop defaults to `color.text` if not provided.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.19.0
 
 ### Minor Changes

package/dist/cjs/components/text.js

@@ -83,21 +83,18 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var asElement = props.as,
-    colorProp = props.color,
+    _props$color = props.color,
+    colorProp = _props$color === void 0 ? 'color.text' : _props$color,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
     _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant;
-  var Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+    variant = _props$variant === void 0 ? 'body' : _props$variant,
+    weight = props.weight;
+
+  // body variants -> p
+  // ui variants -> span
+  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -116,7 +113,7 @@ var Text = function Text(_ref) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/cjs/xcss/style-maps.partial.js

@@ -496,7 +496,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -514,10 +514,10 @@ var fontSizeMap = exports.fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 var fontWeightMap = exports.fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 var fontFamilyMap = exports.fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -542,7 +542,7 @@ var bodyTextMap = exports.bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var uiTextMap = exports.uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

package/dist/es2019/components/text.js

@@ -2,7 +2,7 @@
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 const asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -75,21 +75,17 @@ const Text = ({
 }) => {
   const {
     as: asElement,
-    color: colorProp,
+    color: colorProp = 'color.text',
     textAlign,
     testId,
     id,
-    variant = 'body'
+    variant = 'body',
+    weight
   } = props;
-  let Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+
+  // body variants -> p
+  // ui variants -> span
+  const Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -108,7 +104,7 @@ const Text = ({
     return jsx(Fragment, null, children);
   }
   const component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/es2019/xcss/style-maps.partial.js

@@ -484,7 +484,7 @@ export const borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -502,10 +502,10 @@ export const fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 export const fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export const fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -530,7 +530,7 @@ export const bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export const uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

package/dist/esm/components/text.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -77,21 +77,18 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var asElement = props.as,
-    colorProp = props.color,
+    _props$color = props.color,
+    colorProp = _props$color === void 0 ? 'color.text' : _props$color,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
     _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant;
-  var Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+    variant = _props$variant === void 0 ? 'body' : _props$variant,
+    weight = props.weight;
+
+  // body variants -> p
+  // ui variants -> span
+  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -110,7 +107,7 @@ var Text = function Text(_ref) {
     return jsx(Fragment, null, children);
   }
   var component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/esm/xcss/style-maps.partial.js

@@ -484,7 +484,7 @@ export var borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -502,10 +502,10 @@ export var fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 export var fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export var fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -530,7 +530,7 @@ export var bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export var uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

package/dist/types/components/text.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
@@ -48,6 +48,10 @@ type TextPropsBase = {
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
+    /**
+     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     */
+    weight?: FontWeight;
 };
 export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;

package/dist/types/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -534,10 +534,10 @@ export declare const fontSizeMap: {
 };
 export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
-    'font.weight.bold': "var(--ds-font-weight-bold)";
-    'font.weight.medium': "var(--ds-font-weight-medium)";
-    'font.weight.regular': "var(--ds-font-weight-regular)";
-    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+    bold: "var(--ds-font-weight-bold)";
+    medium: "var(--ds-font-weight-medium)";
+    regular: "var(--ds-font-weight-regular)";
+    semibold: "var(--ds-font-weight-semibold)";
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {

package/dist/types-ts4.5/components/text.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
     "span",
@@ -53,6 +53,10 @@ type TextPropsBase = {
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
+    /**
+     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     */
+    weight?: FontWeight;
 };
 export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -534,10 +534,10 @@ export declare const fontSizeMap: {
 };
 export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
-    'font.weight.bold': "var(--ds-font-weight-bold)";
-    'font.weight.medium': "var(--ds-font-weight-medium)";
-    'font.weight.regular': "var(--ds-font-weight-regular)";
-    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+    bold: "var(--ds-font-weight-bold)";
+    medium: "var(--ds-font-weight-medium)";
+    regular: "var(--ds-font-weight-regular)";
+    semibold: "var(--ds-font-weight-semibold)";
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/typography-codegen-template.tsx

@@ -61,10 +61,17 @@ const activeTokens: Token[] = tokens.map(t => ({
 }));
 
 const removeVerbosity = (name: string): string => {
-  const toRemove = ['font.heading', 'font.ui', 'font.body'];
-  if (toRemove.some(s => name.includes(s))) {
+  const partialRemove = ['font.heading', 'font.ui', 'font.body'];
+  if (partialRemove.some(s => name.includes(s))) {
     return name.replace('font.', '');
   }
+
+  const fullRemove = ['font.weight'];
+  const removeIndex = fullRemove.findIndex(s => name.includes(s));
+  if (removeIndex > -1) {
+    return name.replace(`${fullRemove[removeIndex]}.`, '');
+  }
+
   return name;
 };