@gadagi/design-system 1.0.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@gadagi/design-system",
+  "version": "1.0.0",
+  "description": "Design system for gadagi micro-frontends",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": ["src"],
+  "scripts": {
+    "build": "tsc && echo 'export * from \"./src/index\";' > dist/adi-design-system/index.js",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@gadagi/types": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "css-loader": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.0.0",
+    "typescript": "^5.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0"
+  }
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { colors, spacing, typography } from '../../tokens';
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+}
+
+const badgeColors: Record<BadgeVariant, { bg: string; text: string }> = {
+  default: { bg: colors.neutral[100],  text: colors.neutral[600] },
+  success: { bg: colors.success[100],  text: '#15803d' },
+  warning: { bg: colors.warning[100],  text: '#92400e' },
+  danger:  { bg: colors.danger[100],   text: '#b91c1c' },
+  info:    { bg: colors.primary[100],  text: colors.primary[700] },
+};
+
+export const Badge: React.FC<BadgeProps> = ({ children, variant = 'default' }) => {
+  const { bg, text } = badgeColors[variant];
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: `${spacing[0]} ${spacing[2]}`,
+        borderRadius: '9999px',
+        fontSize: typography.fontSize.xs,
+        fontWeight: typography.fontWeight.medium,
+        background: bg,
+        color: text,
+      }}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge';

package/src/components/Button/Button.tsx

@@ -0,0 +1,59 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { colors, spacing, typography } from '../../tokens';
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+type ButtonSize    = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+}
+
+const sizeStyles: Record<ButtonSize, React.CSSProperties> = {
+  sm: { padding: `${spacing[1]} ${spacing[3]}`, fontSize: typography.fontSize.sm },
+  md: { padding: `${spacing[2]} ${spacing[4]}`, fontSize: typography.fontSize.base },
+  lg: { padding: `${spacing[3]} ${spacing[6]}`, fontSize: typography.fontSize.lg },
+};
+
+const variantStyles: Record<ButtonVariant, React.CSSProperties> = {
+  primary:   { background: colors.primary[600], color: '#fff', border: 'none' },
+  secondary: { background: 'transparent', color: colors.primary[600], border: `1px solid ${colors.primary[600]}` },
+  danger:    { background: colors.danger[500], color: '#fff', border: 'none' },
+  ghost:     { background: 'transparent', color: colors.neutral[600], border: 'none' },
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  fullWidth = false,
+  children,
+  disabled,
+  style,
+  ...rest
+}) => {
+  const baseStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing[2],
+    borderRadius: '6px',
+    fontWeight: typography.fontWeight.medium,
+    fontFamily: typography.fontFamily.sans,
+    cursor: disabled || loading ? 'not-allowed' : 'pointer',
+    opacity: disabled || loading ? 0.6 : 1,
+    width: fullWidth ? '100%' : undefined,
+    transition: 'opacity 0.15s, transform 0.1s',
+    ...sizeStyles[size],
+    ...variantStyles[variant],
+    ...style,
+  };
+
+  return (
+    <button style={baseStyle} disabled={disabled || loading} {...rest}>
+      {loading ? 'Loading...' : children}
+    </button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { } from './Button';

package/src/components/Input/Input.tsx

@@ -0,0 +1,55 @@
+import React, { InputHTMLAttributes } from 'react';
+import { colors, spacing, typography } from '../../tokens';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  hint,
+  fullWidth = false,
+  id,
+  style,
+  ...rest
+}) => {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, '-');
+
+  const inputStyle: React.CSSProperties = {
+    display: 'block',
+    width: fullWidth ? '100%' : undefined,
+    padding: `${spacing[2]} ${spacing[3]}`,
+    fontSize: typography.fontSize.base,
+    fontFamily: typography.fontFamily.sans,
+    borderRadius: '6px',
+    border: `1px solid ${error ? colors.danger[500] : colors.neutral[200]}`,
+    outline: 'none',
+    background: '#fff',
+    color: colors.neutral[900],
+    ...style,
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: spacing[1] }}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          style={{ fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.neutral[600] }}
+        >
+          {label}
+        </label>
+      )}
+      <input id={inputId} style={inputStyle} {...rest} />
+      {error && (
+        <span style={{ fontSize: typography.fontSize.xs, color: colors.danger[500] }}>{error}</span>
+      )}
+      {hint && !error && (
+        <span style={{ fontSize: typography.fontSize.xs, color: colors.neutral[400] }}>{hint}</span>
+      )}
+    </div>
+  );
+};

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/src/index.ts

