@principal-ade/industry-theme 0.1.2

package/src/index.ts

@@ -0,0 +1,230 @@
+/**
+ * Theme UI spec-compliant theme system for PrincipleMD
+ * Based on https://theme-ui.com/theme-spec
+ */
+
+import { terminalTheme } from './themes';
+
+// Component style variant types
+type ButtonVariant = {
+  color?: string;
+  backgroundColor?: string;
+  bg?: string; // Theme UI shorthand for backgroundColor
+  borderColor?: string;
+  borderWidth?: number;
+  borderStyle?: string;
+  padding?: string | number;
+  fontSize?: number | string;
+  fontWeight?: number;
+  cursor?: string;
+  '&:hover'?: Partial<ButtonVariant>;
+  '&:active'?: Partial<ButtonVariant>;
+  '&:disabled'?: Partial<ButtonVariant>;
+};
+
+type TextVariant = {
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  lineHeight?: number | string;
+  color?: string;
+  fontFamily?: string;
+};
+
+type CardVariant = {
+  padding?: string | number;
+  backgroundColor?: string;
+  bg?: string; // Theme UI shorthand for backgroundColor
+  borderRadius?: number;
+  boxShadow?: string;
+  border?: string;
+  borderColor?: string;
+};
+
+export interface Theme {
+  // Color modes (optional)
+  modes?: {
+    [modeName: string]: Partial<Theme['colors']>;
+  };
+  
+  // Scale values for consistent spacing
+  space: number[];
+
+  // Typography
+  fonts: {
+    body: string;
+    heading: string;
+    monospace: string;
+  };
+
+  fontSizes: number[];
+
+  // Font scaling factor (1.0 = normal, 1.2 = 20% larger, 0.8 = 20% smaller)
+  fontScale?: number;
+
+  fontWeights: {
+    body: number;
+    heading: number;
+    bold: number;
+    light: number;
+    medium: number;
+    semibold: number;
+  };
+
+  lineHeights: {
+    body: number;
+    heading: number;
+    tight: number;
+    relaxed: number;
+  };
+
+  // Layout
+  breakpoints: string[];
+  sizes: number[];
+  radii: number[];
+  shadows: string[];
+  zIndices: number[];
+
+  // Colors - Theme UI spec structure
+  colors: {
+    // Base colors
+    text: string;
+    background: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    highlight: string;
+    muted: string;
+
+    // Status colors
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+
+    // Additional semantic colors for our use case
+    border: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    backgroundLight: string;
+    backgroundHover: string;
+    surface: string;
+    textSecondary: string;
+    textTertiary: string;
+    textMuted: string;
+
+    // Search highlight colors
+    highlightBg?: string;
+    highlightBorder?: string;
+  };
+
+  // Component variants (optional but useful)
+  buttons: {
+    primary: ButtonVariant;
+    secondary: ButtonVariant;
+    ghost: ButtonVariant;
+  };
+
+  text: {
+    heading: TextVariant;
+    body: TextVariant;
+    caption: TextVariant;
+  };
+
+  cards: {
+    primary: CardVariant;
+    secondary: CardVariant;
+  };
+}
+
+
+// Default theme - Terminal theme for developers
+export const theme: Theme = terminalTheme;
+
+// Export all themes for direct access
+export {
+  terminalTheme,
+  regalTheme,
+  glassmorphismTheme,
+  matrixTheme,
+  matrixMinimalTheme,
+  slateTheme,
+  defaultMarkdownTheme,
+  defaultEditorTheme,
+  defaultTerminalTheme,
+} from './themes';
+
+/**
+ * Scale font sizes in a theme by a given factor
+ */
+export function scaleThemeFonts(theme: Theme, scale: number): Theme {
+  const currentScale = theme.fontScale || 1.0;
+
+  // Calculate effective scale (remove current scale and apply new scale)
+  const effectiveScale = scale / currentScale;
+
+  return {
+    ...theme,
+    fontSizes: theme.fontSizes.map(size => Math.round(size * effectiveScale)),
+    fontScale: scale,
+  };
+}
+
+/**
+ * Increase font scale by 10%
+ */
+export function increaseFontScale(theme: Theme): Theme {
+  const currentScale = theme.fontScale || 1.0;
+  const newScale = Math.min(currentScale * 1.1, 2.0); // Cap at 200%
+  return scaleThemeFonts(theme, newScale);
+}
+
+/**
+ * Decrease font scale by 10%
+ */
+export function decreaseFontScale(theme: Theme): Theme {
+  const currentScale = theme.fontScale || 1.0;
+  const newScale = Math.max(currentScale * 0.9, 0.5); // Floor at 50%
+  return scaleThemeFonts(theme, newScale);
+}
+
+/**
+ * Reset font scale to 100%
+ */
+export function resetFontScale(theme: Theme): Theme {
+  return scaleThemeFonts(theme, 1.0);
+}
+
+// Export ThemeProvider and related utilities
+export {
+  ThemeProvider,
+  useTheme,
+  withTheme,
+} from './ThemeProvider';
+
+// Export theme utilities
+export {
+  getColor,
+  getSpace,
+  getFontSize,
+  getRadius,
+  getShadow,
+  getZIndex,
+  responsive,
+  sx,
+  createStyle,
+  mergeThemes,
+} from './utils';
+
+// Export theme helper functions
+export {
+  overrideColors,
+  makeTheme,
+  addMode,
+  getMode
+} from './themeHelpers';
+
+// Export ThemeShowcase component
+export { ThemeShowcase } from './ThemeShowcase';
+export type { ThemeShowcaseProps } from './ThemeShowcase';
+
+export default theme;

