jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat(interface-design): add comprehensive interface design skill documentation and references

Browse Source 
- Introduced SKILL.md outlining the principles and processes for effective interface design.
- Added critique.md for evaluating design outputs and ensuring craft over correctness.
- Created example.md to illustrate the application of subtle layering principles in design decisions.
- Developed principles.md detailing core craft principles for consistent design quality.
- Implemented validation.md for memory management and pattern reuse in the design system.
- Established system.md for the Playzer design system, defining direction, domain concepts, and design decisions.
- Added StatusBadge component for displaying booking statuses with appropriate styles and labels.
- Updated skills-lock.json to include the new interface-design skill.
This commit is contained in:
Jose Selesan
2026-04-24 11:23:45 -03:00
parent 7bfa3b390e
commit 503c29613b
13 changed files with 1200 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/frontend/src/index.css
View File

@@ -49,6 +49,7 @@
}
:root {
/* Base colors (retain shadcn structure) */
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
@@ -81,6 +82,41 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
/* Surface elevation (light mode: higher = lighter) */
--surface-base: oklch(1 0 0);
--surface-raised: oklch(0.99 0 0);
--surface-overlay: oklch(0.98 0 0);
/* Semantic status - Light mode (subtle, not overwhelming) */
--status-confirmed-bg: oklch(0.97 0.02 145);
--status-confirmed-border: oklch(0.88 0.03 145);
--status-confirmed-text: oklch(0.38 0.12 145);
--status-pending-bg: oklch(0.97 0.02 75);
--status-pending-border: oklch(0.88 0.03 75);
--status-pending-text: oklch(0.48 0.15 75);
--status-cancelled-bg: oklch(0.97 0.02 25);
--status-cancelled-border: oklch(0.88 0.03 25);
--status-cancelled-text: oklch(0.45 0.15 25);
--status-noshow-bg: oklch(0.97 0.02 50);
--status-noshow-border: oklch(0.88 0.03 50);
--status-noshow-text: oklch(0.45 0.12 50);
--status-completed-bg: oklch(0.97 0.02 220);
--status-completed-border: oklch(0.88 0.03 220);
--status-completed-text: oklch(0.38 0.1 220);
/* Borders */
--border-subtle: oklch(1 0 0 / 8%);
--border-default: oklch(1 0 0 / 12%);
--border-emphasis: oklch(1 0 0 / 20%);
/* Input */
--input-bg: oklch(0.97 0 0);
--input-border: oklch(0.89 0 0);
}
.dark {
@@ -115,6 +151,41 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
/* Surface elevation (dark mode: higher = lighter) */
--surface-base: oklch(0.145 0 0);
--surface-raised: oklch(0.18 0 0);
--surface-overlay: oklch(0.22 0 0);
/* Semantic status - Dark mode (desaturated, lower contrast) */
--status-confirmed-bg: oklch(0.25 0.06 145 / 40%);
--status-confirmed-border: oklch(0.35 0.06 145 / 60%);
--status-confirmed-text: oklch(0.7 0.08 145);
--status-pending-bg: oklch(0.25 0.06 75 / 40%);
--status-pending-border: oklch(0.35 0.06 75 / 60%);
--status-pending-text: oklch(0.75 0.08 75);
--status-cancelled-bg: oklch(0.25 0.06 25 / 40%);
--status-cancelled-border: oklch(0.35 0.06 25 / 60%);
--status-cancelled-text: oklch(0.75 0.08 25);
--status-noshow-bg: oklch(0.25 0.06 50 / 40%);
--status-noshow-border: oklch(0.35 0.06 50 / 60%);
--status-noshow-text: oklch(0.75 0.08 50);
--status-completed-bg: oklch(0.25 0.06 220 / 40%);
--status-completed-border: oklch(0.35 0.06 220 / 60%);
--status-completed-text: oklch(0.7 0.08 220);
/* Borders */
--border-subtle: oklch(1 0 0 / 6%);
--border-default: oklch(1 0 0 / 10%);
--border-emphasis: oklch(1 0 0 / 18%);
/* Input */
--input-bg: oklch(1 0 0 / 10%);
--input-border: oklch(1 0 0 / 15%);
}
@layer base {