@atlaskit/primitives 1.10.1 → 1.11.0

package/report.api.md

@@ -883,6 +883,15 @@ const negativeSpaceMap: {
   'space.negative.400': 'var(--ds-space-negative-400)';
 };
 
+// @public (undocumented)
+type Opacity = keyof typeof opacityMap;
+
+// @public
+const opacityMap: {
+  readonly 'opacity.disabled': 'var(--ds-opacity-disabled)';
+  readonly 'opacity.loading': 'var(--ds-opacity-loading)';
+};
+
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   CSSAtRules &
@@ -1130,8 +1139,32 @@ type TokenisedProps = {
   backgroundColor?: BackgroundColor;
   blockSize?: AutoComplete<Dimension>;
   borderColor?: BorderColor;
+  borderBlockStartColor?: AutoComplete<BorderColor>;
+  borderBlockEndColor?: AutoComplete<BorderColor>;
+  borderInlineStartColor?: AutoComplete<BorderColor>;
+  borderInlineEndColor?: AutoComplete<BorderColor>;
+  borderBottomColor?: AutoComplete<BorderColor>;
+  borderLeftColor?: AutoComplete<BorderColor>;
+  borderRightColor?: AutoComplete<BorderColor>;
+  borderTopColor?: AutoComplete<BorderColor>;
   borderRadius?: BorderRadius;
+  borderStartStartRadius?: AutoComplete<BorderRadius>;
+  borderStartEndRadius?: AutoComplete<BorderRadius>;
+  borderEndStartRadius?: AutoComplete<BorderRadius>;
+  borderEndEndRadius?: AutoComplete<BorderRadius>;
+  borderBottomLeftRadius?: AutoComplete<BorderRadius>;
+  borderBottomRightRadius?: AutoComplete<BorderRadius>;
+  borderTopLeftRadius?: AutoComplete<BorderRadius>;
+  borderTopRightRadius?: AutoComplete<BorderRadius>;
   borderWidth?: BorderWidth;
+  borderBlockStartWidth?: AutoComplete<BorderWidth>;
+  borderBlockEndWidth?: AutoComplete<BorderWidth>;
+  borderInlineStartWidth?: AutoComplete<BorderWidth>;
+  borderInlineEndWidth?: AutoComplete<BorderWidth>;
+  borderBottomWidth?: AutoComplete<BorderWidth>;
+  borderLeftWidth?: AutoComplete<BorderWidth>;
+  borderRightWidth?: AutoComplete<BorderWidth>;
+  borderTopWidth?: AutoComplete<BorderWidth>;
   bottom?: AutoComplete<Space>;
   boxShadow?: Shadow;
   color?: TextColor;
@@ -1166,6 +1199,7 @@ type TokenisedProps = {
   minHeight?: AutoComplete<Dimension>;
   minInlineSize?: AutoComplete<Dimension>;
   minWidth?: AutoComplete<Dimension>;
+  opacity?: AutoComplete<Opacity> | number;
   outlineColor?: BorderColor;
   outlineOffset?: Space;
   outlineWidth?: BorderWidth;

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
+exports[`@atlaskit/primitives background styles are generated correctly 1`] = `
 "export const backgroundColorMap = {
   'color.background.accent.lime.subtlest': token(
     'color.background.accent.lime.subtlest',
@@ -771,6 +771,78 @@ export type BorderColor = keyof typeof borderColorMap;
 "
 `;
 
+exports[`@atlaskit/primitives opacity styles are generated correctly 1`] = `
+"export const opacityMap = {
+  'opacity.disabled': token('opacity.disabled', '0.4'),
+  'opacity.loading': token('opacity.loading', '0.2'),
+} as const;
+
+export type Opacity = keyof typeof opacityMap;
+"
+`;
+
+exports[`@atlaskit/primitives shadow styles are generated correctly 1`] = `
+"export const shadowMap = {
+  'elevation.shadow.overflow': token(
+    'elevation.shadow.overflow',
+    '0px 0px 8px #091e423f, 0px 0px 1px #091e424f',
+  ),
+  'elevation.shadow.overflow.perimeter': token(
+    'elevation.shadow.overflow.perimeter',
+    '#091e421f',
+  ),
+  'elevation.shadow.overflow.spread': token(
+    'elevation.shadow.overflow.spread',
+    '#091e4229',
+  ),
+  'elevation.shadow.overlay': token(
+    'elevation.shadow.overlay',
+    '0px 8px 12px #091e423f, 0px 0px 1px #091e424f',
+  ),
+  'elevation.shadow.raised': token(
+    'elevation.shadow.raised',
+    '0px 1px 1px #091e423f, 0px 0px 1px #091e4221',
+  ),
+} as const;
+
+export type Shadow = keyof typeof shadowMap;
+"
+`;
+
+exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
+"export const spaceMap = {
+  'space.0': token('space.0', '0px'),
+  'space.025': token('space.025', '2px'),
+  'space.050': token('space.050', '4px'),
+  'space.075': token('space.075', '6px'),
+  'space.100': token('space.100', '8px'),
+  'space.150': token('space.150', '12px'),
+  'space.200': token('space.200', '16px'),
+  'space.250': token('space.250', '20px'),
+  'space.300': token('space.300', '24px'),
+  'space.400': token('space.400', '32px'),
+  'space.500': token('space.500', '40px'),
+  'space.600': token('space.600', '48px'),
+  'space.800': token('space.800', '64px'),
+  'space.1000': token('space.1000', '80px'),
+};
+export type Space = keyof typeof spaceMap;
+
+export const negativeSpaceMap = {
+  'space.negative.025': token('space.negative.025', '-2px'),
+  'space.negative.050': token('space.negative.050', '-4px'),
+  'space.negative.075': token('space.negative.075', '-6px'),
+  'space.negative.100': token('space.negative.100', '-8px'),
+  'space.negative.150': token('space.negative.150', '-12px'),
+  'space.negative.200': token('space.negative.200', '-16px'),
+  'space.negative.250': token('space.negative.250', '-20px'),
+  'space.negative.300': token('space.negative.300', '-24px'),
+  'space.negative.400': token('space.negative.400', '-32px'),
+};
+export type NegativeSpace = keyof typeof negativeSpaceMap;
+"
+`;
+
 exports[`@atlaskit/primitives surface styles are generated correctly 1`] = `
 "export const surfaceColorMap = {
   'elevation.surface': token('elevation.surface', '#FFFFFF'),

package/scripts/__tests__/codegen.test.tsx

@@ -1,24 +1,41 @@
 import { createColorStylesFromTemplate } from '../color-codegen-template';
+import { createElevationStylesFromTemplate } from '../elevation-codegen-template';
+import { createSpacingStylesFromTemplate } from '../spacing-codegen-template';
+
 describe('@atlaskit/primitives', () => {
+  // colour stuff
   test('text styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
   });
-
-  test('bg styles are generated correctly', () => {
+  test('background styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('background')).toMatchSnapshot();
   });
-
   test('border styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
   });
 
+  // elevation stuff
+  test('opacity styles are generated correctly', () => {
+    expect(createElevationStylesFromTemplate('opacity')).toMatchSnapshot();
+  });
+  test('shadow styles are generated correctly', () => {
+    expect(createElevationStylesFromTemplate('shadow')).toMatchSnapshot();
+  });
   test('surface styles are generated correctly', () => {
-    expect(createColorStylesFromTemplate('surface')).toMatchSnapshot();
+    expect(createElevationStylesFromTemplate('surface')).toMatchSnapshot();
+  });
+
+  // spacing
+  test('spacing styles are generated correctly', () => {
+    expect(createSpacingStylesFromTemplate()).toMatchSnapshot();
   });
 
   test('incorrect config throws', () => {
     expect(() =>
       createColorStylesFromTemplate('fizzbuzz' as any),
     ).toThrowError();
+    expect(() =>
+      createElevationStylesFromTemplate('fizzbuzz' as any),
+    ).toThrowError();
   });
 });

