@atlaskit/css 0.18.1 → 0.19.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/css
 
+## 0.19.1
+
+### Patch Changes
+
+- [`f111803c4e253`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f111803c4e253) -
+  Updating typography fallbacks to refreshed typography values as the deprecated legacy typography
+  theme has been removed.
+- Updated dependencies
+
+## 0.19.0
+
+### Minor Changes
+
+- [`55546332d4ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55546332d4ef4) -
+  Restricted `borderRadius` xcss and cssMap types to only accept tokens, 0, and "inherit".
+  Restricted `borderWidth` types to only accept tokens and 0. Previously any string was allowed,
+  this is no longer the case and will throw a type error.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.18.1
 
 ### Patch Changes

package/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx

@@ -2,6 +2,7 @@
 import { css, type SerializedStyles } from '@emotion/react';
 
 import { CURRENT_SURFACE_CSS_VAR, token } from '@atlaskit/tokens';
+import type { CSSTokenMap } from '@atlaskit/tokens/token-names';
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
@@ -1372,7 +1373,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ab32bc819d015e7451c245e6a77eba28>>
+ * @codegen <<SignedSource::f81d01fb664f365972ac87a2be86aba6>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -1398,63 +1399,63 @@ export const fontMap: {
 } = {
 	'font.body': token(
 		'font.body',
-		'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 14px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.body.UNSAFE_small': token(
 		'font.body.UNSAFE_small',
-		'normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 12px/16px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.body.large': token(
 		'font.body.large',
-		'normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 16px/24px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.body.small': token(
 		'font.body.small',
-		'normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 12px/16px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.code': token(
 		'font.code',
-		'normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+		'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
 	),
 	'font.heading.large': token(
 		'font.heading.large',
-		'normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 24px/28px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.medium': token(
 		'font.heading.medium',
-		'normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 20px/24px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.small': token(
 		'font.heading.small',
-		'normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 16px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.xlarge': token(
 		'font.heading.xlarge',
-		'normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 28px/32px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.xsmall': token(
 		'font.heading.xsmall',
-		'normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 14px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.xxlarge': token(
 		'font.heading.xxlarge',
-		'normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 32px/36px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.heading.xxsmall': token(
 		'font.heading.xxsmall',
-		'normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 12px/16px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.metric.large': token(
 		'font.metric.large',
-		'normal 653 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 28px/32px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.metric.medium': token(
 		'font.metric.medium',
-		'normal 653 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 24px/28px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.metric.small': token(
 		'font.metric.small',
-		'normal 653 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 16px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 };
 
@@ -1466,7 +1467,7 @@ export const fontWeightMap: {
 	'font.weight.regular': 'var(--ds-font-weight-regular)';
 	'font.weight.semibold': 'var(--ds-font-weight-semibold)';
 } = {
-	'font.weight.bold': token('font.weight.bold', '700'),
+	'font.weight.bold': token('font.weight.bold', '653'),
 	'font.weight.medium': token('font.weight.medium', '500'),
 	'font.weight.regular': token('font.weight.regular', '400'),
 	'font.weight.semibold': token('font.weight.semibold', '600'),
@@ -1483,7 +1484,7 @@ export const fontFamilyMap: {
 } = {
 	'font.family.body': token(
 		'font.family.body',
-		'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	'font.family.brand.body': token(
 		'font.family.brand.body',
@@ -1495,11 +1496,11 @@ export const fontFamilyMap: {
 	),
 	'font.family.code': token(
 		'font.family.code',
-		'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
+		'"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
 	),
 	'font.family.heading': token(
 		'font.family.heading',
-		'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 };
 
@@ -1511,7 +1512,7 @@ export type FontFamily = keyof typeof fontFamilyMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::379f638b84496f34817234c7f3c58f74>>
+ * @codegen <<SignedSource::aeebc24b95e2189021f1d98f1715a6a0>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
@@ -1525,19 +1526,19 @@ export const textSizeMap: {
 } = {
 	medium: token(
 		'font.body',
-		'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 14px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	UNSAFE_small: token(
 		'font.body.UNSAFE_small',
-		'normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 12px/16px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	large: token(
 		'font.body.large',
-		'normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 16px/24px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	small: token(
 		'font.body.small',
-		'normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 400 12px/16px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 };
 
@@ -1549,7 +1550,7 @@ export const textWeightMap: {
 	regular: 'var(--ds-font-weight-regular)';
 	semibold: 'var(--ds-font-weight-semibold)';
 } = {
-	bold: token('font.weight.bold', '700'),
+	bold: token('font.weight.bold', '653'),
 	medium: token('font.weight.medium', '500'),
 	regular: token('font.weight.regular', '400'),
 	semibold: token('font.weight.semibold', '600'),
@@ -1564,15 +1565,15 @@ export const metricTextSizeMap: {
 } = {
 	large: token(
 		'font.metric.large',
-		'normal 653 28px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 28px/32px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	medium: token(
 		'font.metric.medium',
-		'normal 653 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 24px/28px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 	small: token(
 		'font.metric.small',
-		'normal 653 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+		'normal 653 16px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
 };
 
@@ -1585,6 +1586,15 @@ export type MetricTextSize = keyof typeof metricTextSizeMap;
 // Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
 type MarginSpace = AllSpace | 'auto' | '0';
 type PaddingSpace = Space | '0';
+type BorderWidthExtended = BorderWidth | 0 | '0';
+/**
+ * Token functions are currently allowed for borderRadius in xcss to ease migration.
+ * Because 'radius.small' defaults to 3px, we need a mechanism to allow for 4px values to be provided:
+ * This is done by calling the token function - token('radius.small')
+ *
+ * TODO: Remove once shape them is rolled out and fg platform-dst-shape-theme-default removed
+ */
+type BorderRadiusExtended = BorderRadius | 0 | '0' | 'inherit' | CSSTokenMap[BorderRadius];
 type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 
@@ -1593,35 +1603,35 @@ export type TokenisedProps = {
 	blockSize?: Dimension | string;
 	borderBlockColor?: AutoComplete<BorderColor>;
 	borderBlockEndColor?: AutoComplete<BorderColor>;
-	borderBlockEndWidth?: BorderWidth | string;
+	borderBlockEndWidth?: BorderWidthExtended;
 	borderBlockStartColor?: AutoComplete<BorderColor>;
-	borderBlockStartWidth?: BorderWidth | string;
-	borderBlockWidth?: BorderWidth | string;
+	borderBlockStartWidth?: BorderWidthExtended;
+	borderBlockWidth?: BorderWidthExtended;
 	borderBottomColor?: AutoComplete<BorderColor>;
-	borderBottomLeftRadius?: BorderRadius | string;
-	borderBottomRightRadius?: BorderRadius | string;
-	borderBottomWidth?: BorderWidth | string;
+	borderBottomLeftRadius?: BorderRadiusExtended;
+	borderBottomRightRadius?: BorderRadiusExtended;
+	borderBottomWidth?: BorderWidthExtended;
 	borderColor?: BorderColor;
-	borderEndEndRadius?: BorderRadius | string;
-	borderEndStartRadius?: BorderRadius | string;
+	borderEndEndRadius?: BorderRadiusExtended;
+	borderEndStartRadius?: BorderRadiusExtended;
 	borderInlineColor?: AutoComplete<BorderColor>;
 	borderInlineEndColor?: AutoComplete<BorderColor>;
-	borderInlineEndWidth?: BorderWidth | string;
+	borderInlineEndWidth?: BorderWidthExtended;
 	borderInlineStartColor?: AutoComplete<BorderColor>;
-	borderInlineStartWidth?: BorderWidth | string;
-	borderInlineWidth?: BorderWidth | string;
+	borderInlineStartWidth?: BorderWidthExtended;
+	borderInlineWidth?: BorderWidthExtended;
 	borderLeftColor?: AutoComplete<BorderColor>;
-	borderLeftWidth?: BorderWidth | string;
-	borderRadius?: BorderRadius | string;
+	borderLeftWidth?: BorderWidthExtended;
+	borderRadius?: BorderRadiusExtended;
 	borderRightColor?: AutoComplete<BorderColor>;
-	borderRightWidth?: BorderWidth | string;
-	borderStartEndRadius?: BorderRadius | string;
-	borderStartStartRadius?: BorderRadius | string;
+	borderRightWidth?: BorderWidthExtended;
+	borderStartEndRadius?: BorderRadiusExtended;
+	borderStartStartRadius?: BorderRadiusExtended;
 	borderTopColor?: AutoComplete<BorderColor>;
-	borderTopLeftRadius?: BorderRadius | string;
-	borderTopRightRadius?: BorderRadius | string;
-	borderTopWidth?: BorderWidth | string;
-	borderWidth?: BorderWidth | string;
+	borderTopLeftRadius?: BorderRadiusExtended;
+	borderTopRightRadius?: BorderRadiusExtended;
+	borderTopWidth?: BorderWidthExtended;
+	borderWidth?: BorderWidthExtended;
 	bottom?: AutoComplete<AllSpace>;
 	boxShadow?: Shadow;
 	color?: TextColor;
@@ -1663,7 +1673,7 @@ export type TokenisedProps = {
 	opacity?: AutoComplete<Opacity> | number;
 	outlineColor?: BorderColor;
 	outlineOffset?: AllSpace;
-	outlineWidth?: BorderWidth | string;
+	outlineWidth?: BorderWidthExtended;
 	padding?: PaddingSpace | GlobalValue;
 	paddingBlock?: PaddingSpace | GlobalValue;
 	paddingBlockEnd?: PaddingSpace | GlobalValue;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.18.1",
+	"version": "0.19.1",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,7 +44,7 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/tokens": "^8.6.0",
+		"@atlaskit/tokens": "^10.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},
@@ -53,11 +53,11 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.8.0",
+		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/primitives": "^16.4.0",
+		"@atlaskit/primitives": "^17.1.0",
 		"@emotion/react": "^11.7.1",
-		"@testing-library/react": "^13.4.0",
+		"@testing-library/react": "^16.3.0",
 		"@types/jscodeshift": "^0.11.0",
 		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0"