@open-kingdom/shared-frontend-ui-theme 0.0.2-0

package/README.md

@@ -0,0 +1,191 @@
+# Shared UI Theme Library
+
+This library provides a comprehensive theming system for the Nx workspace, including Tailwind CSS configuration, theme management, and dark/light mode support.
+
+## Features
+
+- **Centralized Theme Configuration**: Single source of truth for design tokens
+- **CSS Custom Properties**: Runtime theme changes via CSS variables
+- **Dark/Light Mode Support**: Automatic theme switching with persistence
+- **TypeScript Support**: Full type safety for theme objects
+- **Tailwind Integration**: Seamless integration with Tailwind CSS
+- **React Context**: Easy theme management with React hooks
+
+## Usage
+
+### Basic Setup
+
+1. **Import the ThemeProvider** in your app's root component:
+
+```tsx
+import { ThemeProvider } from '@open-kingdom/shared-frontend-ui-theme';
+
+export function App() {
+  return <ThemeProvider>{/* Your app content */}</ThemeProvider>;
+}
+```
+
+2. **Use the theme hook** in your components:
+
+```tsx
+import { useTheme } from '@open-kingdom/shared-frontend-ui-theme';
+
+export function MyComponent() {
+  const { theme, mode, setMode } = useTheme();
+
+  return (
+    <div className="bg-primary-500 text-white">
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
+    </div>
+  );
+}
+```
+
+### Tailwind Configuration
+
+The library provides a base Tailwind configuration that can be extended by applications and other libraries:
+
+```javascript
+// tailwind.config.js
+const baseConfig = require('@open-kingdom/shared-frontend-ui-theme/src/tailwind.config.js');
+
+module.exports = {
+  presets: [baseConfig],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      // Your custom theme overrides
+    },
+  },
+};
+```
+
+### Available Design Tokens
+
+#### Colors
+
+- `primary-50` to `primary-950`: Primary color palette
+- `secondary-50` to `secondary-950`: Secondary color palette
+- `neutral-50` to `neutral-950`: Neutral color palette
+- `success-50` to `success-950`: Success color palette
+- `warning-50` to `warning-950`: Warning color palette
+- `error-50` to `error-950`: Error color palette
+
+#### Typography
+
+- Font families: `font-sans`, `font-serif`, `font-mono`
+- Font sizes: `text-xs` to `text-6xl`
+- Line heights: Automatically applied with font sizes
+
+#### Spacing
+
+- Custom spacing scale: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
+
+#### Border Radius
+
+- Custom radius scale: `none`, `sm`, `md`, `lg`, `xl`, `full`
+
+#### Box Shadows
+
+- Custom shadow scale: `sm`, `md`, `lg`, `xl`, `2xl`
+
+### Theme Customization
+
+You can customize themes by passing them to the ThemeProvider:
+
+```tsx
+import { ThemeProvider, defaultLightTheme } from '@open-kingdom/shared-frontend-ui-theme';
+
+const customTheme = {
+  ...defaultLightTheme,
+  colors: {
+    ...defaultLightTheme.colors,
+    primary: {
+      // Your custom primary colors
+    },
+  },
+};
+
+<ThemeProvider initialTheme={customTheme}>{/* Your app */}</ThemeProvider>;
+```
+
+### CSS Variables
+
+The theme system automatically generates CSS custom properties that can be used in your CSS:
+
+```css
+.my-component {
+  background-color: var(--color-primary-500);
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-sans);
+  font-size: var(--text-lg);
+}
+```
+
+### Utilities
+
+The library provides utility functions for theme management:
+
+```tsx
+import { generateCSSVariables, applyThemeToDOM, mergeThemes, saveThemeMode, loadThemeMode } from '@open-kingdom/shared-frontend-ui-theme';
+
+// Generate CSS variables from a theme
+const variables = generateCSSVariables(theme);
+
+// Apply theme to DOM
+applyThemeToDOM(theme);
+
+// Merge themes
+const mergedTheme = mergeThemes(baseTheme, overrideTheme);
+
+// Save/load theme mode
+saveThemeMode('dark');
+const mode = loadThemeMode();
+```
+
+## Architecture
+
+### File Structure
+
+```
+src/
+├── index.ts                 # Main exports
+├── tailwind.config.js       # Base Tailwind configuration
+└── lib/
+    ├── theme.types.ts       # TypeScript interfaces
+    ├── default-theme.ts     # Default theme values
+    ├── theme-provider.tsx   # React context and provider
+    └── theme-utils.ts       # Utility functions
+```
+
+### Theme Flow
+
+1. **ThemeProvider** initializes with default theme
+2. **CSS Variables** are generated and applied to document root
+3. **Components** use Tailwind classes that reference CSS variables
+4. **Theme Changes** update CSS variables for immediate visual feedback
+5. **Persistence** saves theme mode to localStorage
+
+### Integration with Nx
+
+- **Host Applications**: Extend the base Tailwind config
+- **UI Libraries**: Use the base config as a preset
+- **Peer Dependencies**: Tailwind CSS is a peer dependency
+- **Type Safety**: Full TypeScript support across the workspace
+
+## Best Practices
+
+1. **Use Semantic Colors**: Always use semantic color tokens (e.g., `primary-500`) instead of hardcoded values
+2. **Dark Mode Support**: Include dark mode variants for all components
+3. **CSS Variables**: Leverage CSS variables for runtime customization
+4. **Type Safety**: Use the provided TypeScript interfaces for theme objects
+5. **Consistent Spacing**: Use the defined spacing scale for consistent layouts
+
+## Examples
+
+See the demo-scaffold application for a complete example of the theme system in action, including:
+
+- Theme provider setup
+- Dark/light mode switching
+- Component theming with Tailwind classes
+- Color palette demonstrations

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/theme.types';
+export * from './lib/default-theme';
+export * from './lib/theme-provider';
+export * from './lib/theme-utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAGlC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,267 @@
+import { jsx as g } from "react/jsx-runtime";
+import { createContext as m, useContext as y, useState as p, useEffect as c } from "react";
+const f = {
+  colors: {
+    primary: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554"
+    },
+    secondary: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617"
+    },
+    neutral: {
+      50: "#fafafa",
+      100: "#f5f5f5",
+      200: "#e5e5e5",
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717",
+      950: "#0a0a0a"
+    },
+    success: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16"
+    },
+    warning: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#f59e0b",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      950: "#451a03"
+    },
+    error: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
+    }
+  },
+  typography: {
+    fontFamily: {
+      sans: ["Inter", "system-ui", "sans-serif"],
+      serif: ["Georgia", "serif"],
+      mono: ["JetBrains Mono", "ui-monospace", "monospace"]
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem"
+    }
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    full: "9999px"
+  },
+  boxShadow: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+  }
+}, u = {
+  ...f,
+  colors: {
+    ...f.colors,
+    neutral: {
+      50: "#0a0a0a",
+      100: "#171717",
+      200: "#262626",
+      300: "#404040",
+      400: "#525252",
+      500: "#737373",
+      600: "#a3a3a3",
+      700: "#d4d4d4",
+      800: "#e5e5e5",
+      900: "#f5f5f5",
+      950: "#fafafa"
+    }
+  }
+}, b = (o) => {
+  const r = {};
+  return Object.entries(o.colors || {}).forEach(([t, e]) => {
+    Object.entries(e).forEach(([s, n]) => {
+      r[`--color-${t}-${s}`] = n;
+    });
+  }), Object.entries(o.typography?.fontFamily || {}).forEach(
+    ([t, e]) => {
+      r[`--font-family-${t}`] = e.join(", ");
+    }
+  ), Object.entries(o.typography?.fontSize || {}).forEach(([t, e]) => {
+    typeof e == "string" ? (r[`--text-${t}`] = e, r[`--leading-${t}`] = "1.5") : (r[`--text-${t}`] = e[0], r[`--leading-${t}`] = e[1].lineHeight);
+  }), Object.entries(o.spacing || {}).forEach(([t, e]) => {
+    r[`--spacing-${t}`] = e;
+  }), Object.entries(o.borderRadius || {}).forEach(([t, e]) => {
+    r[`--radius-${t}`] = e;
+  }), Object.entries(o.boxShadow || {}).forEach(([t, e]) => {
+    r[`--shadow-${t}`] = e;
+  }), r;
+}, w = (o) => {
+  if (typeof document > "u") return;
+  const r = b(o), t = document.documentElement;
+  Object.entries(r).forEach(([e, s]) => {
+    t.style.setProperty(e, s);
+  });
+}, h = (o, r) => ({
+  ...o,
+  ...r,
+  colors: {
+    primary: {
+      ...o?.colors?.primary,
+      ...r?.colors?.primary
+    },
+    secondary: {
+      ...o?.colors?.secondary,
+      ...r?.colors?.secondary
+    },
+    neutral: {
+      ...o?.colors?.neutral,
+      ...r?.colors?.neutral
+    },
+    success: {
+      ...o?.colors?.success,
+      ...r?.colors?.success
+    },
+    warning: {
+      ...o?.colors?.warning,
+      ...r?.colors?.warning
+    },
+    error: { ...o?.colors?.error, ...r?.colors?.error }
+  },
+  typography: {
+    ...o.typography,
+    ...r.typography,
+    fontFamily: {
+      ...o?.typography?.fontFamily,
+      ...r.typography?.fontFamily
+    },
+    fontSize: {
+      ...o?.typography?.fontSize,
+      ...r.typography?.fontSize
+    }
+  },
+  spacing: {
+    ...o.spacing,
+    ...r.spacing
+  },
+  borderRadius: {
+    ...o.borderRadius,
+    ...r.borderRadius
+  },
+  boxShadow: {
+    ...o.boxShadow,
+    ...r.boxShadow
+  }
+}), S = (o) => {
+  typeof window < "u" && localStorage.setItem("theme-mode", o);
+}, E = () => {
+  if (typeof window > "u") return null;
+  const o = localStorage.getItem("theme-mode");
+  return o && (o === "light" || o === "dark") ? o : null;
+}, l = m(void 0), F = () => {
+  const o = y(l);
+  if (!o)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return o;
+}, R = ({
+  children: o,
+  initialTheme: r = f,
+  initialMode: t = "light"
+}) => {
+  const [e, s] = p(r), [n, d] = p(t);
+  c(() => {
+    w(e);
+  }, [e]), c(() => {
+    (!r || r === f) && s(n === "dark" ? u : f);
+  }, [n, r]), c(() => {
+    const a = E();
+    a && d(a);
+  }, []);
+  const i = {
+    theme: e,
+    mode: n,
+    setMode: (a) => {
+      d(a), S(a);
+    },
+    setTheme: (a) => {
+      s((x) => h(x, a));
+    }
+  };
+  return /* @__PURE__ */ g(l.Provider, { value: i, children: o });
+};
+export {
+  R as ThemeProvider,
+  w as applyThemeToDOM,
+  u as defaultDarkTheme,
+  f as defaultLightTheme,
+  b as generateCSSVariables,
+  E as loadThemeMode,
+  h as mergeThemes,
+  S as saveThemeMode,
+  F as useTheme
+};

