@coze-arch/cli 0.0.1-alpha.912cd5 → 0.0.1-alpha.98e280

package/lib/__templates__/expo/client/constants/theme.ts

@@ -1,30 +1,59 @@
-import { Platform } from "react-native";
-
-const tintColorLight = "#007AFF";
-const tintColorDark = "#0A84FF";
+import { Platform, StyleSheet } from "react-native";
 
 export const Colors = {
   light: {
-    text: "#11181C",
+    text: "#111827",
+    textPrimary: "#111827",
+    textSecondary: "#374151",
+    textMuted: "#9CA3AF",
+    textDisabled: "#D1D5DB",
+    placeholder: "#9CA3AF",
     buttonText: "#FFFFFF",
-    tabIconDefault: "#687076",
-    tabIconSelected: tintColorLight,
-    link: "#007AFF",
-    backgroundRoot: "#FFFFFF", // Elevation 0
-    backgroundDefault: "#F2F2F2", // Elevation 1
-    backgroundSecondary: "#E6E6E6", // Elevation 2
-    backgroundTertiary: "#D9D9D9", // Elevation 3
+    tabIconDefault: "#9CA3AF",
+    tabIconSelected: "#111827",
+    primary: "#111827",
+    accent: "#000000",
+    link: "#111827",
+    success: "#16A34A",
+    warning: "#F59E0B",
+    error: "#DC2626",
+    info: "#2563EB",
+    backgroundRoot: "#FFFFFF",
+    backgroundDefault: "#F9FAFB",
+    backgroundSecondary: "#F3F4F6",
+    backgroundTertiary: "#E5E7EB",
+    border: "#E5E7EB",
+    borderLight: "#F3F4F6",
+    divider: "#F3F4F6",
+    overlay: "rgba(0, 0, 0, 0.4)",
+    chartBackground: "rgba(249, 250, 251, 0.5)",
   },
   dark: {
     text: "#ECEDEE",
+    textPrimary: "#ECEDEE",
+    textSecondary: "#9BA1A6",
+    textMuted: "#6F767E",
+    textDisabled: "#4A4D50",
+    placeholder: "#6F767E",
     buttonText: "#FFFFFF",
-    tabIconDefault: "#9BA1A6",
-    tabIconSelected: tintColorDark,
-    link: "#0A84FF",
-    backgroundRoot: "#1F2123", // Elevation 0
-    backgroundDefault: "#2A2C2E", // Elevation 1
-    backgroundSecondary: "#353739", // Elevation 2
-    backgroundTertiary: "#404244", // Elevation 3
+    tabIconDefault: "#6F767E",
+    tabIconSelected: "#ECEDEE",
+    primary: "#ECEDEE",
+    accent: "#FFFFFF",
+    link: "#ECEDEE",
+    success: "#30D158",
+    warning: "#FF9F0A",
+    error: "#FF453A",
+    info: "#64D2FF",
+    backgroundRoot: "#000000",
+    backgroundDefault: "#1C1C1E",
+    backgroundSecondary: "#2C2C2E",
+    backgroundTertiary: "#3A3A3C",
+    border: "#3A3A3C",
+    borderLight: "#2C2C2E",
+    divider: "#2C2C2E",
+    overlay: "rgba(0, 0, 0, 0.6)",
+    chartBackground: "rgba(28, 28, 30, 0.5)",
   },
 };
 
