fix(theme): add default color to all typography tokens to prevent black text on dark theme

src/theme/typography.ts

@@ -10,14 +10,18 @@ const display: TextStyle = {
   fontVariant: ['tabular-nums'] as TextStyle['fontVariant'],
 };
 
+import { colors } from './colors';
+
 export const typography = {
   display: {
+    color: colors.text,
     fontSize: 82,
     lineHeight: 74,
     fontWeight: '900' as const,
     letterSpacing: -7,
   },
   displaySmall: {
+    color: colors.text,
     fontSize: 48,
     lineHeight: 46,
     fontWeight: '900' as const,
@@ -25,6 +29,7 @@ export const typography = {
   },
   displayNumeric: {
     ...display,
+    color: colors.text,
     fontSize: 110,
     lineHeight: 100,
     fontWeight: '900' as const,
@@ -32,6 +37,7 @@ export const typography = {
   },
   displaySmallNumeric: {
     ...display,
+    color: colors.text,
     fontSize: 56,
     lineHeight: 54,
     fontWeight: '900' as const,
@@ -39,6 +45,7 @@ export const typography = {
   },
   metricNumeric: {
     ...numeric,
+    color: colors.text,
     fontSize: 28,
     lineHeight: 30,
     fontWeight: '800' as const,
@@ -46,12 +53,14 @@ export const typography = {
   },
   detailNumeric: {
     ...numeric,
+    color: colors.text,
     fontSize: 18,
     lineHeight: 22,
     fontWeight: '800' as const,
     letterSpacing: -0.8,
   },
   label: {
+    color: colors.text,
     fontSize: 10,
     lineHeight: 13,
     fontWeight: '900' as const,
@@ -59,11 +68,13 @@ export const typography = {
     textTransform: 'uppercase' as const,
   },
   body: {
+    color: colors.text,
     fontSize: 15,
     lineHeight: 22,
     fontWeight: '500' as const,
   },
   button: {
+    color: colors.text,
     fontSize: 12,
     lineHeight: 16,
     fontWeight: '900' as const,