@admin-layout/tailwind-design-pro 10.0.9-alpha.31 → 10.0.9-alpha.32

package/README.md

@@ -1 +1,88 @@
-# Tailwind UI
+# Tailwind Design Pro
+
+A universal tailwind design system for use across all projects.
+
+## Features
+
+-   Unified theme system with light and dark mode support
+-   Consistent styling across all projects
+-   Easy to customize and extend
+-   Built-in typography, forms, and aspect ratio support
+
+## Usage in Servers
+
+To use this package in your server project, follow these steps:
+
+### 1. Install the package
+
+```bash
+npm install @admin-layout/tailwind-design-pro
+```
+
+### 2. Use the Universal Tailwind Config
+
+Create a `tailwind.config.js` or `tailwind.config.ts` file in your server project and import the universal config:
+
+```typescript
+// tailwind.config.ts or tailwind.config.js
+import { themeConfig } from '@admin-layout/tailwind-design-pro';
+
+export default {
+    // Override content paths to include server-specific paths
+    content: [
+        './src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        './app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        '../../packages/**/*.{js,jsx,ts,tsx}',
+        '../../packages-modules/**/*.{js,jsx,ts,tsx}',
+    ],
+
+    // You can add server-specific overrides here if needed
+    theme: {
+        extend: {
+            // Any server-specific extensions would go here
+            ...themeConfig,
+        },
+    },
+    darkMode: 'class',
+    variants: {
+        typography: ['dark'],
+    },
+    plugins: [typography, forms, aspectRatio],
+};
+```
+
+### 3. Using the ThemeProvider
+
+To enable theme switching functionality in your application, wrap your app with the ThemeProvider:
+
+```tsx
+import { ThemeProvider } from '@admin-layout/tailwind-design-pro';
+
+function App() {
+    // Example settings for the theme
+    const settings = {
+        theme: 'airbnb', // Use our unified theme
+        themeType: 'light', // 'light' or 'dark'
+        primaryColor: '#1890ff', // Optional custom primary color
+        fontFamily: 'Inter, sans-serif', // Optional custom font
+    };
+
+    return (
+        <ThemeProvider settings={settings}>
+            <YourApp />
+        </ThemeProvider>
+    );
+}
+```
+
+## Theme Customization
+
+The theme system is built on Tailwind's theme extension mechanism. You can customize the theme by modifying the `themeRegistry.ts` file.
+
+## Available Themes
+
+-   `default` - The default theme
+-   `github` - GitHub-inspired theme
+-   `slack` - Slack-inspired theme
+-   `airbnb` - Airbnb-inspired theme
+-   `spotify` - Spotify-inspired theme

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import { Feature } from '@common-stack/client-react';
+export * from './tailwindConfig';
 declare const _default: Feature;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;;AAGrD,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,cAAc,kBAAkB,CAAC;;AAEjC,wBAAqC"}

package/lib/index.js

@@ -1,2 +1,2 @@
-import {Feature}from'@common-stack/client-react';import settings from'./module.js';// eslint-disable-next-line import/no-extraneous-dependencies
+import {Feature}from'@common-stack/client-react';import settings from'./module.js';export{themeConfig}from'./tailwindConfig.js';// eslint-disable-next-line import/no-extraneous-dependencies
 var index = new Feature(settings);export{index as default};//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":"mFAAA;AAIA,YAAe,IAAI,OAAO,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":"gIAAA;AAKA,YAAe,IAAI,OAAO,CAAC,QAAQ,CAAC"}

package/lib/tailwindConfig.d.ts

@@ -0,0 +1,87 @@
+export declare const themeConfig: {
+    colors: any;
+    fontFamily: {
+        sans: string[];
+    };
+    typography: (theme: (arg0: string) => any) => {
+        DEFAULT: {
+            css: {
+                color: any;
+                a: {
+                    color: any;
+                    '&:hover': {
+                        color: any;
+                    };
+                    code: {
+                        color: any;
+                    };
+                };
+                'h2,h3,h4': {
+                    'scroll-margin-top': string;
+                };
+                thead: {
+                    borderBottomColor: any;
+                };
+                code: {
+                    color: any;
+                };
+                'blockquote p:first-of-type::before': boolean;
+                'blockquote p:last-of-type::after': boolean;
+            };
+        };
+        dark: {
+            css: {
+                color: any;
+                a: {
+                    color: any;
+                    '&:hover': {
+                        color: any;
+                    };
+                    code: {
+                        color: any;
+                    };
+                };
+                blockquote: {
+                    borderLeftColor: any;
+                    color: any;
+                };
+                'h2,h3,h4': {
+                    color: any;
+                    'scroll-margin-top': string;
+                };
+                hr: {
+                    borderColor: any;
+                };
+                ol: {
+                    li: {
+                        '&:before': {
+                            color: any;
+                        };
+                    };
+                };
+                ul: {
+                    li: {
+                        '&:before': {
+                            backgroundColor: any;
+                        };
+                    };
+                };
+                strong: {
+                    color: any;
+                };
+                thead: {
+                    th: {
+                        color: any;
+                    };
+                    borderBottomColor: any;
+                };
+                tbody: {
+                    tr: {
+                        borderBottomColor: any;
+                    };
+                };
+            };
+        };
+    };
+};
+//# sourceMappingURL=tailwindConfig.d.ts.map

