@atlaskit/primitives 1.4.4 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -108,6 +108,15 @@
           "status": {
             "type": "beta"
           }
+        },
+        {
+          "title": "Heading",
+          "folder": "heading",
+          "slug": "primitives/heading",
+          "id": "@atlaskit/primitives/heading",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -127,6 +136,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -181,7 +191,9 @@
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
     "./pressable": "./src/components/pressable.tsx",
+    "./heading": "./src/components/heading.tsx",
+    "./heading-context": "./src/components/heading-context.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -292,6 +292,7 @@ const backgroundColorMap: {
   readonly 'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
   readonly 'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
   readonly 'elevation.surface.sunken': 'var(--ds-surface-sunken)';
+  readonly 'utility.elevation.surface.current': 'var(--ds-elevation-surface-current)';
 };
 
 // @public (undocumented)

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

@@ -727,6 +727,10 @@ exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
     '#F4F5F7',
   ),
   'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
+  'utility.elevation.surface.current': token(
+    'utility.elevation.surface.current',
+    '#FFFFFF',
+  ),
 } as const;
 
 export type BackgroundColor = keyof typeof backgroundColorMap;
@@ -767,6 +771,36 @@ export type BorderColor = keyof typeof borderColorMap;
 "
 `;
 
+exports[`@atlaskit/primitives surface styles are generated correctly 1`] = `
+"export const surfaceColorMap = {
+  'elevation.surface': token('elevation.surface', '#FFFFFF'),
+  'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
+  'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
+  'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
+  'elevation.surface.overlay.hovered': token(
+    'elevation.surface.overlay.hovered',
+    '#FAFBFC',
+  ),
+  'elevation.surface.overlay.pressed': token(
+    'elevation.surface.overlay.pressed',
+    '#F4F5F7',
+  ),
+  'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
+  'elevation.surface.raised.hovered': token(
+    'elevation.surface.raised.hovered',
+    '#FAFBFC',
+  ),
+  'elevation.surface.raised.pressed': token(
+    'elevation.surface.raised.pressed',
+    '#F4F5F7',
+  ),
+  'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
+} as const;
+
+export type SurfaceColor = keyof typeof surfaceColorMap;
+"
+`;
+
 exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
 "export const textColorMap = {
   'color.text': token('color.text', '#172B4D'),

package/scripts/__tests__/codegen.test.tsx

@@ -12,6 +12,10 @@ describe('@atlaskit/primitives', () => {
     expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
   });
 
+  test('surface styles are generated correctly', () => {
+    expect(createColorStylesFromTemplate('surface')).toMatchSnapshot();
+  });
+
   test('incorrect config throws', () => {
     expect(() =>
       createColorStylesFromTemplate('fizzbuzz' as any),

package/scripts/color-codegen-template.tsx

@@ -1,6 +1,7 @@
 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
@@ -35,6 +36,7 @@ const tokenStyles = {
     filterFn: <T extends Token>(t: T) =>
       t.token.startsWith(tokenStyles.background.prefix) ||
       t.token.startsWith('elevation.surface') ||
+      t.token.startsWith('utility.elevation.surface') ||
       t.token.startsWith('color.blanket'),
   },
   border: {
@@ -58,6 +60,13 @@ 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/tmp/api-report-tmp.d.ts

@@ -276,6 +276,7 @@ const backgroundColorMap: {
     readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
     readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
     readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+    readonly 'utility.elevation.surface.current': "var(--ds-elevation-surface-current)";
 };
 
 // @public (undocumented)