package/scripts/codegen-styles.tsx

@@ -6,6 +6,7 @@ import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 import { createBorderStylesFromTemplate } from './border-codegen-template';
 import { createColorStylesFromTemplate } from './color-codegen-template';
+import { createElevationStylesFromTemplate } from './elevation-codegen-template';
 import { createInverseColorMapTemplate } from './inverse-color-map-template';
 import { createStylesFromFileTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
@@ -58,7 +59,7 @@ const sourceFns = [
         dependencies: [spacingTokensDependencyPath],
       },
     ),
-  // text color, background-color, border-color, shadow
+  // text color, background-color, border-color
   () =>
     createPartialSignedArtifact(
       options => options.map(createColorStylesFromTemplate).join('\n'),
@@ -80,6 +81,17 @@ const sourceFns = [
         dependencies: [colorTokensDependencyPath],
       },
     ),
+  // elevation (opacity, shadow, surface)
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createElevationStylesFromTemplate).join('\n'),
+      'yarn workspace @atlaskit/primitives codegen-styles',
+      {
+        id: 'elevation',
+        absoluteFilePath: targetPath,
+        dependencies: [colorTokensDependencyPath],
+      },
+    ),
   // border-width, border-radius
   () =>
     createPartialSignedArtifact(

package/scripts/color-codegen-template.tsx

@@ -1,7 +1,6 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -46,13 +45,6 @@ const tokenStyles = {
     filterFn: <T extends Token>(t: T) =>
       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),
-  },
   fill: {
     objectName: 'fill',
     prefix: 'color.icon.',
@@ -60,13 +52,6 @@ const tokenStyles = {
     filterFn: <T extends Token>(t: T) =>
       t.token.startsWith(tokenStyles.fill.prefix),
   },
-  surface: {
-    objectName: 'surfaceColor',
-    prefix: 'elevation.surface.',
-    cssProperty: CURRENT_SURFACE_CSS_VAR,
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.surface.prefix),
-  },
 } as const;
 
 const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);

package/scripts/elevation-codegen-template.tsx

