diff --git a/blendmate-app/src/components/IslandPanelDemo.tsx b/blendmate-app/src/components/IslandPanelDemo.tsx new file mode 100644 index 0000000..d3667b1 --- /dev/null +++ b/blendmate-app/src/components/IslandPanelDemo.tsx @@ -0,0 +1,131 @@ +import IslandPanel from './ui/IslandPanel'; + +/** + * Demo component showcasing the IslandPanel in various configurations + */ +export default function IslandPanelDemo() { + return ( +
+ {/* Basic panel with just content */} + +

+ This is a basic Island panel with just content. It automatically adapts to light/dark mode. +

+ + + {/* Panel with title */} + +

+ This panel has a title in the header. The header has a subtle background to separate it from the content. +

+ + + {/* Panel with title and subtitle */} + +
+

+ This panel demonstrates all features: title, subtitle, and content. +

+

+ The colors automatically adjust based on your system's light/dark mode preference. +

+
+ + + {/* Panel with actions */} + + + + + } + > +

+ Actions in the header provide quick access to common operations. +

+ + + {/* Nested content example */} + +
+
+

+ Nested Section +

+

+ You can nest other elements with system colors inside the panel. +

+
+ +
+
+

+ Grid Item 1 +

+
+
+

+ Grid Item 2 +

+
+
+
+ + + {/* Info box about the component */} +
+

+ About Island Panels +

+ +
+
+ ); +} diff --git a/blendmate-app/src/components/ui/IslandPanel.tsx b/blendmate-app/src/components/ui/IslandPanel.tsx new file mode 100644 index 0000000..95b4499 --- /dev/null +++ b/blendmate-app/src/components/ui/IslandPanel.tsx @@ -0,0 +1,91 @@ +import { ReactNode } from 'react'; + +interface IslandPanelProps { + /** Title displayed in the panel header */ + title?: string; + /** Optional subtitle or description */ + subtitle?: string; + /** Actions to display in the header (buttons, icons, etc.) */ + actions?: ReactNode; + /** Main content of the panel */ + children: ReactNode; + /** Additional CSS classes for customization */ + className?: string; +} + +/** + * Island Panel Component + * + * A modern, elevated panel with soft rounded corners and subtle shadow. + * Automatically adapts to light/dark mode using system color preferences. + * + * Features: + * - Rounded corners (16px) + * - Subtle shadow for depth + * - Header with title and optional actions + * - Content area with proper spacing + * - Light/dark mode support via prefers-color-scheme + * - Uses CSS variables for system colors (no hard-coded brand palette) + */ +export default function IslandPanel({ + title, + subtitle, + actions, + children, + className = '' +}: IslandPanelProps) { + return ( +
+ {/* Header - only render if title or actions exist */} + {(title || actions) && ( +
+
+ {title && ( +

+ {title} +

+ )} + {subtitle && ( +

+ {subtitle} +

+ )} +
+ + {actions && ( +
+ {actions} +
+ )} +
+ )} + + {/* Content Area */} +
+ {children} +
+
+ ); +} diff --git a/blendmate-app/src/components/ui/README.md b/blendmate-app/src/components/ui/README.md new file mode 100644 index 0000000..317f640 --- /dev/null +++ b/blendmate-app/src/components/ui/README.md @@ -0,0 +1,82 @@ +# UI Components + +## IslandPanel + +A modern, elevated panel component with automatic light/dark mode support. + +### Features + +- **Rounded corners** (16px) for a soft, modern aesthetic +- **Subtle shadow** for depth and elevation +- **Automatic theme switching** via `prefers-color-scheme` +- **System colors** using CSS variables (no hard-coded brand palette) +- **Flexible header** with optional title, subtitle, and actions +- **Clean content area** with proper spacing + +### Usage + +```tsx +import IslandPanel from './components/ui/IslandPanel'; + +// Basic panel + +

Your content here

+ + +// Panel with title + +

Content with a title

+ + +// Complete panel with title, subtitle, and actions + + + + + } +> +

Panel content

+ +``` + +### Props + +- `title` (optional): String - Title displayed in the panel header +- `subtitle` (optional): String - Subtitle or description below the title +- `actions` (optional): ReactNode - Actions to display in the header (buttons, icons, etc.) +- `children`: ReactNode - Main content of the panel +- `className` (optional): String - Additional CSS classes for customization + +### CSS Variables + +The component uses the following CSS variables defined in `index.css`: + +**Light mode:** +- `--island-bg`: rgb(255 255 255) +- `--island-bg-secondary`: rgb(249 249 249) +- `--island-border`: rgb(229 229 229) +- `--island-text`: rgb(23 23 23) +- `--island-text-secondary`: rgb(115 115 115) +- `--island-shadow`: rgba(0 0 0 / 0.08) +- `--island-hover`: rgb(245 245 245) + +**Dark mode:** +- `--island-bg`: rgb(30 30 30) +- `--island-bg-secondary`: rgb(23 23 23) +- `--island-border`: rgb(64 64 64) +- `--island-text`: rgb(250 250 250) +- `--island-text-secondary`: rgb(163 163 163) +- `--island-shadow`: rgba(0 0 0 / 0.3) +- `--island-hover`: rgb(40 40 40) + +### Design Philosophy + +The Island panel follows modern OS UI conventions: +- Uses system-defined colors that adapt to user preferences +- No hard-coded brand colors in the component itself +- Maintains consistency with native OS aesthetics +- Provides visual hierarchy through subtle shadows and backgrounds diff --git a/blendmate-app/src/index.css b/blendmate-app/src/index.css index 616587e..317e524 100644 --- a/blendmate-app/src/index.css +++ b/blendmate-app/src/index.css @@ -1,4 +1,43 @@ @import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@theme { + --color-blendmate-dark: #0a0a0a; + --color-blendmate-gray: #1a1a1a; + --color-blendmate-orange: #ff9d5c; + --color-blendmate-blue: #3d94ff; +} + +/* System color variables for Island panels - light/dark mode support */ +:root { + /* Light mode (default system colors) */ + --island-bg: rgb(255 255 255); + --island-bg-secondary: rgb(249 249 249); + --island-border: rgb(229 229 229); + --island-text: rgb(23 23 23); + --island-text-secondary: rgb(115 115 115); + --island-shadow: rgba(0 0 0 / 0.08); + --island-hover: rgb(245 245 245); + + background-color: rgb(250 250 250); + color: var(--island-text); +} + +/* Dark mode system colors */ +@media (prefers-color-scheme: dark) { + :root { + --island-bg: rgb(30 30 30); + --island-bg-secondary: rgb(23 23 23); + --island-border: rgb(64 64 64); + --island-text: rgb(250 250 250); + --island-text-secondary: rgb(163 163 163); + --island-shadow: rgba(0 0 0 / 0.3); + --island-hover: rgb(40 40 40); + + background-color: rgb(17 17 17); + color: var(--island-text); + } +} * { box-sizing: border-box; @@ -6,9 +45,10 @@ body { margin: 0; + background-color: inherit; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} \ No newline at end of file +}