@@ -38,22 +67,48 @@ export const Spacing = {
   "3xl": 32,
   "4xl": 40,
   "5xl": 48,
+  "6xl": 64,
   inputHeight: 48,
-  buttonHeight: 52,
+  buttonHeight: 48,
+  avatarSize: 40,
+  iconButtonSize: 32,
+  contentPaddingHorizontal: 32,
+  sectionGap: 40,
+  sectionGapLarge: 48,
+  itemGap: 8,
+  detailGap: 48,
+  chartHeight: 128,
 };
 
 export const BorderRadius = {
-  xs: 8,
-  sm: 12,
-  md: 18,
-  lg: 24,
-  xl: 30,
-  "2xl": 40,
-  "3xl": 50,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 40,
   full: 9999,
 };
 
 export const Typography = {
+  display: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -4,
+  },
+  displayLarge: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -2,
+  },
+  displayMedium: {
+    fontSize: 48,
+    lineHeight: 56,
+    fontWeight: "200" as const,
+  },
   h1: {
     fontSize: 32,
     lineHeight: 40,
@@ -67,52 +122,729 @@ export const Typography = {
   h3: {
     fontSize: 24,
     lineHeight: 32,
-    fontWeight: "600" as const,
+    fontWeight: "300" as const,
   },
   h4: {
     fontSize: 20,
     lineHeight: 28,
     fontWeight: "600" as const,
   },
+  title: {
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: "700" as const,
+  },
   body: {
     fontSize: 16,
     lineHeight: 24,
     fontWeight: "400" as const,
   },
+  bodyMedium: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "500" as const,
+  },
   small: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: "400" as const,
   },
+  smallMedium: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "400" as const,
+  },
+  captionMedium: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
+  labelSmall: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+    letterSpacing: 1,
+    textTransform: "uppercase" as const,
+  },
+  labelTitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "700" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
   link: {
     fontSize: 16,
     lineHeight: 24,
     fontWeight: "400" as const,
   },
+  stat: {
+    fontSize: 30,
+    lineHeight: 36,
+    fontWeight: "300" as const,
+  },
+  tiny: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "400" as const,
+  },
+  navLabel: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "500" as const,
+  },
 };
 
 export const Fonts = Platform.select({
   ios: {
-    /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: "system-ui",
-    /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: "ui-serif",
-    /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: "ui-rounded",
-    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: "ui-monospace",
+    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  },
+  android: {
+    sans: "Roboto, 'Segoe UI', Helvetica, Arial, sans-serif",
   },
   default: {
-    sans: "normal",
-    serif: "serif",
-    rounded: "normal",
-    mono: "monospace",
-  },
-  web: {
-    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    serif: "Georgia, 'Times New Roman', serif",
-    rounded:
-      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
-    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  },
+});
+
+export const Shadow = {
+  none: {},
+  minimal: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2 },
+    android: { elevation: 1 },
+    default: {},
+  }),
+  sm: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2 },
+    android: { elevation: 1 },
+    default: {},
+  }),
+  md: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4 },
+    android: { elevation: 3 },
+    default: {},
+  }),
+  lg: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8 },
+    android: { elevation: 6 },
+    default: {},
+  }),
+  island: Platform.select({
+    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 20 },
+    android: { elevation: 8 },
+    default: {},
+  }),
+};
+
+export const Duration = {
+  fast: 150,
+  normal: 250,
+  slow: 400,
+};
+
+export const ZIndex = {
+  base: 0,
+  dropdown: 100,
+  sticky: 200,
+  modal: 300,
+  toast: 400,
+  overlay: 500,
+};
+
+export type Theme = typeof Colors.light;
+
+export const CommonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: Spacing.contentPaddingHorizontal,
+  },
+  centerContent: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  rowGap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+  },
+  rowBetween: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  rowBetweenEnd: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+  },
+  rowBetweenStart: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+  },
+  rowCenter: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  rowCenterGap: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Spacing.detailGap,
+  },
+  column: {
+    flexDirection: "column",
+  },
+  columnCenter: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  flex1: {
+    flex: 1,
+  },
+  textCenter: {
+    textAlign: "center",
+  },
+  avatar: {
+    width: Spacing.avatarSize,
+    height: Spacing.avatarSize,
+    borderRadius: Spacing.avatarSize / 2,
+    borderWidth: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconButton: {
+    width: Spacing.iconButtonSize,
+    height: Spacing.iconButtonSize,
+    borderRadius: Spacing.iconButtonSize / 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Spacing.sm,
+    paddingHorizontal: Spacing.contentPaddingHorizontal,
+    paddingVertical: Spacing.md,
+    borderWidth: 1,
+    borderRadius: BorderRadius.full,
+  },
+  buttonSmall: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Spacing.sm,
+    paddingHorizontal: Spacing.lg,
+    paddingVertical: Spacing.sm,
+    borderRadius: BorderRadius.sm,
+  },
+  card: {
+    borderRadius: BorderRadius.xl,
+    padding: Spacing.sm,
+  },
+  chartContainer: {
+    height: Spacing.chartHeight,
+    borderRadius: BorderRadius.xl,
+    padding: Spacing.sm,
+    borderWidth: 1,
+    position: "relative",
+  },
+  chartGrid: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: Spacing.lg,
+    justifyContent: "space-between",
+  },
+  chartEmpty: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  progressBar: {
+    width: "100%",
+    height: 2,
+    borderRadius: 1,
+    overflow: "hidden",
+    marginTop: Spacing.sm,
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 1,
+  },
+  divider: {
+    height: 1,
+    width: "100%",
+  },
+  dividerVertical: {
+    width: 1,
+    height: "100%",
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  absoluteFill: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  tooltip: {
+    paddingHorizontal: Spacing.sm,
+    paddingVertical: Spacing.xs,
+    borderRadius: BorderRadius.xs,
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: Spacing["2xl"],
+  },
+  section: {
+    marginBottom: Spacing.sectionGap,
+  },
+  sectionLarge: {
+    marginBottom: Spacing.sectionGapLarge,
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+    marginBottom: Spacing["2xl"],
+  },
+  gridLine: {
+    width: "100%",
+    height: 1,
+    borderTopWidth: 1,
+    borderStyle: "dashed",
+  },
+  statsGrid: {
+    flexDirection: "row",
+  },
+  statsColumn: {
+    flex: 1,
+  },
+  statsColumnLeft: {
+    paddingRight: Spacing.lg,
+  },
+  statsColumnRight: {
+    paddingLeft: Spacing.contentPaddingHorizontal,
+    borderLeftWidth: 1,
+  },
+  statsHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: Spacing.lg,
+  },
+  detailItem: {
+    alignItems: "center",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+    paddingBottom: Spacing.lg,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  glucoseSection: {
+    marginTop: Spacing["2xl"],
+    marginBottom: Spacing.sectionGap,
+    alignItems: "center",
+  },
+  glucoseHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+    marginBottom: Spacing.sm,
+  },
+  glucoseUnit: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Spacing.sm,
+    marginTop: Spacing.sm,
+  },
+  glucoseDetails: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: Spacing.detailGap,
+    marginTop: Spacing["2xl"],
   },
 });