package/lib/tailwindConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwindConfig.d.ts","sourceRoot":"","sources":["../src/tailwindConfig.ts"],"names":[],"mappings":"AAmDA,eAAO,MAAM,WAAW;;;;;wBAKA,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE5C,CAAC"}

package/lib/tailwindConfig.js

@@ -0,0 +1,122 @@
+import defaultTheme from'tailwindcss/defaultTheme.js';import {themeRegistry}from'./components/ThemeProvider/themeRegistry.js';// Extract the tailwindDesignPro theme for use in the config
+const tailwindTheme = themeRegistry.default;
+// Utility to convert HSL format to more standard format
+const parseHsl = hslString => {
+  const [h, s, l] = hslString.split(' ').map((val, index) => {
+    if (index === 0) return val;
+    return val; // Keep percentage format
+  });
+  return `hsl(${h}, ${s}, ${l})`;
+};
+// Convert theme colors to Tailwind-compatible format
+const generateTailwindColors = themeColors => {
+  const colors = {
+    gray: {
+      0: '#fff',
+      100: '#fafafa',
+      200: '#eaeaea',
+      300: '#999999',
+      400: '#888888',
+      500: '#666666',
+      600: '#444444',
+      700: '#333333',
+      800: '#222222',
+      900: '#111111'
+    },
+    'blue-opaque': 'rgb(13 42 148 / 18%)'
+  };
+  // Add light mode colors
+  Object.entries(themeColors.light).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      colors[key] = parseHsl(value);
+    }
+  });
+  return colors;
+};
+// Default spacing and theme from Tailwind
+const themeConfig = {
+  colors: generateTailwindColors(tailwindTheme.colors),
+  fontFamily: {
+    sans: ['Work Sans', ...defaultTheme.fontFamily.sans]
+  },
+  typography: theme => ({
+    DEFAULT: {
+      css: {
+        color: theme('colors.gray.700'),
+        a: {
+          color: theme('colors.blue.500'),
+          '&:hover': {
+            color: theme('colors.blue.700')
+          },
+          code: {
+            color: theme('colors.blue.400')
+          }
+        },
+        'h2,h3,h4': {
+          'scroll-margin-top': defaultTheme.spacing[32]
+        },
+        thead: {
+          borderBottomColor: theme('colors.gray.200')
+        },
+        code: {
+          color: theme('colors.pink.500')
+        },
+        'blockquote p:first-of-type::before': false,
+        'blockquote p:last-of-type::after': false
+      }
+    },
+    dark: {
+      css: {
+        color: theme('colors.gray.200'),
+        a: {
+          color: theme('colors.blue.400'),
+          '&:hover': {
+            color: theme('colors.blue.600')
+          },
+          code: {
+            color: theme('colors.blue.400')
+          }
+        },
+        blockquote: {
+          borderLeftColor: theme('colors.gray.700'),
+          color: theme('colors.gray.300')
+        },
+        'h2,h3,h4': {
+          color: theme('colors.gray.100'),
+          'scroll-margin-top': defaultTheme.spacing[32]
+        },
+        hr: {
+          borderColor: theme('colors.gray.700')
+        },
+        ol: {
+          li: {
+            '&:before': {
+              color: theme('colors.gray.500')
+            }
+          }
+        },
+        ul: {
+          li: {
+            '&:before': {
+              backgroundColor: theme('colors.gray.500')
+            }
+          }
+        },
+        strong: {
+          color: theme('colors.gray.100')
+        },
+        thead: {
+          th: {
+            color: theme('colors.gray.100')
+          },
+          borderBottomColor: theme('colors.gray.600')
+        },
+        tbody: {
+          tr: {
+            borderBottomColor: theme('colors.gray.700')
+          }
+        }
+      }
+    }
+  })
+};export{themeConfig};//# sourceMappingURL=tailwindConfig.js.map

package/lib/tailwindConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwindConfig.js","sources":["../src/tailwindConfig.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/tailwind-design-pro",
-    "version": "10.0.9-alpha.31",
+    "version": "10.0.9-alpha.32",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -58,7 +58,7 @@
             }
         }
     },
-    "gitHead": "5daa95ce91d20398781acde1d8a256548a2a30fe",
+    "gitHead": "99fce53dcf8796b8dbb7dd3c583a931c2062c4d3",
     "typescript": {
         "definition": "lib/index.d.ts"
     }