@atlaskit/ds-explorations 5.1.2 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 5.1.4
+
+### Patch Changes
+
+- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+
+## 5.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.2
 
 ### Patch Changes

package/dist/cjs/components/interaction-surface.partial.js

@@ -58,11 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = exports.default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
+ * @codegen <<SignedSource::2872a8059e6b2969c20ed7a592cc85ca>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 var backgroundActiveColorMap = {
   'accent.lime.subtlest': (0, _react2.css)({

package/dist/cjs/internal/color-map.js

@@ -9,9 +9,9 @@ exports.default = void 0;
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
+ * @codegen <<SignedSource::d6bdd642b5973f7d1d9f1e5f085c36c9>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 var _default = exports.default = {
   'neutral.bold': 'inverse',

package/dist/es2019/components/interaction-surface.partial.js

@@ -53,11 +53,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
+ * @codegen <<SignedSource::2872a8059e6b2969c20ed7a592cc85ca>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 
 const backgroundActiveColorMap = {

package/dist/es2019/internal/color-map.js

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
+ * @codegen <<SignedSource::d6bdd642b5973f7d1d9f1e5f085c36c9>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/esm/components/interaction-surface.partial.js

@@ -52,11 +52,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
+ * @codegen <<SignedSource::2872a8059e6b2969c20ed7a592cc85ca>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 
 var backgroundActiveColorMap = {

package/dist/esm/internal/color-map.js

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
+ * @codegen <<SignedSource::d6bdd642b5973f7d1d9f1e5f085c36c9>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 export default {
   'neutral.bold': 'inverse',

package/dist/types/components/interaction-surface.partial.d.ts

@@ -20,15 +20,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
  * </Pressable>
  * ```
  */
-declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => React.JSX.Element;
+declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => React.JSX.Element;
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
+ * @codegen <<SignedSource::2872a8059e6b2969c20ed7a592cc85ca>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.subtler' | 'danger.bold' | 'warning' | 'warning.subtler' | 'warning.bold' | 'success' | 'success.subtler' | 'success.bold' | 'discovery' | 'discovery.subtler' | 'discovery.bold' | 'information' | 'information.subtler' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
 /**

package/dist/types/components/surface-provider.d.ts

@@ -3,7 +3,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<any>;
+export declare const SurfaceContext: import('react').Context<any>;
 /**
  * __useSurface__
  *

package/dist/types/internal/color-map.d.ts

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
+ * @codegen <<SignedSource::d6bdd642b5973f7d1d9f1e5f085c36c9>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 declare const _default: {
     readonly 'neutral.bold': "inverse";

package/dist/types-ts4.5/components/interaction-surface.partial.d.ts

@@ -20,15 +20,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
  * </Pressable>
  * ```
  */
-declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => React.JSX.Element;
+declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => React.JSX.Element;
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c096f2538ebfdcb14824c88311f0c686>>
+ * @codegen <<SignedSource::2872a8059e6b2969c20ed7a592cc85ca>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.subtler' | 'danger.bold' | 'warning' | 'warning.subtler' | 'warning.bold' | 'success' | 'success.subtler' | 'success.bold' | 'discovery' | 'discovery.subtler' | 'discovery.bold' | 'information' | 'information.subtler' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
 /**

package/dist/types-ts4.5/components/surface-provider.d.ts

@@ -3,7 +3,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<any>;
+export declare const SurfaceContext: import('react').Context<any>;
 /**
  * __useSurface__
  *

package/dist/types-ts4.5/internal/color-map.d.ts

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::f6e4b07df99db887f76c3fa851444f8e>>
+ * @codegen <<SignedSource::d6bdd642b5973f7d1d9f1e5f085c36c9>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 declare const _default: {
     readonly 'neutral.bold': "inverse";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "5.1.2",
+	"version": "5.1.4",
 	"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 		"prepare": "yarn ak-postbuild"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -34,8 +34,8 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@testing-library/react": "^16.3.0",

package/scripts/codegen-styles.tsx

@@ -8,9 +8,8 @@ import { createColorMapTemplate } from './color-map-template';
 import { createInteractionStylesFromTemplate } from './interaction-codegen';
 
 const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
-const colorTokensDependencyPath = require.resolve(
-	'../../tokens/src/artifacts/tokens-raw/atlassian-light',
-);
+const colorTokensDependencyPath =
+	require.resolve('../../tokens/src/artifacts/tokens-raw/atlassian-light');
 
 writeFile(
 	join(colorMapOutputFolder, 'color-map.tsx'),

package/scripts/color-codegen-template.tsx

@@ -1,5 +1,5 @@
 import format from '@af/formatting/sync';
-import { legacyLightTokens as legacyTokens, light as tokens } from '@atlaskit/tokens/tokens-raw';
+import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import {
 	capitalize,
@@ -24,13 +24,13 @@ const tokenStyles = {
 		objectName: 'textColor',
 		prefix: 'color.text.',
 		cssProperty: 'color',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.text.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.text.prefix),
 	},
 	background: {
 		objectName: 'backgroundColor',
 		prefix: 'color.background.',
 		cssProperty: 'backgroundColor',
-		filterFn: <T extends Token>(t: T) =>
+		filterFn: <T extends Token>(t: T): boolean =>
 			t.token.startsWith(tokenStyles.background.prefix) ||
 			t.token.startsWith('elevation.surface') ||
 			t.token.startsWith('color.blanket'),
@@ -39,24 +39,22 @@ const tokenStyles = {
 		objectName: 'borderColor',
 		prefix: 'color.border.',
 		cssProperty: 'borderColor',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.border.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.border.prefix),
 	},
 	shadow: {
 		objectName: 'shadow',
 		prefix: 'elevation.shadow.',
 		cssProperty: 'boxShadow',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.shadow.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(tokenStyles.shadow.prefix),
 	},
 } as const;
 
-const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
-
-const activeTokens = bothTokens
-	.filter(([t]) => t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated')
+const activeTokens = tokens
+	.filter((t) => t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated')
 	.map(
-		([t, legacy]): Token => ({
+		(t): Token => ({
 			token: t.name,
-			fallback: legacy.value as string | ShadowDefintion,
+			fallback: t.value as string | ShadowDefintion,
 		}),
 	)
 	.filter(compose(pick('token'), not(isAccent)))

package/scripts/interaction-codegen.tsx

@@ -13,12 +13,12 @@ const colors = {
 	text: {
 		prefix: 'color.text.',
 		cssProperty: 'color',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(colors.text.prefix),
 	},
 	background: {
 		prefix: 'color.background.',
 		cssProperty: 'backgroundColor',
-		filterFn: <T extends Token>(t: T) =>
+		filterFn: <T extends Token>(t: T): boolean =>
 			t.token.startsWith(colors.background.prefix) ||
 			t.token.startsWith('elevation.surface') ||
 			t.token.startsWith('color.blanket'),
@@ -26,7 +26,7 @@ const colors = {
 	border: {
 		prefix: 'color.border.',
 		cssProperty: 'borderColor',
-		filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.border.prefix),
+		filterFn: <T extends Token>(t: T): boolean => t.token.startsWith(colors.border.prefix),
 	},
 } as const;
 

package/scripts/utils.tsx

@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
 
-export const tokenToStyle = (
+export const tokenToStyle: (
 	prop: keyof CSSProperties,
 	token: string,
 	fallback: string | ShadowDefintion,
-) => {
+) => string = (prop: keyof CSSProperties, token: string, fallback: string | ShadowDefintion) => {
 	if (Array.isArray(fallback)) {
 		fallback = constructShadow(fallback);
 	}
@@ -29,23 +29,26 @@ const constructShadow = (shadowObject: ShadowDefintion) => {
 
 type BooleanCallback<T> = (args: T) => boolean;
 
-export const compose =
+export const compose: (...fns: ((...any: any[]) => any)[]) => (x: any) => any =
 	(...fns: ((...any: any[]) => any)[]) =>
 	(x: any): any =>
 		fns.reduce((res, fn) => fn(res), x);
-export const pick =
+export const pick: <T extends any>(key: keyof T) => (obj: T) => T[keyof T] =
 	<T extends any>(key: keyof T) =>
 	(obj: T) =>
 		obj[key];
-export const isAccent = (str: string) => str.includes('accent');
-export const isPressed = (str: string) => str.includes('pressed');
-export const isHovered = (str: string) => str.includes('hovered');
-export const not =
+export const isAccent: (str: string) => boolean = (str: string): boolean => str.includes('accent');
+export const isPressed: (str: string) => boolean = (str: string): boolean =>
+	str.includes('pressed');
+export const isHovered: (str: string) => boolean = (str: string): boolean =>
+	str.includes('hovered');
+export const not: <T extends any>(cb: BooleanCallback<T>) => (val: T) => boolean =
 	<T extends any>(cb: BooleanCallback<T>) =>
-	(val: T) =>
+	(val: T): boolean =>
 		!cb(val);
-export const or =
+export const or: <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) => boolean =
 	<T extends any>(...fns: BooleanCallback<T>[]) =>
-	(val: T) =>
+	(val: T): boolean =>
 		fns.some((fn) => fn(val));
-export const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
+export const capitalize: (str: string) => string = (str: string): string =>
+	str.charAt(0).toUpperCase() + str.slice(1);