package/dist/lib/default-theme.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from './theme.types';
+export declare const defaultLightTheme: Theme;
+export declare const defaultDarkTheme: Theme;
+//# sourceMappingURL=default-theme.d.ts.map

package/dist/lib/default-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../../src/lib/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,iBAAiB,EAAE,KA4H/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC"}

package/dist/lib/test-setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/lib/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../../src/lib/test-setup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,2BAA2B,CAAC"}

package/dist/lib/test-utils.d.ts

@@ -0,0 +1,159 @@
+import { Theme, ColorPalette } from './theme.types';
+/**
+ * Creates a minimal theme for testing purposes
+ */
+export declare const createMockTheme: (overrides?: Partial<Theme>) => Theme;
+/**
+ * Creates a custom color palette for testing
+ */
+export declare const createMockColorPalette: (baseColor?: string) => ColorPalette;
+/**
+ * Mock DOM utilities for testing
+ */
+export declare const mockDocumentElement: () => {
+    setProperty: jest.Mock<any, any, any>;
+    getPropertyValue: jest.Mock<any, any, any>;
+    cleanup: () => void;
+};
+/**
+ * Mock localStorage utilities for testing
+ */
+export declare const mockLocalStorage: () => {
+    getItem: jest.Mock<string | null, [key: string], any>;
+    setItem: jest.Mock<void, [key: string, value: string], any>;
+    removeItem: jest.Mock<void, [key: string], any>;
+    clear: jest.Mock<void, [], any>;
+    store: Record<string, string>;
+    cleanup: () => void;
+};
+/**
+ * Test helper to count CSS variable types
+ */
+export declare const countCSSVariableTypes: (variables: Record<string, string>) => {
+    colors: number;
+    fontFamily: number;
+    fontSize: number;
+    lineHeight: number;
+    spacing: number;
+    borderRadius: number;
+    boxShadow: number;
+    total: number;
+};
+/**
+ * Assertion helpers for theme testing
+ */
+export declare const themeAssertions: {
+    /**
+     * Assert that all expected CSS variables are present
+     */
+    hasAllCSSVariables: (variables: Record<string, string>) => void;
+    /**
+     * Assert that CSS variable follows naming convention
+     */
+    hasValidCSSVariableName: (name: string) => void;
+    /**
+     * Assert that theme has required structure
+     */
+    hasValidThemeStructure: (theme: Theme) => void;
+};
+/**
+ * Test scenarios for theme testing
+ */
+export declare const testScenarios: {
+    /**
+     * Common theme override scenarios
+     */
+    themeOverrides: ({
+        name: string;
+        override: {
+            colors: {
+                primary: ColorPalette;
+            };
+            spacing?: undefined;
+            typography?: undefined;
+            borderRadius?: undefined;
+        };
+    } | {
+        name: string;
+        override: {
+            spacing: {
+                md: string;
+                lg: string;
+            };
+            colors?: undefined;
+            typography?: undefined;
+            borderRadius?: undefined;
+        };
+    } | {
+        name: string;
+        override: {
+            typography: {
+                fontFamily: {
+                    sans: string[];
+                };
+                fontSize: {
+                    base: string;
+                };
+            };
+            colors?: undefined;
+            spacing?: undefined;
+            borderRadius?: undefined;
+        };
+    } | {
+        name: string;
+        override: {
+            borderRadius: {
+                md: string;
+                lg: string;
+            };
+            colors?: undefined;
+            spacing?: undefined;
+            typography?: undefined;
+        };
+    })[];
+    /**
+     * Edge case scenarios
+     */
+    edgeCases: ({
+        name: string;
+        override: {
+            colors?: undefined;
+            spacing?: undefined;
+        };
+    } | {
+        name: string;
+        override: {
+            colors: {
+                primary: Partial<ColorPalette>;
+            };
+            spacing?: undefined;
+        };
+    } | {
+        name: string;
+        override: {
+            spacing: {
+                md: any;
+            };
+            colors?: undefined;
+        };
+    })[];
+};
+/**
+ * Performance testing utilities
+ */
+export declare const performanceHelpers: {
+    /**
+     * Measure time for theme application
+     */
+    measureThemeApplicationTime: (fn: () => void) => Promise<number>;
+    /**
+     * Stress test theme switching
+     */
+    stressTestThemeSwitching: (switchFn: () => void, iterations?: number) => {
+        average: number;
+        min: number;
+        max: number;
+        total: number;
+    };
+};
+//# sourceMappingURL=test-utils.d.ts.map

