@atlaskit/primitives 1.4.2 → 1.4.4

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -402,6 +402,76 @@ export declare const borderRadiusMap: {
     readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
 };
 export type BorderRadius = keyof typeof borderRadiusMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ */
+export declare const fontSizeMap: {
+    'font.size.050': "var(--ds-font-size-050)";
+    'font.size.075': "var(--ds-font-size-075)";
+    'font.size.100': "var(--ds-font-size-100)";
+    'font.size.200': "var(--ds-font-size-200)";
+    'font.size.300': "var(--ds-font-size-300)";
+    'font.size.400': "var(--ds-font-size-400)";
+    'font.size.500': "var(--ds-font-size-500)";
+    'font.size.600': "var(--ds-font-size-600)";
+};
+export type FontSize = keyof typeof fontSizeMap;
+export declare const fontWeightMap: {
+    'font.weight.bold': "var(--ds-font-weight-bold)";
+    'font.weight.medium': "var(--ds-font-weight-medium)";
+    'font.weight.regular': "var(--ds-font-weight-regular)";
+    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+};
+export type FontWeight = keyof typeof fontWeightMap;
+export declare const fontFamilyMap: {
+    'font.family.body': "var(--ds-font-family-body)";
+    'font.family.brand': "var(--ds-font-family-brand)";
+    'font.family.code': "var(--ds-font-family-code)";
+    'font.family.heading': "var(--ds-font-family-heading)";
+    'font.family.monospace': "var(--ds-font-family-monospace)";
+    'font.family.sans': "var(--ds-font-family-sans)";
+};
+export type FontFamily = keyof typeof fontFamilyMap;
+export declare const lineHeightMap: {
+    'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
+    'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
+    'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
+    'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
+    'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
+    'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
+    'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
+};
+export type LineHeight = keyof typeof lineHeightMap;
+export declare const bodyTextMap: {
+    body: "var(--ds-font-body)";
+    'body.lg': "var(--ds-font-body-lg)";
+    'body.sm': "var(--ds-font-body-sm)";
+};
+export type BodyText = keyof typeof bodyTextMap;
+export declare const headingTextMap: {
+    'heading.lg': "var(--ds-font-heading-lg)";
+    'heading.md': "var(--ds-font-heading-md)";
+    'heading.sm': "var(--ds-font-heading-sm)";
+    'heading.xl': "var(--ds-font-heading-xl)";
+    'heading.xs': "var(--ds-font-heading-xs)";
+    'heading.xxl': "var(--ds-font-heading-xxl)";
+    'heading.xxs': "var(--ds-font-heading-xxs)";
+};
+export type HeadingText = keyof typeof headingTextMap;
+export declare const uiTextMap: {
+    ui: "var(--ds-font-ui)";
+    'ui.sm': "var(--ds-font-ui-sm)";
+};
+export type UiText = keyof typeof uiTextMap;
 /**
  * @codegenEnd
  */
@@ -482,9 +552,33 @@ declare const spacingProperties: readonly [
 type SpacingProperty = (typeof spacingProperties)[number];
 type SpacingToken = keyof typeof spaceMap;
 type BackgroundColorToken = keyof typeof backgroundColorMap;
+type TextColorToken = keyof typeof textColorMap;
+type FontSizeToken = keyof typeof fontSizeMap;
+type FontWeightToken = keyof typeof fontWeightMap;
+type FontFamilyToken = keyof typeof fontFamilyMap;
+type LineHeightToken = keyof typeof lineHeightMap;
+type HeadingTextToken = keyof typeof headingTextMap;
+type BodyTextToken = keyof typeof bodyTextMap;
+type UITextToken = keyof typeof uiTextMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
+type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
+type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
+type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
+type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
+type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
+type HeadingTextStyleMap = Record<HeadingTextToken, SerializedStyles>;
+type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
+type UITextStyleMap = Record<UITextToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
+export declare const textColorStylesMap: TextColorStyleMap;
+export declare const fontSizeStylesMap: FontSizeStyleMap;
+export declare const fontWeightStylesMap: FontWeightStyleMap;
+export declare const fontFamilyStylesMap: FontFamilyStyleMap;
+export declare const lineHeightStylesMap: LineHeightStyleMap;
+export declare const headingTextStylesMap: HeadingTextStyleMap;
+export declare const bodyTextStylesMap: BodyTextStyleMap;
+export declare const uiTextStylesMap: UITextStyleMap;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -116,11 +116,12 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
-    "bind-event-listener": "^2.1.1"
+    "bind-event-listener": "^2.1.1",
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -165,7 +166,7 @@
       ]
     }
   },
