uikit-react-public 0.14.21 → 0.21.8

package/lib/theme/__tests__/fonts.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from 'vitest';
+import { uikitFontUrls, uikitFonts } from '../fonts';
+
+describe('theme/fonts exports', () => {
+  test('exports font URL map with expected keys', () => {
+    expect(uikitFontUrls).toMatchObject({
+      dmSansNormal: expect.any(String),
+      dmSansItalic: expect.any(String),
+      dmMonoItalic: expect.any(String),
+      dmMonoLight: expect.any(String),
+      dmMonoLightItalic: expect.any(String),
+      dmMonoMedium: expect.any(String),
+      dmMonoMediumItalic: expect.any(String),
+      dmMonoRegular: expect.any(String),
+    });
+  });
+
+  test('exports font source map with required shape', () => {
+    expect(uikitFonts['DM Sans']).toBeDefined();
+    expect(uikitFonts['DM Mono']).toBeDefined();
+
+    Object.values(uikitFonts).forEach((fontSources) => {
+      expect(Array.isArray(fontSources)).toBe(true);
+      expect(fontSources.length).toBeGreaterThan(0);
+
+      fontSources.forEach((source) => {
+        expect(typeof source.src).toBe('string');
+        expect(source.src.length).toBeGreaterThan(0);
+        expect(
+          source.fontStyle === 'normal' || source.fontStyle === 'italic'
+        ).toBe(true);
+        expect(typeof source.fontWeight).toBe('number');
+        expect(typeof source.fontFeatureSettings).toBe('string');
+      });
+    });
+  });
+});

package/lib/theme/common/themeCommon.ts

