@chainloyalty/react 1.0.2 → 1.2.0

package/src/index.ts

@@ -14,5 +14,9 @@ export type { RewardsDashboardProps, Badge, RewardHistoryItem, TierInfo, Dashboa
 export { Leaderboard } from './Leaderboard.js';
 export type { LeaderboardProps, LeaderboardEntry, LeaderboardTimeframe } from './Leaderboard.js';
 
+// Export theme utilities
+export { getThemeColors, getThemeStylesheet, createThemeStyles } from './theme.js';
+export type { ThemeColors } from './theme.js';
+
 // Version info
 export const PACKAGE_VERSION = '1.0.0';

package/src/theme.ts

@@ -0,0 +1,92 @@
+/**
+ * Theme utility for @chainloyalty/react
+ * Automatically inherits colors from host application's CSS variables
+ * Supports Tailwind CSS theme variables and custom CSS variables
+ */
+
+export interface ThemeColors {
+  primary: string;
+  accent: string;
+  background: string;
+  foreground: string;
+  card: string;
+  border: string;
+  muted: string;
+  mutedForeground: string;
+}
+
+/**
+ * Get the current theme colors from host app's CSS variables
+ * Falls back to defaults if variables not found
+ */
+export const getThemeColors = (): ThemeColors => {
+  const root = document.documentElement;
+  
+  // Helper to get CSS variable value
+  const getCSSVar = (varName: string, fallback: string): string => {
+    const value = getComputedStyle(root).getPropertyValue(varName).trim();
+    return value || fallback;
+  };
+
+  // Try to get Tailwind CSS variables first
+  const primary = getCSSVar('--primary', '36 100% 50%'); // Golden
+  const accent = getCSSVar('--accent', '190 100% 39%'); // Cyan
+  const background = getCSSVar('--background', '220 14% 96%'); // Light bg
+  const foreground = getCSSVar('--foreground', '220 20% 10%'); // Dark text
+  const card = getCSSVar('--card', '0 0% 100%'); // White
+  const border = getCSSVar('--border', '220 13% 91%'); // Light gray
+  const muted = getCSSVar('--muted', '220 14% 96%'); // Same as background
+  const mutedForeground = getCSSVar('--muted-foreground', '220 9% 46%'); // Gray text
+
+  return {
+    primary: `hsl(${primary})`,
+    accent: `hsl(${accent})`,
+    background: `hsl(${background})`,
+    foreground: `hsl(${foreground})`,
+    card: `hsl(${card})`,
+    border: `hsl(${border})`,
+    muted: `hsl(${muted})`,
+    mutedForeground: `hsl(${mutedForeground})`,
+  };
+};
+
+/**
+ * Create inline styles using theme colors
+ * Can be merged with component styles
+ */
+export const createThemeStyles = (theme: ThemeColors) => ({
+  container: {
+    backgroundColor: theme.card,
+    color: theme.foreground,
+    borderColor: theme.border,
+  } as React.CSSProperties,
+  text: {
+    color: theme.foreground,
+  } as React.CSSProperties,
+  accent: {
+    color: theme.accent,
+  } as React.CSSProperties,
+  button: {
+    backgroundColor: theme.primary,
+    color: '#fff',
+  } as React.CSSProperties,
+});
+
+/**
+ * Inject theme CSS variables into component wrapper
+ * This allows nested components to use CSS variables via context
+ */
+export const getThemeStylesheet = (theme: ThemeColors): string => {
+  return `
+    .chainloyalty-theme {
+      --cl-primary: ${theme.primary};
+      --cl-accent: ${theme.accent};
+      --cl-background: ${theme.background};
+      --cl-foreground: ${theme.foreground};
+      --cl-card: ${theme.card};
+      --cl-border: ${theme.border};
+      --cl-muted: ${theme.muted};
+      --cl-muted-fg: ${theme.mutedForeground};
+    }
+  `;
+};