+
+export const createThemedStyles = (theme: Theme) => {
+  return StyleSheet.create({
+    container: {
+      ...CommonStyles.container,
+      backgroundColor: theme.backgroundRoot,
+    },
+    scrollContent: {
+      ...CommonStyles.scrollContent,
+    },
+    text: {
+      color: theme.text,
+    },
+    textPrimary: {
+      color: theme.textPrimary,
+    },
+    textSecondary: {
+      color: theme.textSecondary,
+    },
+    textMuted: {
+      color: theme.textMuted,
+    },
+    textDisabled: {
+      color: theme.textDisabled,
+    },
+    textSuccess: {
+      color: theme.success,
+    },
+    textError: {
+      color: theme.error,
+    },
+    textInfo: {
+      color: theme.info,
+    },
+    textButton: {
+      color: theme.buttonText,
+    },
+    avatar: {
+      ...CommonStyles.avatar,
+      borderColor: theme.border,
+      backgroundColor: theme.backgroundRoot,
+    },
+    avatarText: {
+      ...Typography.small,
+      fontFamily: "serif",
+      color: theme.textPrimary,
+    },
+    iconButton: {
+      ...CommonStyles.iconButton,
+      backgroundColor: theme.backgroundSecondary,
+    },
+    iconButtonText: {
+      ...Typography.caption,
+      color: theme.textMuted,
+    },
+    button: {
+      ...CommonStyles.button,
+      borderColor: theme.border,
+      backgroundColor: theme.backgroundRoot,
+      ...Shadow.minimal,
+    },
+    buttonText: {
+      ...Typography.smallMedium,
+      letterSpacing: 0.5,
+      color: theme.textPrimary,
+    },
+    buttonOutline: {
+      ...CommonStyles.buttonSmall,
+      backgroundColor: theme.backgroundSecondary,
+    },
+    buttonOutlineText: {
+      ...Typography.small,
+      color: theme.textSecondary,
+    },
+    buttonSmall: {
+      ...CommonStyles.buttonSmall,
+      backgroundColor: theme.backgroundSecondary,
+    },
+    buttonSmallText: {
+      ...Typography.small,
+      color: theme.textSecondary,
+    },
+    card: {
+      ...CommonStyles.card,
+      backgroundColor: theme.backgroundRoot,
+    },
+    chartContainer: {
+      ...CommonStyles.chartContainer,
+      backgroundColor: theme.chartBackground,
+      borderColor: theme.backgroundSecondary,
+    },
+    chartGrid: {
+      ...CommonStyles.chartGrid,
+    },
+    chartEmpty: {
+      ...CommonStyles.chartEmpty,
+    },
+    chartEmptyText: {
+      ...Typography.small,
+      color: theme.textMuted,
+    },
+    chartTooltip: {
+      position: "absolute",
+      right: 0,
+      top: "55%",
+      backgroundColor: theme.accent,
+      paddingHorizontal: Spacing.sm,
+      paddingVertical: Spacing.xs,
+      borderRadius: BorderRadius.xs,
+      ...Shadow.lg,
+    },
+    chartTooltipText: {
+      ...Typography.tiny,
+      color: theme.backgroundRoot,
+    },
+    progressBar: {
+      ...CommonStyles.progressBar,
+      backgroundColor: theme.backgroundSecondary,
+    },
+    progressFill: {
+      ...CommonStyles.progressFill,
+      backgroundColor: theme.accent,
+    },
+    progressFillMuted: {
+      ...CommonStyles.progressFill,
+      backgroundColor: theme.textMuted,
+    },
+    divider: {
+      ...CommonStyles.divider,
+      backgroundColor: theme.divider,
+    },
+    dividerVertical: {
+      ...CommonStyles.dividerVertical,
+      backgroundColor: theme.borderLight,
+    },
+    dot: {
+      ...CommonStyles.dot,
+      backgroundColor: theme.textDisabled,
+    },
+    tooltip: {
+      ...CommonStyles.tooltip,
+      backgroundColor: theme.accent,
+      ...Shadow.lg,
+    },
+    tooltipText: {
+      color: theme.backgroundRoot,
+    },
+    gridLine: {
+      ...CommonStyles.gridLine,
+      borderTopColor: theme.border,
+    },
+    emptyState: {
+      ...CommonStyles.emptyState,
+    },
+    emptyText: {
+      ...Typography.small,
+      color: theme.textMuted,
+      marginBottom: Spacing.lg,
+    },
+    section: {
+      ...CommonStyles.section,
+    },
+    sectionLarge: {
+      ...CommonStyles.sectionLarge,
+    },
+    sectionHeader: {
+      ...CommonStyles.sectionHeader,
+    },
+    statsGrid: {
+      ...CommonStyles.statsGrid,
+      marginBottom: Spacing.sectionGap,
+    },
+    statsColumn: {
+      ...CommonStyles.statsColumn,
+    },
+    statsColumnLeft: {
+      ...CommonStyles.statsColumnLeft,
+    },
+    statsColumnRight: {
+      ...CommonStyles.statsColumnRight,
+      borderLeftColor: theme.borderLight,
+    },
+    statsHeader: {
+      ...CommonStyles.statsHeader,
+    },
+    statsTitle: {
+      ...Typography.title,
+      color: theme.textPrimary,
+    },
+    statsValue: {
+      ...Typography.stat,
+      color: theme.textPrimary,
+    },
+    statsUnit: {
+      ...Typography.caption,
+      color: theme.textMuted,
+    },
+    statsSubtext: {
+      ...Typography.caption,
+      color: theme.textMuted,
+      marginTop: Spacing.sm,
+    },
+    detailItem: {
+      ...CommonStyles.detailItem,
+    },
+    detailLabel: {
+      ...Typography.caption,
+      color: theme.textMuted,
+      marginBottom: Spacing.xs,
+    },
+    detailValue: {
+      ...Typography.bodyMedium,
+      color: theme.textPrimary,
+    },
+    header: {
+      ...CommonStyles.header,
+    },
+    dateText: {
+      ...Typography.captionMedium,
+      color: theme.textMuted,
+      letterSpacing: 1,
+      textTransform: "uppercase",
+      marginBottom: Spacing.xs,
+    },
+    greetingText: {
+      ...Typography.h3,
+      color: theme.textPrimary,
+    },
+    greetingName: {
+      fontWeight: "700",
+    },
+    label: {
+      ...Typography.label,
+      color: theme.textMuted,
+    },
+    labelSmall: {
+      ...Typography.labelSmall,
+      color: theme.textMuted,
+    },
+    labelTitle: {
+      ...Typography.labelTitle,
+      color: theme.textPrimary,
+    },
+    loadingContainer: {
+      ...CommonStyles.loadingContainer,
+      backgroundColor: theme.backgroundRoot,
+    },
+    statusNormal: {
+      ...Typography.smallMedium,
+      color: theme.success,
+    },
+    statusHigh: {
+      ...Typography.smallMedium,
+      color: theme.error,
+    },
+    statusLow: {
+      ...Typography.smallMedium,
+      color: theme.info,
+    },
+    unitText: {
+      ...Typography.smallMedium,
+      color: theme.textMuted,
+    },
+    glucoseSection: {
+      ...CommonStyles.glucoseSection,
+    },
+    glucoseHeader: {
+      ...CommonStyles.glucoseHeader,
+    },
+    glucoseLabel: {
+      ...Typography.label,
+      color: theme.textMuted,
+    },
+    glucoseValue: {
+      ...Typography.displayLarge,
+      color: theme.textPrimary,
+    },
+    glucoseEmptyValue: {
+      ...Typography.displayMedium,
+      color: theme.textMuted,
+    },
+    glucoseUnit: {
+      ...CommonStyles.glucoseUnit,
+    },
+    glucoseDetails: {
+      ...CommonStyles.glucoseDetails,
+    },
+    trendLink: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: Spacing.xs,
+    },
+    trendLinkText: {
+      ...Typography.caption,
+      color: theme.textMuted,
+    },
+    refreshButton: {
+      ...CommonStyles.buttonSmall,
+      backgroundColor: theme.backgroundSecondary,
+    },
+    refreshButtonText: {
+      ...Typography.small,
+      color: theme.textSecondary,
+    },
+    input: {
+      height: Spacing.inputHeight,
+      backgroundColor: theme.backgroundRoot,
+      borderRadius: BorderRadius.sm,
+      borderWidth: 1,
+      borderColor: theme.border,
+      paddingHorizontal: Spacing.lg,
+      ...Typography.body,
+      color: theme.textPrimary,
+    },
+    inputPlaceholder: {
+      color: theme.placeholder,
+    },
+    link: {
+      ...Typography.link,
+      color: theme.link,
+    },
+    navItem: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingVertical: Spacing.sm,
+    },
+    navIcon: {
+      fontSize: 20,
+      marginBottom: Spacing.xs,
+    },
+    navLabel: {
+      ...Typography.navLabel,
+    },
+    navActive: {
+      color: theme.textPrimary,
+    },
+    navInactive: {
+      color: theme.textMuted,
+    },
+    navIndicator: {
+      width: 4,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: theme.textPrimary,
+      position: "absolute",
+      bottom: -8,
+    },
+  });
+};