@coze-arch/cli 0.0.1-alpha.3ce8c6 → 0.0.1-alpha.40ed71

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

@@ -1,59 +1,35 @@
-import { Platform, StyleSheet } from "react-native";
-
 export const Colors = {
   light: {
-    text: "#111827",
-    textPrimary: "#111827",
-    textSecondary: "#374151",
+    textPrimary: "#1C1917",
+    textSecondary: "#78716c",
     textMuted: "#9CA3AF",
-    textDisabled: "#D1D5DB",
-    placeholder: "#9CA3AF",
-    buttonText: "#FFFFFF",
-    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",
+    primary: "#4F46E5", // Indigo-600 - 品牌主色，代表科技与智能
+    accent: "#8B5CF6", // Violet-500 - 辅助色，代表创造力
+    success: "#10B981", // Emerald-500
+    error: "#EF4444",
+    backgroundRoot: "#FAFAFA",
+    backgroundDefault: "#FFFFFF",
+    backgroundTertiary: "#F9FAFB", // 更浅的背景色，用于去线留白
+    buttonPrimaryText: "#FFFFFF",
+    tabIconSelected: "#4F46E5",
     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",
+    textPrimary: "#FAFAF9",
+    textSecondary: "#A8A29E",
     textMuted: "#6F767E",
-    textDisabled: "#4A4D50",
-    placeholder: "#6F767E",
-    buttonText: "#FFFFFF",
-    tabIconDefault: "#6F767E",
-    tabIconSelected: "#ECEDEE",
-    primary: "#ECEDEE",
-    accent: "#FFFFFF",
-    link: "#ECEDEE",
-    success: "#30D158",
-    warning: "#FF9F0A",
-    error: "#FF453A",
-    info: "#64D2FF",
-    backgroundRoot: "#000000",
+    primary: "#818CF8", // Indigo-400 - 暗色模式品牌主色
+    accent: "#A78BFA", // Violet-400
+    success: "#34D399",
+    error: "#F87171",
+    backgroundRoot: "#09090B", // 更深的背景色
     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)",
+    backgroundTertiary: "#1F1F22", // 暗色模式去线留白背景
+    buttonPrimaryText: "#09090B",
+    tabIconSelected: "#818CF8",
+    border: "#3F3F46",
+    borderLight: "#27272A",
   },
 };
 
@@ -68,16 +44,6 @@ export const Spacing = {
   "4xl": 40,
   "5xl": 48,
   "6xl": 64,
-  inputHeight: 48,
-  buttonHeight: 48,
-  avatarSize: 40,
-  iconButtonSize: 32,
-  contentPaddingHorizontal: 32,
-  sectionGap: 40,
-  sectionGapLarge: 48,
-  itemGap: 8,
-  detailGap: 48,
-  chartHeight: 128,
 };
 
 export const BorderRadius = {
@@ -87,7 +53,8 @@ export const BorderRadius = {
   lg: 16,
   xl: 20,
   "2xl": 24,
-  "3xl": 40,
+  "3xl": 28,
+  "4xl": 32,
   full: 9999,
 };
 
@@ -207,644 +174,4 @@ export const Typography = {
   },
 };
 
-export const Fonts = Platform.select({
-  ios: {
-    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-  },
-  android: {
-    sans: "Roboto, 'Segoe UI', Helvetica, Arial, sans-serif",
-  },
-  default: {
-    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,
-    },
-  });
-};