Initial commit

src/theme/colors.ts

@@ -0,0 +1,13 @@
+export const DTColors = {
+  dark: '#000000',
+  light: '#FFFFFF',
+  modeNormal: '#00FFFF', // Cyan - primary actions
+  modeNormalSelected: 'rgba(0, 255, 255, 0.7)',
+  modeEmphasis: '#FFFF00', // Yellow - highlights
+  modeEmphasisSelected: 'rgba(255, 255, 0, 0.7)',
+  modeWarning: '#FF0000', // Red - errors/warnings
+  modeSuccess: '#00FF00', // Green - success states
+  modeOther: '#FF00FF', // Magenta - misc
+} as const;
+
+export type DTColorKey = keyof typeof DTColors;

src/theme/index.ts

@@ -0,0 +1,4 @@
+export {DTColors} from './colors';
+export type {DTColorKey} from './colors';
+export {DTFonts, DTTypography} from './typography';
+export {DTTheme} from './paperTheme';

src/theme/paperTheme.ts

@@ -0,0 +1,71 @@
+import {MD3DarkTheme, configureFonts} from 'react-native-paper';
+import type {MD3Theme} from 'react-native-paper';
+import {DTColors} from './colors';
+import {DTTypography} from './typography';
+
+const fontConfig = {
+  displayLarge: DTTypography.displayLarge,
+  displayMedium: DTTypography.displayMedium,
+  displaySmall: DTTypography.displaySmall,
+  headlineLarge: DTTypography.headlineLarge,
+  headlineMedium: DTTypography.headlineMedium,
+  headlineSmall: DTTypography.headlineSmall,
+  titleLarge: DTTypography.titleLarge,
+  titleMedium: DTTypography.titleMedium,
+  titleSmall: DTTypography.titleSmall,
+  bodyLarge: DTTypography.bodyLarge,
+  bodyMedium: DTTypography.bodyMedium,
+  bodySmall: DTTypography.bodySmall,
+  labelLarge: DTTypography.labelLarge,
+  labelMedium: DTTypography.labelMedium,
+  labelSmall: DTTypography.labelSmall,
+};
+
+export const DTTheme: MD3Theme = {
+  ...MD3DarkTheme,
+  dark: true,
+  colors: {
+    ...MD3DarkTheme.colors,
+    primary: DTColors.modeNormal,
+    onPrimary: DTColors.dark,
+    primaryContainer: DTColors.modeNormalSelected,
+    onPrimaryContainer: DTColors.dark,
+    secondary: DTColors.modeEmphasis,
+    onSecondary: DTColors.dark,
+    secondaryContainer: DTColors.modeEmphasisSelected,
+    onSecondaryContainer: DTColors.dark,
+    tertiary: DTColors.modeOther,
+    onTertiary: DTColors.dark,
+    tertiaryContainer: 'rgba(255, 0, 255, 0.3)',
+    onTertiaryContainer: DTColors.light,
+    error: DTColors.modeWarning,
+    onError: DTColors.dark,
+    errorContainer: 'rgba(255, 0, 0, 0.3)',
+    onErrorContainer: DTColors.light,
+    background: DTColors.dark,
+    onBackground: DTColors.light,
+    surface: DTColors.dark,
+    onSurface: DTColors.light,
+    surfaceVariant: '#1a1a1a',
+    onSurfaceVariant: DTColors.light,
+    outline: DTColors.modeNormal,
+    outlineVariant: 'rgba(0, 255, 255, 0.3)',
+    inverseSurface: DTColors.light,
+    inverseOnSurface: DTColors.dark,
+    inversePrimary: '#008888',
+    elevation: {
+      level0: 'transparent',
+      level1: '#0a0a0a',
+      level2: '#121212',
+      level3: '#1a1a1a',
+      level4: '#1e1e1e',
+      level5: '#222222',
+    },
+    surfaceDisabled: 'rgba(255, 255, 255, 0.12)',
+    onSurfaceDisabled: 'rgba(255, 255, 255, 0.38)',
+    backdrop: 'rgba(0, 0, 0, 0.5)',
+    shadow: DTColors.dark,
+    scrim: DTColors.dark,
+  },
+  fonts: configureFonts({config: fontConfig}),
+};

src/theme/typography.ts

@@ -0,0 +1,96 @@
+import {Platform} from 'react-native';
+
+export const DTFonts = {
+  primary: Platform.select({
+    ios: 'Tektur',
+    android: 'Tektur',
+    default: 'System',
+  }),
+} as const;
+
+export const DTTypography = {
+  displayLarge: {
+    fontFamily: DTFonts.primary,
+    fontSize: 57,
+    fontWeight: '400' as const,
+    letterSpacing: -0.25,
+  },
+  displayMedium: {
+    fontFamily: DTFonts.primary,
+    fontSize: 45,
+    fontWeight: '400' as const,
+  },
+  displaySmall: {
+    fontFamily: DTFonts.primary,
+    fontSize: 36,
+    fontWeight: '400' as const,
+  },
+  headlineLarge: {
+    fontFamily: DTFonts.primary,
+    fontSize: 32,
+    fontWeight: '400' as const,
+  },
+  headlineMedium: {
+    fontFamily: DTFonts.primary,
+    fontSize: 28,
+    fontWeight: '400' as const,
+  },
+  headlineSmall: {
+    fontFamily: DTFonts.primary,
+    fontSize: 24,
+    fontWeight: '400' as const,
+  },
+  titleLarge: {
+    fontFamily: DTFonts.primary,
+    fontSize: 22,
+    fontWeight: '500' as const,
+  },
+  titleMedium: {
+    fontFamily: DTFonts.primary,
+    fontSize: 16,
+    fontWeight: '500' as const,
+    letterSpacing: 0.15,
+  },
+  titleSmall: {
+    fontFamily: DTFonts.primary,
+    fontSize: 14,
+    fontWeight: '500' as const,
+    letterSpacing: 0.1,
+  },
+  bodyLarge: {
+    fontFamily: DTFonts.primary,
+    fontSize: 16,
+    fontWeight: '400' as const,
+    letterSpacing: 0.5,
+  },
+  bodyMedium: {
+    fontFamily: DTFonts.primary,
+    fontSize: 14,
+    fontWeight: '400' as const,
+    letterSpacing: 0.25,
+  },
+  bodySmall: {
+    fontFamily: DTFonts.primary,
+    fontSize: 12,
+    fontWeight: '400' as const,
+    letterSpacing: 0.4,
+  },
+  labelLarge: {
+    fontFamily: DTFonts.primary,
+    fontSize: 14,
+    fontWeight: '500' as const,
+    letterSpacing: 0.1,
+  },
+  labelMedium: {
+    fontFamily: DTFonts.primary,
+    fontSize: 12,
+    fontWeight: '500' as const,
+    letterSpacing: 0.5,
+  },
+  labelSmall: {
+    fontFamily: DTFonts.primary,
+    fontSize: 11,
+    fontWeight: '500' as const,
+    letterSpacing: 0.5,
+  },
+} as const;