-  "homepage": "https://atlassian.design/components/primitives",
+  "homepage": "https://atlassian.design/components/primitives/overview/",
   "typesVersions": {
     ">=4.5 <4.9": {
       "*": [

package/scripts/codegen-styles.tsx

@@ -8,6 +8,7 @@ import { createBorderStylesFromTemplate } from './border-codegen-template';
 import { createColorStylesFromTemplate } from './color-codegen-template';
 import { createStylesFromFileTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
+import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
 const colorTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-light',
@@ -89,6 +90,17 @@ const sourceFns = [
         dependencies: templateFiles,
       },
     ),
+  // font*, lineheight
+  () =>
+    createPartialSignedArtifact(
+      options => options.map(createTypographyStylesFromTemplate).join('\n'),
+      'yarn workspace @atlaskit/primitives codegen-styles',
+      {
+        id: 'typography',
+        absoluteFilePath: targetPath,
+        dependencies: templateFiles,
+      },
+    ),
 ];
 
 sourceFns.forEach(sourceFn => {

package/scripts/typography-codegen-template.tsx

@@ -0,0 +1,107 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+
+import { capitalize, constructTokenFunctionCall } from './utils';
+
+type Token = {
+  name: string;
+  fallback: string;
+};
+
+const typographyProperties = {
+  heading: {
+    objectName: 'headingText',
+    prefix: 'font.heading',
+    cssProperty: 'font',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.heading'),
+  },
+  body: {
+    objectName: 'bodyText',
+    prefix: 'font.body',
+    cssProperty: 'font',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
+  },
+  ui: {
+    objectName: 'uiText',
+    prefix: 'font.ui',
+    cssProperty: 'font',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.ui'),
+  },
+  fontSize: {
+    objectName: 'fontSize',
+    cssProperty: 'fontSize',
+    prefix: 'font.size',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.size'),
+  },
+  fontWeight: {
+    objectName: 'fontWeight',
+    cssProperty: 'fontWeight',
+    prefix: 'font.weight.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
+  },
+  fontFamily: {
+    objectName: 'fontFamily',
+    cssProperty: 'fontFamily',
+    prefix: 'font.family.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
+  },
+  lineHeight: {
+    objectName: 'lineHeight',
+    cssProperty: 'lineHeight',
+    prefix: 'font.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.lineHeight'),
+  },
+} as const;
+
+const activeTokens: Token[] = tokens.map(t => ({
+  name: t.name,
+  fallback: t.value,
+}));
+
+const removeVerbosity = (name: string): string => {
+  const toRemove = ['font.heading', 'font.ui', 'font.body'];
+  if (toRemove.some(s => name.includes(s))) {
+    return name.replace('font.', '');
+  }
+  return name;
+};
+
+export const createTypographyStylesFromTemplate = (
+  typographyProperty: keyof typeof typographyProperties,
+) => {
+  if (!typographyProperties[typographyProperty]) {
+    throw new Error(`[codegen] Unknown option found "${typographyProperty}"`);
+  }
+
+  const { filterFn, objectName } = typographyProperties[typographyProperty];
+
+  return (
+    prettier.format(
+      `
+export const ${objectName}Map = {
+  ${activeTokens
+    .filter(filterFn)
+    .map(t => ({ ...t, name: t.name.replaceAll('.[default]', '') }))
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map(token => {
+      return `
+        '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(
+        token.name,
+        token.fallback,
+      )}
+      `.trim();
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+  );
+};