@atlaskit/css 0.18.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/css
 
+## 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}
@@ -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.0",
 	"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": "^9.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},
@@ -53,9 +53,9 @@
 	},
 	"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.0.0",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^13.4.0",
 		"@types/jscodeshift": "^0.11.0",