@@ -0,0 +1,6 @@
+export { Button }        from './components/Button';
+export { Input }         from './components/Input';
+export { Badge }         from './components/Badge';
+export { ThemeProvider } from './theme/ThemeProvider';
+export { useTheme }      from './theme/useTheme';
+export * from './tokens';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { ThemeContextValue, Theme } from './interfaces/theme.interface'
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'system',
+  setTheme: () => {},
+});
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = 'system',
+}) => {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <div data-theme={theme}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextValue => useContext(ThemeContext);

package/src/theme/interfaces/theme.interface.ts

@@ -0,0 +1,9 @@
+
+import { UserPreferences } from '@gadagi/types';
+
+export type Theme = UserPreferences['theme'];
+
+export interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}

package/src/theme/useTheme.ts

@@ -0,0 +1 @@
+export { useTheme } from './ThemeProvider';

package/src/tokens/colors.ts

@@ -0,0 +1,77 @@
+export const colors = {
+  primary: {
+    50:  '#f0f0ff',
+    100: '#e6e6ff',
+    500: '#4a3fb5',  // WCAG compliant version of #5447c7
+    600: '#4235a3',
+    700: '#3a2c91',
+    900: '#2a1f5f',
+  },
+  neutral: {
+    50:  '#f8fafc',
+    100: '#ebedef',  // Your lightColor
+    200: '#e2e8f0',
+    400: '#94a3b8',
+    600: '#4b5463',  // Your darkColor
+    800: '#1e293b',
+    900: '#0f172a',
+  },
+  success: { 
+    500: '#2fb855',  // WCAG compliant version of #36cd69
+    100: '#dcfce7',
+  },
+  warning: { 
+    500: '#e6a110',  // WCAG compliant version of #f9b115
+    100: '#fef3c7',
+  },
+  danger:  { 
+    500: '#dc4c4c',  // WCAG compliant version of #e55353
+    100: '#fee2e2',
+  },
+  info: {
+    500: '#2d7fd8',  // WCAG compliant version of #3090f1
+    100: '#dbeafe',
+  },
+  light: '#ebedef',  // Your lightColor
+  dark: '#4b5463',   // Your darkColor
+} as const;
+
+// Dark Theme Tokens - High contrast versions for dark backgrounds
+export const darkColors = {
+  primary: {
+    50:  '#1a1a2e',
+    100: '#252542',
+    500: '#7c71e6',  // Lighter purple for dark backgrounds
+    600: '#8b82eb',
+    700: '#9a93f0',
+    900: '#b8b3f5',
+  },
+  neutral: {
+    50:  '#0f172a',
+    100: '#1e293b',
+    200: '#334155',
+    400: '#64748b',
+    600: '#cbd5e1',  // Light gray for dark text
+    800: '#f1f5f9',
+    900: '#f8fafc',
+  },
+  success: { 
+    500: '#4ade80',  // Bright green for dark backgrounds
+    100: '#14532d',
+  },
+  warning: { 
+    500: '#fbbf24',  // Bright amber for dark backgrounds
+    100: '#713f12',
+  },
+  danger:  { 
+    500: '#f87171',  // Bright red for dark backgrounds
+    100: '#7f1d1d',
+  },
+  info: {
+    500: '#60a5fa',  // Bright blue for dark backgrounds
+    100: '#1e3a8a',
+  },
+  light: '#f8fafc',  // Light text color for dark theme
+  dark: '#0f172a',   // Dark background color
+} as const;
+

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export { colors } from './colors';
+export { spacing } from './spacing';
+export { typography } from './typography';

package/src/tokens/spacing.ts

@@ -0,0 +1,13 @@
+export const spacing = {
+  0:   '0',
+  1:   '0.25rem',
+  2:   '0.5rem',
+  3:   '0.75rem',
+  4:   '1rem',
+  5:   '1.25rem',
+  6:   '1.5rem',
+  8:   '2rem',
+  10:  '2.5rem',
+  12:  '3rem',
+  16:  '4rem',
+} as const;

package/src/tokens/typography.ts

@@ -0,0 +1,21 @@
+export const typography = {
+  fontFamily: {
+    sans:  '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
+    mono:  '"JetBrains Mono", "Fira Code", monospace',
+  },
+  fontSize: {
+    xs:   '0.75rem',
+    sm:   '0.875rem',
+    base: '1rem',
+    lg:   '1.125rem',
+    xl:   '1.25rem',
+    '2xl':'1.5rem',
+    '3xl':'1.875rem',
+  },
+  fontWeight: {
+    normal:  400,
+    medium:  500,
+    semibold:600,
+    bold:    700,
+  },
+} as const;