package/dist/lib/test-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../src/lib/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,YAAW,OAAO,CAAC,KAAK,CAAM,KAAG,KAqGhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,kBAAqB,KACpB,YAYD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;CA4B/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;CA2C5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;CAyBtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B;;OAEG;oCAC6B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAYtD;;OAEG;oCAC6B,MAAM;IAItC;;OAEG;oCAC6B,KAAK;CAiBtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IACxB;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2CH;;OAEG;;;;;;;;;;;yBAYU,OAAO,CAAC,YAAY,CAAC;;;;;;;;oBAUd,GAAG;;;;;CAKxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B;;OAEG;sCACqC,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAAC;IAOpE;;OAEG;yCACkC,MAAM,IAAI;;;;;;CAiBhD,CAAC"}

package/dist/lib/theme-provider.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Theme, ThemeContextValue, ThemeMode } from './theme.types';
+export declare const useTheme: () => ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    initialTheme?: Theme;
+    initialMode?: ThemeMode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/lib/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/lib/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAWpE,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6CtD,CAAC"}

package/dist/lib/theme-utils.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from './theme.types';
+export declare const generateCSSVariables: (theme: Theme) => Record<string, string>;
+export declare const applyThemeToDOM: (theme: Theme) => void;
+export declare const mergeThemes: (baseTheme: Theme, overrideTheme: Partial<Theme>) => Theme;
+export declare const saveThemeMode: (mode: "light" | "dark") => void;
+export declare const loadThemeMode: () => "light" | "dark" | null;
+//# sourceMappingURL=theme-utils.d.ts.map

