add all frontend files

src/theme.js

@@ -0,0 +1,467 @@
+/**
+ * Design Token System for Oil Customer Gateway
+ *
+ * This file centralizes all design values to ensure consistency across the app.
+ * Import and use these tokens instead of hardcoding values.
+ *
+ * Usage:
+ *   import { colors, spacing, fontSize, ... } from '../theme';
+ *   style={{ color: colors.primary, padding: spacing.md }}
+ */
+
+// =============================================================================
+// COLORS
+// =============================================================================
+
+export const colors = {
+  // Brand Colors
+  primary: '#14368f',         // Oil blue - main brand color
+  secondary: '#ff6600',       // Oil orange - accent/CTA color
+
+  // Neutral Colors
+  white: '#ffffff',
+  black: '#000000',
+  gray: {
+    50: '#fafafa',
+    100: '#f5f5f5',           // Card backgrounds, subtle backgrounds
+    200: '#e8e8e8',           // Borders, dividers
+    300: '#d9d9d9',           // Input borders
+    400: '#bfbfbf',
+    500: '#8c8c8c',
+    600: '#666666',           // Hint text, secondary text
+    700: '#333837',           // Oil gray - dark text
+    800: '#262626',
+    900: '#1f1f1f',
+  },
+
+  // Semantic Colors
+  success: '#52c41a',
+  successLight: '#d4edda',    // Light green for waiting delivery
+  warning: '#faad14',
+  warningLight: '#fff7e6',    // Warning card background
+  warningBorder: '#ffcc02',
+  error: '#ff4d4f',
+  info: '#1890ff',            // Links, info elements
+
+  // Status Colors
+  gold: '#ffd700',            // Out for delivery highlight
+  goldGlow: 'rgba(255, 215, 0, 0.5)',
+
+  // Background Colors
+  background: {
+    page: '#ffffff',
+    card: '#f5f5f5',
+    overlay: 'rgba(0, 0, 0, 0.45)',
+  },
+
+  // Text Colors
+  text: {
+    primary: 'rgba(0, 0, 0, 0.85)',
+    secondary: 'rgba(0, 0, 0, 0.65)',
+    hint: '#666666',
+    inverse: '#ffffff',
+    link: '#1890ff',
+  },
+};
+
+// =============================================================================
+// SPACING
+// =============================================================================
+
+export const spacing = {
+  xxs: 4,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+
+  // Specific use cases
+  gutter: {
+    xs: 8,    // Mobile gutter
+    md: 16,   // Default gutter
+    lg: 24,   // Large screens
+  },
+
+  // Content padding
+  content: {
+    mobile: 8,
+    tablet: 16,
+    desktop: 50,
+  },
+
+  // Card/section padding
+  card: {
+    xs: 12,
+    sm: 16,
+    md: 24,
+  },
+};
+
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 32,
+};
+
+export const fontWeight = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+export const lineHeight = {
+  tight: 1.25,
+  normal: 1.5,
+  relaxed: 1.6,
+  loose: 2,
+};
+
+// =============================================================================
+// BORDERS
+// =============================================================================
+
+export const borderRadius = {
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 9999,
+};
+
+export const borderWidth = {
+  default: 1,
+  thick: 2,
+};
+
+// =============================================================================
+// SHADOWS
+// =============================================================================
+
+export const shadows = {
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+  glow: {
+    gold: '0 0 10px rgba(255, 215, 0, 0.5)',
+  },
+};
+
+// =============================================================================
+// BREAKPOINTS
+// =============================================================================
+
+export const breakpoints = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+};
+
+// =============================================================================
+// TRANSITIONS
+// =============================================================================
+
+export const transitions = {
+  fast: '0.15s ease',
+  normal: '0.3s ease',
+  slow: '0.5s ease',
+};
+
+// =============================================================================
+// Z-INDEX
+// =============================================================================
+
+export const zIndex = {
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  modal: 1040,
+  popover: 1050,
+  tooltip: 1060,
+};
+
+// =============================================================================
+// COMPONENT-SPECIFIC TOKENS
+// =============================================================================
+
+export const components = {
+  // Header
+  header: {
+    height: 64,
+    background: colors.primary,
+  },
+
+  // Logo
+  logo: {
+    height: 32,
+  },
+
+  // Buttons
+  button: {
+    height: {
+      sm: 32,
+      default: 40,
+      lg: 48,
+      xl: 60,
+    },
+    fontSize: {
+      sm: fontSize.sm,
+      default: fontSize.base,
+      lg: fontSize.lg,
+    },
+  },
+
+  // Cards
+  card: {
+    background: colors.background.card,
+    border: `1px solid ${colors.gray[200]}`,
+    borderRadius: borderRadius.lg,
+  },
+
+  // Tables
+  table: {
+    scrollHeight: 400,
+  },
+
+  // Forms
+  form: {
+    maxWidth: 400,
+    labelFontSize: fontSize.sm,
+  },
+
+  // Images
+  image: {
+    thumbnail: {
+      mobile: 120,
+      desktop: 100,
+    },
+    preview: 150,
+  },
+};
+
+// =============================================================================
+// ANT DESIGN THEME CONFIG
+// =============================================================================
+
+/**
+ * Use this with Ant Design's ConfigProvider to apply consistent theming
+ *
+ * Usage:
+ *   import { antdTheme } from './theme';
+ *   <ConfigProvider theme={antdTheme}>
+ *     <App />
+ *   </ConfigProvider>
+ */
+export const antdTheme = {
+  token: {
+    colorPrimary: colors.primary,
+    colorLink: colors.text.link,
+    colorSuccess: colors.success,
+    colorWarning: colors.warning,
+    colorError: colors.error,
+    colorInfo: colors.info,
+
+    borderRadius: borderRadius.md,
+
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: fontSize.base,
+
+    colorBgContainer: colors.white,
+    colorBgLayout: colors.gray[100],
+
+    paddingXS: spacing.xs,
+    paddingSM: spacing.sm,
+    padding: spacing.md,
+    paddingLG: spacing.lg,
+    paddingXL: spacing.xl,
+  },
+  components: {
+    Button: {
+      colorPrimaryHover: '#1e4db8',
+      borderRadius: borderRadius.md,
+    },
+    Card: {
+      colorBgContainer: colors.gray[100],
+    },
+  },
+};
+
+// =============================================================================
+// CSS CUSTOM PROPERTIES
+// =============================================================================
+
+/**
+ * Injects CSS custom properties (variables) into the document root.
+ * Call this once at app initialization.
+ *
+ * Usage in CSS:
+ *   color: var(--color-primary);
+ *   padding: var(--spacing-md);
+ */
+export const injectCSSVariables = () => {
+  const root = document.documentElement;
+
+  // Colors
+  root.style.setProperty('--color-primary', colors.primary);
+  root.style.setProperty('--color-secondary', colors.secondary);
+  root.style.setProperty('--color-white', colors.white);
+  root.style.setProperty('--color-success', colors.success);
+  root.style.setProperty('--color-success-light', colors.successLight);
+  root.style.setProperty('--color-warning', colors.warning);
+  root.style.setProperty('--color-warning-light', colors.warningLight);
+  root.style.setProperty('--color-warning-border', colors.warningBorder);
+  root.style.setProperty('--color-error', colors.error);
+  root.style.setProperty('--color-info', colors.info);
+  root.style.setProperty('--color-gold', colors.gold);
+  root.style.setProperty('--color-text-primary', colors.text.primary);
+  root.style.setProperty('--color-text-secondary', colors.text.secondary);
+  root.style.setProperty('--color-text-hint', colors.text.hint);
+  root.style.setProperty('--color-text-inverse', colors.text.inverse);
+  root.style.setProperty('--color-text-link', colors.text.link);
+  root.style.setProperty('--color-bg-card', colors.background.card);
+  root.style.setProperty('--color-border', colors.gray[200]);
+  root.style.setProperty('--color-border-input', colors.gray[300]);
+
+  // Grays
+  Object.entries(colors.gray).forEach(([key, value]) => {
+    root.style.setProperty(`--color-gray-${key}`, value);
+  });
+
+  // Spacing
+  root.style.setProperty('--spacing-xxs', `${spacing.xxs}px`);
+  root.style.setProperty('--spacing-xs', `${spacing.xs}px`);
+  root.style.setProperty('--spacing-sm', `${spacing.sm}px`);
+  root.style.setProperty('--spacing-md', `${spacing.md}px`);
+  root.style.setProperty('--spacing-lg', `${spacing.lg}px`);
+  root.style.setProperty('--spacing-xl', `${spacing.xl}px`);
+  root.style.setProperty('--spacing-xxl', `${spacing.xxl}px`);
+
+  // Font sizes
+  root.style.setProperty('--font-size-xs', `${fontSize.xs}px`);
+  root.style.setProperty('--font-size-sm', `${fontSize.sm}px`);
+  root.style.setProperty('--font-size-base', `${fontSize.base}px`);
+  root.style.setProperty('--font-size-lg', `${fontSize.lg}px`);
+  root.style.setProperty('--font-size-xl', `${fontSize.xl}px`);
+  root.style.setProperty('--font-size-2xl', `${fontSize['2xl']}px`);
+  root.style.setProperty('--font-size-3xl', `${fontSize['3xl']}px`);
+
+  // Border radius
+  root.style.setProperty('--radius-sm', `${borderRadius.sm}px`);
+  root.style.setProperty('--radius-md', `${borderRadius.md}px`);
+  root.style.setProperty('--radius-lg', `${borderRadius.lg}px`);
+  root.style.setProperty('--radius-xl', `${borderRadius.xl}px`);
+
+  // Shadows
+  root.style.setProperty('--shadow-sm', shadows.sm);
+  root.style.setProperty('--shadow-md', shadows.md);
+  root.style.setProperty('--shadow-lg', shadows.lg);
+  root.style.setProperty('--shadow-glow-gold', shadows.glow.gold);
+
+  // Transitions
+  root.style.setProperty('--transition-fast', transitions.fast);
+  root.style.setProperty('--transition-normal', transitions.normal);
+  root.style.setProperty('--transition-slow', transitions.slow);
+};
+
+// =============================================================================
+// STYLE UTILITIES
+// =============================================================================
+
+/**
+ * Pre-built button styles for common use cases.
+ * Import and spread these in your style prop.
+ *
+ * Usage:
+ *   import { buttonStyles } from '../theme';
+ *   <Button style={buttonStyles.ctaLarge}>Order Now</Button>
+ */
+export const buttonStyles = {
+  // Primary CTA button (orange, large)
+  ctaLarge: {
+    backgroundColor: colors.secondary,
+    borderColor: colors.secondary,
+    height: 60,
+    fontSize: fontSize.lg,
+    minWidth: 150,
+  },
+  // Primary CTA button for mobile
+  ctaMobile: {
+    backgroundColor: colors.secondary,
+    borderColor: colors.secondary,
+    height: 48,
+    fontSize: fontSize.base,
+    width: '100%',
+  },
+  // Standard primary button
+  primary: {
+    backgroundColor: colors.primary,
+    borderColor: colors.primary,
+  },
+  // Text button on dark background
+  headerText: {
+    color: colors.white,
+  },
+};
+
+/**
+ * Common style patterns for reuse.
+ */
+export const commonStyles = {
+  // Card with gray background
+  cardGray: {
+    backgroundColor: colors.gray[100],
+  },
+  // Warning/emergency card
+  cardWarning: {
+    backgroundColor: colors.warningLight,
+    borderColor: colors.warningBorder,
+  },
+  // Centered flex container
+  flexCenter: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // Link styling
+  link: {
+    color: colors.text.link,
+  },
+};
+
+// =============================================================================
+// DEFAULT EXPORT
+// =============================================================================
+
+const theme = {
+  colors,
+  spacing,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  borderRadius,
+  borderWidth,
+  shadows,
+  breakpoints,
+  transitions,
+  zIndex,
+  components,
+  antdTheme,
+  injectCSSVariables,
+  buttonStyles,
+  commonStyles,
+};
+
+export default theme;