@@ -0,0 +1,515 @@
+import { tokens } from 'design-system-foundations-public';
+
+const { light: lightTokens, primitives: primitiveTokens } = tokens;
+
+const { sans, mono } = primitiveTokens.font.family; // sans and mono
+
+const fontFamiliesByRef = {
+  '#/font/family/sans': sans.$value.family,
+  '#/font/family/mono': mono.$value.family,
+};
+
+const fontSettingsByRef = {
+  '#/font/family/sans': sans.$value.featureSettings,
+  '#/font/family/mono': undefined,
+};
+
+type FontFamiliesByRef = typeof fontFamiliesByRef;
+type FontSettingsByRef = typeof fontSettingsByRef;
+type FeatureSettings = typeof sans.$value.featureSettings;
+
+const featureSettings = (featureSettingsTokenValue?: FeatureSettings) => {
+  if (featureSettingsTokenValue) {
+    return Object.entries(featureSettingsTokenValue)
+      .map(([f, v]) => `"${f}" ${v}`)
+      .join(', ');
+  } else {
+    return '';
+  }
+};
+
+export const primitiveColour = {
+  grey: primitiveTokens.colour.grey,
+  whiteAlpha: primitiveTokens.colour['white-alpha'],
+  red: primitiveTokens.colour.red,
+  orange: primitiveTokens.colour.orange,
+  yellow: primitiveTokens.colour.yellow,
+  green: primitiveTokens.colour.green,
+  blue: primitiveTokens.colour.blue,
+  brandPurple: primitiveTokens.colour['brand-purple'],
+  brandBlur: primitiveTokens.colour['brand-blue'],
+};
+
+export const typography = {
+  heading: {
+    xxl: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xxl.$value.md
+              .fontFamily.$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xxl.$value.md
+              .fontFamily.$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xxl.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xxl.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xxl.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xxl.$value.sm
+              .fontFamily.$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xxl.$value.sm
+              .fontFamily.$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xxl.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xxl.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xxl.$value.sm.lineHeight,
+      },
+    },
+    xl: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xl.$value.md.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xl.$value.md.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xl.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xl.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xl.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xl.$value.sm.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xl.$value.sm.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xl.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xl.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xl.$value.sm.lineHeight,
+      },
+    },
+    lg: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].lg.$value.md.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].lg.$value.md.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].lg.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].lg.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].lg.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].lg.$value.sm.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].lg.$value.sm.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].lg.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].lg.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].lg.$value.sm.lineHeight,
+      },
+    },
+    md: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].md.$value.md.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].md.$value.md.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].md.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].md.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].md.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].md.$value.sm.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].md.$value.sm.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].md.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].md.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].md.$value.sm.lineHeight,
+      },
+    },
+    sm: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].sm.$value.md.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].sm.$value.md.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].sm.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].sm.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].sm.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].sm.$value.sm.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].sm.$value.sm.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].sm.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].sm.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].sm.$value.sm.lineHeight,
+      },
+    },
+    xs: {
+      md: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xs.$value.md.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xs.$value.md.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xs.$value.md.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xs.$value.md.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xs.$value.md.lineHeight,
+      },
+      sm: {
+        fontFamily:
+          fontFamiliesByRef[
+            lightTokens.typography['functional-heading'].xs.$value.sm.fontFamily
+              .$ref as keyof FontFamiliesByRef
+          ],
+        fontSettings: featureSettings(
+          fontSettingsByRef[
+            lightTokens.typography['functional-heading'].xs.$value.sm.fontFamily
+              .$ref as keyof FontSettingsByRef
+          ]
+        ),
+        fontSize:
+          lightTokens.typography['functional-heading'].xs.$value.sm.fontSize,
+        fontWeight:
+          lightTokens.typography['functional-heading'].xs.$value.sm.fontWeight,
+        lineHeight:
+          lightTokens.typography['functional-heading'].xs.$value.sm.lineHeight,
+      },
+    },
+  },
+  body: {
+    lg: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body.lg.$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body.lg.$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body.lg.$value.fontSize,
+      fontWeight: lightTokens.typography.body.lg.$value.fontWeight,
+      lineHeight: lightTokens.typography.body.lg.$value.lineHeight,
+    },
+    lgMedium: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['lg-medium'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['lg-medium'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['lg-medium'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['lg-medium'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['lg-medium'].$value.lineHeight,
+    },
+    lgSemibold: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['lg-semibold'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['lg-semibold'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['lg-semibold'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['lg-semibold'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['lg-semibold'].$value.lineHeight,
+    },
+    lgBold: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['lg-bold'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['lg-bold'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['lg-bold'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['lg-bold'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['lg-bold'].$value.lineHeight,
+    },
+    md: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['md'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['md'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['md'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['md'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['md'].$value.lineHeight,
+    },
+    mdMedium: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['md-medium'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['md-medium'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['md-medium'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['md-medium'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['md-medium'].$value.lineHeight,
+    },
+    mdSemibold: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['md-semibold'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['md-semibold'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['md-semibold'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['md-semibold'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['md-semibold'].$value.lineHeight,
+    },
+    mdNumeric: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['md-numeric'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['md-numeric'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['md-numeric'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['md-numeric'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['md-numeric'].$value.lineHeight,
+    },
+    mdMediumNumeric: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['md-medium-numeric'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['md-medium-numeric'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize:
+        lightTokens.typography.body['md-medium-numeric'].$value.fontSize,
+      fontWeight:
+        lightTokens.typography.body['md-medium-numeric'].$value.fontWeight,
+      lineHeight:
+        lightTokens.typography.body['md-medium-numeric'].$value.lineHeight,
+    },
+    sm: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['sm'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['sm'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['sm'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['sm'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['sm'].$value.lineHeight,
+    },
+    smMedium: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['sm-medium'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['sm-medium'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['sm-medium'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['sm-medium'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['sm-medium'].$value.lineHeight,
+    },
+    smSemibold: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['sm-semibold'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['sm-semibold'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['sm-semibold'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['sm-semibold'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['sm-semibold'].$value.lineHeight,
+    },
+    xs: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['xs'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['xs'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['xs'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['xs'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['xs'].$value.lineHeight,
+    },
+    xsMedium: {
+      fontFamily:
+        fontFamiliesByRef[
+          lightTokens.typography.body['xs-medium'].$value.fontFamily
+            .$ref as keyof FontFamiliesByRef
+        ],
+      fontSettings: featureSettings(
+        fontSettingsByRef[
+          lightTokens.typography.body['xs-medium'].$value.fontFamily
+            .$ref as keyof FontSettingsByRef
+        ]
+      ),
+      fontSize: lightTokens.typography.body['xs-medium'].$value.fontSize,
+      fontWeight: lightTokens.typography.body['xs-medium'].$value.fontWeight,
+      lineHeight: lightTokens.typography.body['xs-medium'].$value.lineHeight,
+    },
+  },
+};

package/lib/theme/fonts.ts

@@ -0,0 +1,110 @@
+import { tokens } from 'design-system-foundations-public';
+import DMSansNormal from 'design-system-foundations-public/dist/assets/fonts/DMSans[opsz,wght].woff2?url';
+import DMSansItalic from 'design-system-foundations-public/dist/assets/fonts/DMSans-Italic[opsz,wght].woff2?url';
+import DMMonoItalic from 'design-system-foundations-public/dist/assets/fonts/DMMono-Italic.woff2?url';
+import DMMonoLight from 'design-system-foundations-public/dist/assets/fonts/DMMono-Light.woff2?url';
+import DMMonoLightItalic from 'design-system-foundations-public/dist/assets/fonts/DMMono-LightItalic.woff2?url';
+import DMMonoMedium from 'design-system-foundations-public/dist/assets/fonts/DMMono-Medium.woff2?url';
+import DMMonoMediumItalic from 'design-system-foundations-public/dist/assets/fonts/DMMono-MediumItalic.woff2?url';
+import DMMonoRegular from 'design-system-foundations-public/dist/assets/fonts/DMMono-Regular.woff2?url';
+
+const { sans } = tokens.primitives.font.family;
+
+export type FontStyle = 'normal' | 'italic';
+
+export type FontSource = {
+  src: string;
+  fontStyle: FontStyle;
+  fontWeight: number;
+  fontFeatureSettings: string;
+};
+
+/*
+Usage example:
+
+import { Font } from '@react-pdf/renderer';
+import { uikitFonts } from '@dev-and-test/uikit-react';
+
+Object.entries(uikitFonts).forEach(([family, fonts]) => {
+  Font.register({ family, fonts });
+});
+*/
+
+const toFontFeatureSettings = (
+  featureSettingsTokenValue?: Record<string, number>
+) => {
+  if (!featureSettingsTokenValue) return '';
+  return Object.entries(featureSettingsTokenValue)
+    .map(([feature, value]) => `"${feature}" ${value}`)
+    .join(', ');
+};
+
+const sansFontFeatureSettings = toFontFeatureSettings(
+  sans.$value.featureSettings
+);
+
+export const uikitFontUrls = {
+  dmSansNormal: DMSansNormal,
+  dmSansItalic: DMSansItalic,
+  dmMonoItalic: DMMonoItalic,
+  dmMonoLight: DMMonoLight,
+  dmMonoLightItalic: DMMonoLightItalic,
+  dmMonoMedium: DMMonoMedium,
+  dmMonoMediumItalic: DMMonoMediumItalic,
+  dmMonoRegular: DMMonoRegular,
+} as const;
+
+export const uikitFonts: Record<string, FontSource[]> = {
+  'DM Sans': [
+    {
+      src: uikitFontUrls.dmSansNormal,
+      fontWeight: 400,
+      fontStyle: 'normal',
+      fontFeatureSettings: sansFontFeatureSettings,
+    },
+    {
+      src: uikitFontUrls.dmSansItalic,
+      fontWeight: 400,
+      fontStyle: 'italic',
+      fontFeatureSettings: sansFontFeatureSettings,
+    },
+  ],
+  'DM Mono': [
+    {
+      src: uikitFontUrls.dmMonoLight,
+      fontWeight: 300,
+      fontStyle: 'normal',
+      fontFeatureSettings: '',
+    },
+    {
+      src: uikitFontUrls.dmMonoLightItalic,
+      fontWeight: 300,
+      fontStyle: 'italic',
+      fontFeatureSettings: '',
+    },
+    {
+      src: uikitFontUrls.dmMonoRegular,
+      fontWeight: 400,
+      fontStyle: 'normal',
+      fontFeatureSettings: '',
+    },
+    {
+      src: uikitFontUrls.dmMonoItalic,
+      fontWeight: 400,
+      fontStyle: 'italic',
+      fontFeatureSettings: '',
+    },
+    {
+      src: uikitFontUrls.dmMonoMedium,
+      fontWeight: 500,
+      fontStyle: 'normal',
+      fontFeatureSettings: '',
+    },
+    {
+      src: uikitFontUrls.dmMonoMediumItalic,
+      fontWeight: 500,
+      fontStyle: 'italic',
+      fontFeatureSettings: '',
+    },
+  ],
+};

package/lib/theme/index.ts

@@ -1,10 +1,10 @@
-export { default as theme } from './defaultTheme';
+export { default as theme } from './original/defaultTheme';
+export { default as lightTheme } from './light/lightTheme';
 export type {
   ThemeType,
   DisplayColoursType,
   BlackAndWhiteColoursType,
-} from './defaultTheme';
-export {
-  default as useTheme,
-  ThemeContextProvider,
-} from './useTheme';
+} from './original/defaultTheme';
+export { default as useTheme, ThemeContextProvider } from './useTheme';
+export { uikitFontUrls, uikitFonts } from './fonts';
+export type { FontSource, FontStyle } from './fonts';