@principal-ade/industry-theme 0.1.2

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/esm/themeHelpers.d.ts

@@ -0,0 +1,30 @@
+import { Theme } from './index';
+/**
+ * Override colors in a theme with type checking
+ */
+export declare function overrideColors<T extends Theme>(theme: T, colors: Partial<T['colors']>): T;
+/**
+ * Create a new theme by extending a base theme
+ */
+export declare 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;
+/**
+ * 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 declare function addMode<T extends Theme>(theme: T, modeName: string, colors: Partial<T['colors']>, baseMode?: string): T;
+/**
+ * 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 declare function getMode<T extends Theme>(theme: T, mode?: string): T['colors'];
+//# sourceMappingURL=themeHelpers.d.ts.map

package/dist/esm/themeHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeHelpers.d.ts","sourceRoot":"","sources":["../../src/themeHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,KAAK,EAC5C,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAC3B,CAAC,CAQH;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,EACvC,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;IAC1B,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;CACnB,CAAC,GACD,CAAC,CAaH;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EACrC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAC5B,QAAQ,CAAC,EAAE,MAAM,GAChB,CAAC,CA6BH;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EACrC,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,MAAM,GACZ,CAAC,CAAC,QAAQ,CAAC,CASb"}

package/dist/esm/themes.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Collection of available themes for PrincipleMD
+ */
+import { Theme } from './index';
+export { glassmorphismTheme } from './glassmorphismTheme';
+export { defaultMarkdownTheme, defaultEditorTheme, defaultTerminalTheme, } from './defaultThemes';
+export declare const regalTheme: Theme;
+export declare const terminalTheme: Theme;
+export declare const matrixTheme: Theme;
+export declare const matrixMinimalTheme: Theme;
+export declare const slateTheme: Theme;
+//# sourceMappingURL=themes.d.ts.map

package/dist/esm/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/themes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAGzB,eAAO,MAAM,UAAU,EAAE,KAsIxB,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KA6K3B,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KA0IzB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KA0IhC,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAyIxB,CAAC"}

package/dist/esm/utils.d.ts

@@ -0,0 +1,32 @@
+import { Theme } from './index';
+type StyleValue = string | number | StyleValue[] | {
+    [key: string]: StyleValue;
+};
+type StyleObject = Record<string, StyleValue>;
+/**
+ * Utility functions for working with the Theme UI spec-compliant theme
+ */
+export declare const getColor: (theme: Theme, colorKey: string) => string;
+export declare const getSpace: (theme: Theme, index: number) => number;
+export declare const getFontSize: (theme: Theme, index: number) => number;
+export declare const getRadius: (theme: Theme, index: number) => number;
+export declare const getShadow: (theme: Theme, index: number) => string;
+export declare const getZIndex: (theme: Theme, index: number) => number;
+export declare const responsive: (values: (string | number)[]) => object;
+export declare const sx: (styles: StyleObject) => StyleObject;
+export declare const createStyle: (theme: Theme, styleObj: StyleObject) => StyleObject;
+export declare const mergeThemes: (baseTheme: Theme, ...overrides: Partial<Theme>[]) => Theme;
+declare const _default: {
+    getColor: (theme: Theme, colorKey: string) => string;
+    getSpace: (theme: Theme, index: number) => number;
+    getFontSize: (theme: Theme, index: number) => number;
+    getRadius: (theme: Theme, index: number) => number;
+    getShadow: (theme: Theme, index: number) => string;
+    getZIndex: (theme: Theme, index: number) => number;
+    responsive: (values: (string | number)[]) => object;
+    sx: (styles: StyleObject) => StyleObject;
+    createStyle: (theme: Theme, styleObj: StyleObject) => StyleObject;
+    mergeThemes: (baseTheme: Theme, ...overrides: Partial<Theme>[]) => Theme;
+};
+export default _default;
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,EAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAA;CAAE,CAAC;AACjF,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAE9C;;GAEG;AAGH,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,EAAE,UAAU,MAAM,KAAG,MAKzD,CAAC;AAGF,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MAEtD,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MAEzD,CAAC;AAGF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MAEvD,CAAC;AAGF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MAEvD,CAAC;AAGF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MAEvD,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAG,MAUxD,CAAC;AAGF,eAAO,MAAM,EAAE,GAAI,QAAQ,WAAW,gBAAW,CAAC;AAGlD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,EAAE,UAAU,WAAW,KAAG,WAmCjE,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,WAAW,KAAK,EAAE,GAAG,WAAW,OAAO,CAAC,KAAK,CAAC,EAAE,KAAG,KAuB9E,CAAC;;sBA9G8B,KAAK,YAAY,MAAM,KAAG,MAAM;sBAQhC,KAAK,SAAS,MAAM,KAAG,MAAM;yBAK1B,KAAK,SAAS,MAAM,KAAG,MAAM;uBAK/B,KAAK,SAAS,MAAM,KAAG,MAAM;uBAK7B,KAAK,SAAS,MAAM,KAAG,MAAM;uBAK7B,KAAK,SAAS,MAAM,KAAG,MAAM;yBAK3B,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAG,MAAM;iBAapC,WAAW;yBAGH,KAAK,YAAY,WAAW,KAAG,WAAW;6BAsCtC,KAAK,gBAAgB,OAAO,CAAC,KAAK,CAAC,EAAE,KAAG,KAAK;;AAyBpF,wBAWE"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@principal-ade/industry-theme",
+  "version": "0.1.2",
+  "type": "module",
+  "description": "Theme components and styles for industry-themed markdown",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:copy-package-files",
+    "build:clean": "rm -rf dist",
+    "build:esm": "bun build ./src/index.ts --outfile ./dist/esm/index.js --format esm --external react",
+    "build:cjs": "bun build ./src/index.ts --outfile ./dist/cjs/index.js --format cjs --external react",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir ./dist/esm",
+    "build:copy-package-files": "echo '{\"type\":\"module\"}' > dist/esm/package.json && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json && cp -r dist/esm/*.d.ts dist/esm/*.d.ts.map dist/esm/types dist/esm/utils dist/cjs/ 2>/dev/null || true",
+    "dev": "npm run build --watch",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "markdown",
+    "theme",
+    "industry"
+  ],
+  "author": "Principal ADE Team",
+  "license": "MIT",
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.1.12",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "prettier": "^3.6.2",
+    "react": ">=19.0.0",
+    "typescript": "^5.0.4",
+    "typescript-eslint": "^8.38.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/principal-ade/industry-theme.git"
+  }
+}