package/src/themeHelpers.ts

@@ -0,0 +1,106 @@
+import { Theme } from './index';
+
+/**
+ * Override colors in a theme with type checking
+ */
+export function overrideColors<T extends Theme>(
+  theme: T,
+  colors: Partial<T['colors']>
+): T {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      ...colors,
+    },
+  };
+}
+
+/**
+ * Create a new theme by extending a base theme
+ */
+export function makeTheme<T extends Theme>(
+  baseTheme: T,
+  overrides: Partial<{
+    colors: Partial<T['colors']>;
+    fonts: Partial<T['fonts']>;
+    fontSizes: T['fontSizes'];
+    space: T['space'];
+    radii: T['radii'];
+  }>
+): T {
+  return {
+    ...baseTheme,
+    ...overrides,
+    colors: {
+      ...baseTheme.colors,
+      ...overrides.colors,
+    },
+    fonts: {
+      ...baseTheme.fonts,
+      ...overrides.fonts,
+    },
+  } as T;
+}
+
+/**
+ * Add a new mode to a theme
+ * @param theme - The theme to add the mode to
+ * @param modeName - The name of the new mode (e.g., 'dark', 'light', 'high-contrast')
+ * @param colors - Partial colors to override for this mode
+ * @param baseMode - Optional existing mode to extend from (defaults to base colors)
+ */
+export function addMode<T extends Theme>(
+  theme: T,
+  modeName: string,
+  colors: Partial<T['colors']>,
+  baseMode?: string
+): T {
+  // Get the base colors to merge with
+  let baseColors: T['colors'];
+  
+  if (baseMode && theme.modes && theme.modes[baseMode]) {
+    // Merge with an existing mode
+    baseColors = {
+      ...theme.colors,
+      ...theme.modes[baseMode],
+    } as T['colors'];
+  } else {
+    // Use the default theme colors
+    baseColors = theme.colors;
+  }
+  
+  // Create the new mode by merging base with new colors
+  const newMode = {
+    ...baseColors,
+    ...colors,
+  };
+  
+  // Return theme with the new mode added
+  return {
+    ...theme,
+    modes: {
+      ...theme.modes,
+      [modeName]: newMode,
+    },
+  };
+}
+
+/**
+ * Get colors for a specific mode
+ * @param theme - The theme to get colors from
+ * @param mode - The mode name (returns base colors if mode doesn't exist)
+ */
+export function getMode<T extends Theme>(
+  theme: T,
+  mode?: string
+): T['colors'] {
+  if (!mode || !theme.modes || !theme.modes[mode]) {
+    return theme.colors;
+  }
+  
+  return {
+    ...theme.colors,
+    ...theme.modes[mode],
+  } as T['colors'];
+}