[Theming] Add TYPOGRAPHY_CONSTANTS (#520)

* Add recursive checking to compareObjectsKeysLength

* Add PRIMARY_TYPOGRAPHY and SECONDARY_TYPOGRAPHY

* Rename to just TYPOGRAPHY, add theme test

* Add TODO

src/constants/themes/primaryTheme.ts

@@ -1,9 +1,11 @@
 import PRIMARY_COLORS from '../colors/primary';
 import PRIMARY_FONTS from '../fonts/primary';
+import { PRIMARY_TYPOGRAPHY } from '../typography/primaryTypography';
 
 export const primaryTheme = {
   __type: 'primary',
   BOX_SHADOW: {},
   COLORS: PRIMARY_COLORS,
   FONTS: PRIMARY_FONTS,
+  TYPOGRAPHY: PRIMARY_TYPOGRAPHY,
 } as const;

src/constants/themes/secondaryTheme.ts

@@ -1,9 +1,11 @@
 import SECONDARY_COLORS from '../colors/secondary';
 import SECONDARY_FONTS from '../fonts/secondary';
+import { SECONDARY_TYPOGRAPHY } from '../typography/secondaryTypography';
 
 export const secondaryTheme = {
   __type: 'secondary',
   BOX_SHADOW: {},
   COLORS: SECONDARY_COLORS,
   FONTS: SECONDARY_FONTS,
+  TYPOGRAPHY: SECONDARY_TYPOGRAPHY,
 } as const;

src/constants/themes/test.ts

@@ -0,0 +1,10 @@
+import compareObjectsKeysLength from 'src/utils/compareObjectsKeysLength';
+
+import { primaryTheme } from './primaryTheme';
+import { secondaryTheme } from './secondaryTheme';
+
+describe('themes', () => {
+  it('primary and secondary themes have the same number of properties', () => {
+    expect(compareObjectsKeysLength(primaryTheme, secondaryTheme)).toBe(true);
+  });
+});

src/constants/themes/types.ts

@@ -11,6 +11,10 @@ type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS'];
 
 type Fonts = typeof primaryTheme['FONTS'] | typeof secondaryTheme['FONTS'];
 
+type Typography =
+  | typeof primaryTheme['TYPOGRAPHY']
+  | typeof secondaryTheme['TYPOGRAPHY'];
+
 export type ThemeColors = valueof<Colors>;
 
 export const COLORS_PROP_TYPES = PropTypes.oneOf([
@@ -23,4 +27,5 @@ export type ThemeType = {
   BOX_SHADOW: BoxShadow;
   COLORS: Colors;
   FONTS: Fonts;
+  TYPOGRAPHY: Typography;
 };

src/constants/typography/primaryTypography.ts

@@ -0,0 +1,18 @@
+const fontSize = {
+  display: '2.25rem', // 36px
+  heading: '1.5rem', // 24px
+  title: '1.25rem', // 20px
+  body: '1rem', // 16px
+  caption: '0.875rem', // 14px
+  label: '0.75rem', // 12px
+} as const;
+
+const fontWeight = {
+  bold: 'bold',
+  normal: 400,
+} as const;
+
+export const PRIMARY_TYPOGRAPHY = {
+  fontSize,
+  fontWeight,
+} as const;

src/constants/typography/secondaryTypography.ts

@@ -0,0 +1,19 @@
+// TODO: Update when values are finalized
+const fontSize = {
+  display: '2.25rem', // 36px
+  heading: '1.5rem', // 24px
+  title: '1.25rem', // 20px
+  body: '1rem', // 16px
+  caption: '0.875rem', // 14px
+  label: '0.75rem', // 12px
+} as const;
+
+const fontWeight = {
+  bold: 'bold',
+  normal: 400,
+} as const;
+
+export const SECONDARY_TYPOGRAPHY = {
+  fontSize,
+  fontWeight,
+} as const;

src/constants/typography/test.ts

@@ -0,0 +1,12 @@
+import compareObjectsKeysLength from 'src/utils/compareObjectsKeysLength';
+
+import { PRIMARY_TYPOGRAPHY } from './primaryTypography';
+import { SECONDARY_TYPOGRAPHY } from './secondaryTypography';
+
+describe('theme typography', () => {
+  it('primary and secondary typography have the same number of properties', () => {
+    expect(
+      compareObjectsKeysLength(PRIMARY_TYPOGRAPHY, SECONDARY_TYPOGRAPHY),
+    ).toBe(true);
+  });
+});

src/utils/compareObjectsKeysLength/index.ts

@@ -1,6 +1,42 @@
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+interface RecursiveObjectType {
+  [key: string]: string | number | this;
+}
+
+const stringifyObjects = (
+  obj1: RecursiveObjectType,
+  obj2: RecursiveObjectType,
+) => `\n\nobj1: ${JSON.stringify(obj1)}\n\nobj2:${JSON.stringify(obj2)}`;
+
 const compareObjectsKeysLength = (
-  object1: Record<string, unknown>,
-  object2: Record<string, unknown>,
-) => Object.keys(object1).length === Object.keys(object2).length;
+  obj1: RecursiveObjectType,
+  obj2: RecursiveObjectType,
+): boolean => {
+  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+    console.error(`Object keys do not match:${stringifyObjects(obj1, obj2)}`);
+    return false;
+  }
+
+  return Object.keys(obj1).every((key) => {
+    const obj1Val = obj1[key];
+    const obj2Val = obj2[key];
+
+    // Test deep key equality recursively
+    if (typeof obj1Val === 'object' && typeof obj2Val === 'object') {
+      return compareObjectsKeysLength(obj1Val, obj2Val);
+    }
+
+    // Check if property value is null or undefined, neither of which are valid
+    // theme values, which means there was not a complementary key found
+    if (obj2Val == null) {
+      console.error(
+        `Key "${key}" missing in obj2:${stringifyObjects(obj1, obj2)}`,
+      );
+      return false;
+    }
+
+    return true;
+  });
+};
 
 export default compareObjectsKeysLength;