@atlaskit/css 0.19.2 → 0.19.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/css
 
+## 0.19.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.19.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.19.2
 
 ### Patch Changes

package/codemods/0.5.2-primitives-emotion-to-compiled/index.tsx

@@ -47,8 +47,11 @@ const styleMaps = {
 	...textWeightMap,
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+export default function transformer(
+	fileInfo: FileInfo,
+	{ jscodeshift: j }: API,
+	_options: Options,
+): string | undefined {
 	const base = j(fileInfo.source);
 
 	// replace xcss with cssMap

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

@@ -1373,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::64331f0b8b5e2f090a3aad153d92deb6>>
+ * @codegen <<SignedSource::6dffa08c1104af4093361cb0f7e37996>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -1382,7 +1382,6 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 export const fontMap: {
 	'font.body': 'var(--ds-font-body)';
-	'font.body.UNSAFE_small': 'var(--ds-font-body-UNSAFE_small)';
 	'font.body.large': 'var(--ds-font-body-large)';
 	'font.body.small': 'var(--ds-font-body-small)';
 	'font.code': 'var(--ds-font-code)';
@@ -1401,11 +1400,6 @@ export const fontMap: {
 		'font.body',
 		'normal 400 14px/20px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
 	),
-	// @deprecated
-	'font.body.UNSAFE_small': token(
-		'font.body.UNSAFE_small',
-		'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 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
@@ -1513,7 +1507,7 @@ export type FontFamily = keyof typeof fontFamilyMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aeebc24b95e2189021f1d98f1715a6a0>>
+ * @codegen <<SignedSource::b67a50fa5abb078032598ba819a6f691>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
@@ -1521,7 +1515,6 @@ export type FontFamily = keyof typeof fontFamilyMap;
  */
 export const textSizeMap: {
 	medium: 'var(--ds-font-body)';
-	UNSAFE_small: 'var(--ds-font-body-UNSAFE_small)';
 	large: 'var(--ds-font-body-large)';
 	small: 'var(--ds-font-body-small)';
 } = {
@@ -1529,10 +1522,6 @@ export const textSizeMap: {
 		'font.body',
 		'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 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
-	),
 	large: token(
 		'font.body.large',
 		'normal 400 16px/24px "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',

package/codemods/hypermod.config.tsx

@@ -1,6 +1,11 @@
 import primitivesEmotionToCompiled from './0.5.2-primitives-emotion-to-compiled';
 
-const config = {
+const config: {
+	presets: {
+		'primitives-emotion-to-compiled': typeof primitivesEmotionToCompiled;
+	};
+	dependencies: string[];
+} = {
 	presets: {
 		'primitives-emotion-to-compiled': primitivesEmotionToCompiled,
 	},

package/constellation/index/migration.mdx

@@ -18,7 +18,7 @@ import SectionMessage from '@atlaskit/section-message';
 
 We have a codemod available to support this migration, but there are some breaking changes between
 Emotion and Compiled, such as dynamic styles or imports. Please use the
-[UI Styling Standard ESLint Plugin](/components/eslint-plugin-ui-styling-standard/) to guide you.
+[UI Styling Standard ESLint Plugin](/components/eslint-plugin-ui-styling-standard) to guide you.
 
 ## Codemod
 

package/constellation/index/overview.mdx

@@ -34,7 +34,7 @@ For configuration details, see our
 at Atlassian.
 
 This is a strictly bounded variant designed to align the use of
-[Design System tokens](<(/components/tokens/all-tokens)>) and properties. You cannot use arbitrary
+[Design System tokens](/components/tokens/all-tokens) and properties. You cannot use arbitrary
 values, such as `color: 'rgba(123, 45, 67)'` nor `padding: 8`. Typically, only tokenized values are
 allowed. Additionally, there are some restrictions, such as `zIndex`, which only supports a limited
 set of numeric values.

package/css.docs.tsx

@@ -0,0 +1,86 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'css',
+		description: 'A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.',
+		status: 'open-beta',
+		import: {
+			name: 'css',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Prefer `cssMap` for CSS-in-JS styling',
+			"Use typescript to infer most things, eg. which media queries you're allowed to use",
+			'If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead',
+		],
+		examples: [
+			{
+				name: 'Css',
+				description: 'Css example',
+				source: path.resolve(__dirname, './examples/ai/css.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+	{
+		name: 'cssMap',
+		description: 'A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.',
+		status: 'open-beta',
+		import: {
+			name: 'cssMap',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'This is the primary way to define styles in a more structured manner than `css`',
+			"Use typescript to infer most things, eg. which media queries you're allowed to use",
+			'If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead',
+			'You MUST use this when working with an `xcss` prop as `css` does not work there',
+		],
+		examples: [
+			{
+				name: 'Css Map',
+				description: 'Css Map example',
+				source: path.resolve(__dirname, './examples/ai/css-map.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+	{
+		name: 'cx',
+		description: 'A function for combining styles in an `xcss` prop to maintain correct typing.',
+		status: 'open-beta',
+		import: {
+			name: 'cx',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use this to combine styles in an `xcss` prop to maintain correct typing, eg. `cx(styles.root, styles.bordered)`',
+			'This is not required for native elements which should use `[]` instead, eg. `[styles.root, styles.bordered]`',
+		],
+		examples: [
+			{
+				name: 'Cx',
+				description: 'Cx example',
+				source: path.resolve(__dirname, './examples/ai/cx.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+];
+
+export default documentation;

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.19.2",
+	"version": "0.19.4",
 	"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,18 +44,19 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.9.0",
-		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/button": "^23.11.0",
+		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/primitives": "^19.0.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^16.3.0",
 		"@types/jscodeshift": "^0.11.0",