package/src/README.md

@@ -0,0 +1,134 @@
+# Theme UI Spec-Compliant Theme System
+
+This directory contains a new Theme UI specification-compliant theme system for the PrincipleMD electron-react project.
+
+## Files
+
+- **`index.ts`** - Main theme configuration following Theme UI spec
+- **`ThemeProvider.tsx`** - React context provider and useTheme hook
+- **`utils.ts`** - Utility functions for working with theme values
+- **`README.md`** - This documentation
+
+## Usage
+
+### 1. Wrap your app with the ThemeProvider
+
+```tsx
+import { ThemeProvider } from './theme/ThemeProvider';
+import { theme } from './theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme} initialColorMode="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. Use the theme in components
+
+```tsx
+import { useTheme } from './theme/ThemeProvider';
+import { getSpace, getFontSize } from './theme/utils';
+
+function MyComponent() {
+  const { theme, colorMode, toggleColorMode } = useTheme();
+
+  return (
+    <div
+      style={{
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        padding: getSpace(theme, 4), // theme.space[4]
+        fontSize: getFontSize(theme, 2), // theme.fontSizes[2]
+      }}
+    >
+      Current mode: {colorMode}
+      <button onClick={toggleColorMode}>Toggle Mode</button>
+    </div>
+  );
+}
+```
+
+### 3. Available theme properties
+
+#### Colors
+
+- `theme.colors.text` - Primary text color
+- `theme.colors.background` - Primary background color
+- `theme.colors.primary` - Primary brand color
+- `theme.colors.secondary` - Secondary brand color
+- `theme.colors.success` - Success state color
+- `theme.colors.warning` - Warning state color
+- `theme.colors.error` - Error state color
+- `theme.colors.border` - Border color
+- `theme.colors.backgroundSecondary` - Secondary background
+- `theme.colors.textSecondary` - Secondary text color
+
+#### Typography
+
+- `theme.fonts.body` - Body font family
+- `theme.fonts.heading` - Heading font family
+- `theme.fonts.monospace` - Monospace font family
+- `theme.fontSizes[0-9]` - Font size scale (12px to 96px)
+- `theme.fontWeights.body` - Body font weight
+- `theme.fontWeights.heading` - Heading font weight
+
+#### Spacing & Layout
+
+- `theme.space[0-8]` - Spacing scale (0px to 512px)
+- `theme.radii[0-7]` - Border radius scale (0px to 24px)
+- `theme.shadows[0-5]` - Box shadow scale
+- `theme.breakpoints` - Responsive breakpoints
+
+### 4. Utility functions
+
+```tsx
+import { getColor, getSpace, getFontSize, getRadius } from './theme/utils';
+
+// Get theme values safely
+const backgroundColor = getColor(theme, 'background');
+const padding = getSpace(theme, 3); // theme.space[3]
+const fontSize = getFontSize(theme, 2); // theme.fontSizes[2]
+const borderRadius = getRadius(theme, 1); // theme.radii[1]
+```
+
+## Color Modes
+
+The theme system supports automatic light/dark mode switching:
+
+- Automatically detects system preference on first load
+- Saves user preference to localStorage
+- Provides `toggleColorMode()` function
+- Dark mode colors are defined in `theme.colors.modes.dark`
+
+## Migration from old theme
+
+The new theme maintains backward compatibility with existing color property names:
+
+```tsx
+// Old usage (still works)
+theme.colors.background;
+theme.colors.primary;
+theme.colors.textSecondary;
+
+// New Theme UI spec additions
+theme.fontSizes[2]; // instead of hardcoded values
+theme.space[4]; // instead of hardcoded spacing
+theme.radii[2]; // instead of hardcoded border radius
+```
+
+## Theme UI Specification Compliance
+
+This theme follows the [Theme UI theme specification](https://theme-ui.com/theme-spec) which provides:
+
+- Consistent scales for spacing, typography, and colors
+- Responsive design support
+- Component variant support
+- Color mode handling
+- Standard naming conventions
+
+## Example Component
+
+See `ThemeExample.tsx` for a comprehensive example showing all theme features.

package/src/ThemeProvider.tsx

@@ -0,0 +1,117 @@
+import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
+
+import { getMode } from './themeHelpers';
+
+import { Theme, theme as defaultTheme } from './index';
+
+// Theme context
+interface ThemeContextValue {
+  theme: Theme;
+  mode?: string;
+  setMode: (mode: string) => void;
+}
+
+// Create a singleton context instance that persists across module boundaries
+let ThemeContext: React.Context<ThemeContextValue | undefined>;
+
+// Use a global variable to ensure single instance across all imports
+const getThemeContext = () => {
+  if (typeof window !== 'undefined') {
+    // Store on window to ensure true singleton in browser
+    const globalWindow = window as Window & {
+      __principlemd_theme_context__?: React.Context<ThemeContextValue | undefined>;
+    };
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext<ThemeContextValue | undefined>(
+        undefined,
+      );
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    // Server-side rendering or Node environment
+    if (!ThemeContext) {
+      ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+    }
+    return ThemeContext;
+  }
+};
+
+// Get the singleton context
+const ThemeContextSingleton = getThemeContext();
+
+// Hook to use theme
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContextSingleton);
+
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context as ThemeContextValue;
+};
+
+// Theme provider component
+interface ThemeProviderProps {
+  children: ReactNode;
+  theme?: Theme;
+  initialMode?: string;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme: customTheme = defaultTheme,
+  initialMode,
+}) => {
+  const [mode, setMode] = useState<string | undefined>(initialMode);
+  
+  // Get the theme with the current mode applied
+  const activeTheme = React.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    
+    // Apply the mode colors to the theme
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode),
+    };
+  }, [customTheme, mode]);
+  
+  // Load saved mode from localStorage on mount
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem('principlemd-theme-mode');
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  
+  // Save mode to localStorage when it changes
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem('principlemd-theme-mode', mode);
+    } else {
+      localStorage.removeItem('principlemd-theme-mode');
+    }
+  }, [mode]);
+  
+  const value: ThemeContextValue = {
+    theme: activeTheme,
+    mode,
+    setMode,
+  };
+
+  return <ThemeContextSingleton.Provider value={value}>{children}</ThemeContextSingleton.Provider>;
+};
+
+// Higher-order component for theme access
+export const withTheme = <P extends object>(
+  Component: React.ComponentType<P & { theme: Theme }>,
+) => {
+  return (props: P) => {
+    const { theme } = useTheme();
+    return <Component {...props} theme={theme} />;
+  };
+};
+
+export default ThemeProvider;