package/dist/lib/theme-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-utils.d.ts","sourceRoot":"","sources":["../../src/lib/theme-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CxE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,KAAG,IAS9C,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,WAAW,KAAK,EAChB,eAAe,OAAO,CAAC,KAAK,CAAC,KAC5B,KAoDF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,OAAO,GAAG,MAAM,KAAG,IAItD,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,OAAO,GAAG,MAAM,GAAG,IAOnD,CAAC"}

package/dist/lib/theme.types.d.ts

@@ -0,0 +1,100 @@
+export interface ColorPalette {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+}
+export interface TypographyScale {
+    xs?: string | [string, {
+        lineHeight: string;
+    }];
+    sm?: string | [string, {
+        lineHeight: string;
+    }];
+    base?: string | [string, {
+        lineHeight: string;
+    }];
+    lg?: string | [string, {
+        lineHeight: string;
+    }];
+    xl?: string | [string, {
+        lineHeight: string;
+    }];
+    '2xl'?: string | [string, {
+        lineHeight: string;
+    }];
+    '3xl'?: string | [string, {
+        lineHeight: string;
+    }];
+    '4xl'?: string | [string, {
+        lineHeight: string;
+    }];
+    '5xl'?: string | [string, {
+        lineHeight: string;
+    }];
+    '6xl'?: string | [string, {
+        lineHeight: string;
+    }];
+}
+export interface SpacingScale {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+    '3xl'?: string;
+}
+export interface BorderRadiusScale {
+    none?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+}
+export interface ShadowScale {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+}
+export interface FontFamily {
+    sans?: string[];
+    serif?: string[];
+    mono?: string[];
+}
+export interface ThemeColors {
+    primary?: ColorPalette;
+    secondary?: ColorPalette;
+    neutral?: ColorPalette;
+    success?: ColorPalette;
+    warning?: ColorPalette;
+    error?: ColorPalette;
+}
+export interface Theme {
+    colors?: ThemeColors;
+    typography?: {
+        fontFamily?: FontFamily;
+        fontSize?: TypographyScale;
+    };
+    spacing?: SpacingScale;
+    borderRadius?: BorderRadiusScale;
+    boxShadow?: ShadowScale;
+}
+export type ThemeMode = 'light' | 'dark';
+export interface ThemeContextValue {
+    theme: Theme;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    setTheme: (theme: Partial<Theme>) => void;
+}
+//# sourceMappingURL=theme.types.d.ts.map

package/dist/lib/theme.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../src/lib/theme.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@open-kingdom/shared-frontend-ui-theme",
+  "version": "0.0.2-0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "name": "@open-kingdom/shared-frontend-ui-theme",
+    "tags": [
+      "scope:shared",
+      "type:ui",
+      "environment:frontend"
+    ]
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0",
+    "react": "^19.0.0"
+  }
+}