@@ -0,0 +1,94 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+
+import {
+  capitalize,
+  constructTokenFunctionCall,
+  ShadowDefinition,
+} from './utils';
+
+type Token = {
+  token: string;
+  fallback: string | ShadowDefinition;
+  isDeprecated: boolean;
+};
+
+// NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
+const tokenStyles = {
+  opacity: {
+    objectName: 'opacity',
+    prefix: 'opacity.',
+    cssProperty: 'opacity',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.opacity.prefix),
+  },
+  shadow: {
+    objectName: 'shadow',
+    prefix: 'elevation.shadow.',
+    cssProperty: 'boxShadow',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.shadow.prefix),
+  },
+  surface: {
+    objectName: 'surfaceColor',
+    prefix: 'elevation.surface.',
+    cssProperty: CURRENT_SURFACE_CSS_VAR,
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.surface.prefix),
+  },
+} as const;
+
+const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
+
+const activeTokens = bothTokens
+  .filter(([t]) => t.attributes.state !== 'deleted')
+  .map(t => t)
+  .map(
+    ([t, legacy]): Token => ({
+      token: t.name,
+      fallback: legacy.value as string | ShadowDefinition,
+      isDeprecated: t.attributes.state === 'deprecated',
+    }),
+  );
+
+export const createElevationStylesFromTemplate = (
+  property: keyof typeof tokenStyles,
+) => {
+  if (!tokenStyles[property]) {
+    throw new Error(`[codegen] Unknown option found "${property}"`);
+  }
+
+  const { filterFn, objectName } = tokenStyles[property];
+
+  return (
+    prettier.format(
+      `
+export const ${objectName}Map = {
+  ${activeTokens
+    .filter(filterFn)
+    // @ts-ignore
+    .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+    .map(t => {
+      return `
+        ${t.isDeprecated ? '// @deprecated' : ''}
+        '${t.token}': ${constructTokenFunctionCall(t.token, t.fallback)}
+      `.trim();
+    })
+    .join(',\n\t')}
+} as const;`,
+      {
+        singleQuote: true,
+        parser: 'typescript',
+        trailingComma: 'all',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+  );
+};

package/tmp/api-report-tmp.d.ts

@@ -634,6 +634,15 @@ const negativeSpaceMap: {
     'space.negative.400': "var(--ds-space-negative-400)";
 };
 
+// @public (undocumented)
+type Opacity = keyof typeof opacityMap;
+
+// @public
+const opacityMap: {
+    readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
+    readonly 'opacity.loading': "var(--ds-opacity-loading)";
+};
+
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
@@ -784,8 +793,32 @@ type TokenisedProps = {
     backgroundColor?: BackgroundColor;
     blockSize?: AutoComplete<Dimension>;
     borderColor?: BorderColor;
+    borderBlockStartColor?: AutoComplete<BorderColor>;
+    borderBlockEndColor?: AutoComplete<BorderColor>;
+    borderInlineStartColor?: AutoComplete<BorderColor>;
+    borderInlineEndColor?: AutoComplete<BorderColor>;
+    borderBottomColor?: AutoComplete<BorderColor>;
+    borderLeftColor?: AutoComplete<BorderColor>;
+    borderRightColor?: AutoComplete<BorderColor>;
+    borderTopColor?: AutoComplete<BorderColor>;
     borderRadius?: BorderRadius;
+    borderStartStartRadius?: AutoComplete<BorderRadius>;
+    borderStartEndRadius?: AutoComplete<BorderRadius>;
+    borderEndStartRadius?: AutoComplete<BorderRadius>;
+    borderEndEndRadius?: AutoComplete<BorderRadius>;
+    borderBottomLeftRadius?: AutoComplete<BorderRadius>;
+    borderBottomRightRadius?: AutoComplete<BorderRadius>;
+    borderTopLeftRadius?: AutoComplete<BorderRadius>;
+    borderTopRightRadius?: AutoComplete<BorderRadius>;
     borderWidth?: BorderWidth;
+    borderBlockStartWidth?: AutoComplete<BorderWidth>;
+    borderBlockEndWidth?: AutoComplete<BorderWidth>;
+    borderInlineStartWidth?: AutoComplete<BorderWidth>;
+    borderInlineEndWidth?: AutoComplete<BorderWidth>;
+    borderBottomWidth?: AutoComplete<BorderWidth>;
+    borderLeftWidth?: AutoComplete<BorderWidth>;
+    borderRightWidth?: AutoComplete<BorderWidth>;
+    borderTopWidth?: AutoComplete<BorderWidth>;
     bottom?: AutoComplete<Space>;
     boxShadow?: Shadow;
     color?: TextColor;
@@ -820,6 +853,7 @@ type TokenisedProps = {
     minHeight?: AutoComplete<Dimension>;
     minInlineSize?: AutoComplete<Dimension>;
     minWidth?: AutoComplete<Dimension>;
+    opacity?: AutoComplete<Opacity> | number;
     outlineColor?: BorderColor;
     outlineOffset?: Space;
     outlineWidth?: BorderWidth;