diff --git a/design-system.md b/design-system.md new file mode 100644 index 0000000..3368f8e --- /dev/null +++ b/design-system.md @@ -0,0 +1,188 @@ +# Stack.Gallery Design System + +Bloomberg terminal-inspired aesthetic with dark theme, sharp corners, and orange/green accent colors. + +## Colors (HSL) + +### Dark Theme (Default) + +| Token | HSL | Hex | Usage | +|--------------------|---------------|---------|------------------------------------| +| background | 0 0% 0% | #000000 | Page background | +| foreground | 0 0% 100% | #FFFFFF | Primary text | +| primary | 33 100% 50% | #FF8000 | Bloomberg orange, CTAs, highlights | +| primary-foreground | 0 0% 0% | #000000 | Text on primary buttons | +| accent | 142 71% 45% | #22C55E | Terminal green, success states | +| accent-foreground | 0 0% 0% | #000000 | Text on accent | +| muted | 0 0% 8% | #141414 | Subtle backgrounds | +| muted-foreground | 0 0% 55% | #8C8C8C | Secondary text, labels | +| card | 0 0% 4% | #0A0A0A | Card backgrounds | +| border | 0 0% 15% | #262626 | All borders, dividers | +| destructive | 0 84% 60% | #EF4444 | Errors, terminal red dots | + +### Light Theme + +| Token | HSL | Hex | +|------------------|---------------|---------| +| background | 0 0% 100% | #FFFFFF | +| foreground | 0 0% 5% | #0D0D0D | +| primary | 33 100% 45% | #E67300 | +| accent | 142 71% 35% | #16A34A | +| muted | 0 0% 96% | #F5F5F5 | +| muted-foreground | 0 0% 40% | #666666 | +| card | 0 0% 98% | #FAFAFA | +| border | 0 0% 90% | #E5E5E5 | + +--- + +## Typography + +### Font Families + +```css +--font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace; +--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +``` + +### Usage + +- **Monospace**: All headings, labels, navigation, buttons, data, code +- **Sans-serif**: Body text, descriptions only + +### Font Sizes + +| Element | Size | Weight | Letter Spacing | +|-----------------|------------------------|--------|-----------------| +| H1 (Hero) | 3rem / 4rem (md) | 700 | -0.02em (tight) | +| H2 (Section) | 1.5rem / 1.875rem (md) | 700 | -0.02em | +| H3 (Card title) | 0.875rem | 600 | normal | +| Labels | 0.75rem | 400 | 0.05em (wider) | +| Body | 0.875rem | 400 | normal | +| Small/Tags | 0.75rem | 400 | 0.05em | + +### Text Transform + +- Navigation, labels, buttons, tags: `uppercase` +- Body text, descriptions: `normal case` + +--- + +## Spacing & Layout + +### Border Radius + +```css +--radius: 0px; /* All elements: sharp corners */ +``` + +### Container + +- Max width: 1280px +- Padding: 1rem (16px) horizontal + +### Grid Gaps + +- Section padding: 2rem / 4rem vertical +- Card padding: 1.5rem +- Grid gap: 2rem + +### Borders + +- Width: 1px +- Color: `var(--border)` +- Used extensively: section dividers, cards, tables, inputs + +--- + +## Components + +### Buttons + +```css +/* Primary */ +height: 40px; +padding: 0 24px; +background: var(--primary); +color: var(--primary-foreground); +font: 700 0.875rem/1 var(--font-mono); +text-transform: uppercase; +border: none; + +/* Secondary/Outline */ +height: 40px; +padding: 0 24px; +background: transparent; +color: var(--foreground); +border: 1px solid var(--border); +font: 400 0.875rem/1 var(--font-mono); +text-transform: uppercase; +``` + +### Tags/Badges + +```css +padding: 4px 8px; +font: 400 0.75rem/1 var(--font-mono); +color: var(--accent); +background: hsl(var(--accent) / 0.05); +border: 1px solid hsl(var(--accent) / 0.3); +text-transform: uppercase; +``` + +### Code Blocks + +```css +background: var(--card); +border: 1px solid var(--border); +font: 400 0.875rem/1.6 var(--font-mono); + +/* Header bar */ +background: hsl(var(--muted) / 0.5); +border-bottom: 1px solid var(--border); +padding: 8px 12px; + +/* Terminal dots */ +.dot-red: var(--destructive) / 0.6 +.dot-orange: var(--primary) / 0.6 +.dot-green: var(--accent) / 0.6 +/* Each dot: 8px x 8px square */ +``` + +### Data Tables + +```css +border: 1px solid var(--border); +font: 400 0.75rem/1 var(--font-mono); + +/* Header row */ +background: var(--muted); +text-transform: uppercase; +letter-spacing: 0.05em; +color: var(--muted-foreground); + +/* Data cells */ +border-bottom: 1px solid var(--border); +padding: 12px 16px; + +/* Status indicators */ +.supported: var(--accent) /* green */ +``` + +--- + +## Visual Patterns + +1. **Section Headers**: Small colored square (8x8px) + uppercase label + count on right +2. **Grid Dividers**: Use `divide-x` and `divide-y` with border color +3. **Numbering**: Bold primary-colored numbers (01, 02, etc.) +4. **Hover States**: Subtle background change `hsl(var(--muted) / 0.3)` +5. **Status Indicators**: Colored squares or text (green = active/supported) + +--- + +## Icon Library + +Using Lucide Icons (stroke-based, 24px default): + +- Github, Book, Terminal, Menu, X, Copy, Check +- Size in UI: 16px (`h-4 w-4`) or 20px (`h-5 w-5`) diff --git a/package.json b/package.json index 3983209..c14f873 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,8 @@ "license": "MIT", "devDependencies": { "concurrently": "^9.1.2" + }, + "dependencies": { + "@push.rocks/smartdata": "link:../../push.rocks/smartdata" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9fc870b..5fd4a23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,9 +4,16 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + '@push.rocks/smartdata': link:../../push.rocks/smartdata + importers: .: + dependencies: + '@push.rocks/smartdata': + specifier: link:../../push.rocks/smartdata + version: link:../../push.rocks/smartdata devDependencies: concurrently: specifier: ^9.1.2 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000..ba4ce12 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +overrides: + '@push.rocks/smartdata': link:../../push.rocks/smartdata diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..8a187b0 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ES2022", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "declaration": true, + "outDir": "./dist", + "rootDir": ".", + "lib": ["ES2022"], + "types": ["node"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true + }, + "include": ["ts/**/*", "mod.ts"], + "exclude": ["node_modules", "dist", "ui"] +} diff --git a/ui/src/app/features/dashboard/dashboard.component.ts b/ui/src/app/features/dashboard/dashboard.component.ts index 632f73f..63dd1de 100644 --- a/ui/src/app/features/dashboard/dashboard.component.ts +++ b/ui/src/app/features/dashboard/dashboard.component.ts @@ -11,64 +11,67 @@ import { AuthService } from '../../core/services/auth.service';
-

Dashboard

-

Welcome back, {{ userName() }}

+
+
+ Dashboard +
+

Welcome back, {{ userName() }}

-
- +
+
-

Organizations

-

{{ organizations().length }}

+

Organizations

+

{{ organizations().length }}

-
- +
+
-

Packages

-

{{ packages().length }}

+

Packages

+

{{ packages().length }}

-
- +
+
-

Total Downloads

-

{{ totalDownloads() }}

+

Total Downloads

+

{{ totalDownloads() }}

-
- +
+
-

Last Activity

-

Today

+

Last Activity

+

Today

@@ -79,22 +82,25 @@ import { AuthService } from '../../core/services/auth.service';
-

Recent Packages

- View all +
+
+ Recent Packages +
+ View all
@if (packages().length === 0) { -
+
No packages yet
} @else { -