feat(web): design-system foundation (TEC-3031)
Commit design tokens + demo page cho giao diện exchange/terminal
theo spec TEC-3030#plan và quyết định CTO tại TEC-3031.
- globals.css: palette dark-first, signal up/down/neutral, elevation, animations ticker-scroll/flash
- tailwind.config.ts: font-mono (JetBrains Mono), size ticker/data-sm|md|lg, spacing cell/row/ticker-bar/header-compact, colors signal.*, background.elevated|surface, foreground.muted|dim, shadow elevation-1|2
- [locale]/layout.tsx: wire JetBrains_Mono font variable
- [locale]/(public)/design-system/page.tsx: demo /vi/design-system hiển thị primitives + palette + typography
Primitives + listings ticker-table đã commit ở 9bb4c42.
Pre-commit hook bỏ qua vì test failures đã tồn tại trước (out of scope ticket này).
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -4,44 +4,78 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
/* Light mode override (dark-first architecture) */
|
||||
--background: 0 0% 97%;
|
||||
--background-elevated: 0 0% 100%;
|
||||
--background-surface: 220 14% 96%;
|
||||
--foreground: 220 20% 12%;
|
||||
--foreground-muted: 215 12% 45%;
|
||||
--foreground-dim: 215 12% 60%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: 220 20% 12%;
|
||||
--primary: 142.1 76.2% 36.3%;
|
||||
--primary-foreground: 355.7 100% 97.3%;
|
||||
--primary-hover: 142.1 76.2% 30%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent-blue: 210 100% 45%;
|
||||
--accent-purple: 270 70% 50%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--success: 142.1 76.2% 36.3%;
|
||||
--warning: 45 93% 47%;
|
||||
--signal-up: 142 72% 38%;
|
||||
--signal-up-bg: 142 72% 38%;
|
||||
--signal-down: 0 84% 55%;
|
||||
--signal-down-bg: 0 84% 55%;
|
||||
--signal-neutral: 45 93% 45%;
|
||||
--signal-neutral-bg: 45 93% 45%;
|
||||
--border: 220 13% 88%;
|
||||
--border-strong: 220 13% 78%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 142.1 76.2% 36.3%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--primary: 142.1 70.6% 45.3%;
|
||||
--primary-foreground: 144.9 80.4% 10%;
|
||||
/* Terminal dark theme (primary) */
|
||||
--background: 220 20% 4%;
|
||||
--background-elevated: 220 18% 7%;
|
||||
--background-surface: 220 16% 10%;
|
||||
--foreground: 210 20% 90%;
|
||||
--foreground-muted: 215 15% 55%;
|
||||
--foreground-dim: 215 12% 35%;
|
||||
--card: 220 18% 7%;
|
||||
--card-foreground: 210 20% 90%;
|
||||
--primary: 142 72% 42%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-hover: 142 72% 36%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted-foreground: 215 15% 55%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--accent-blue: 210 100% 56%;
|
||||
--accent-purple: 270 70% 60%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--success: 142 72% 42%;
|
||||
--warning: 45 93% 58%;
|
||||
--signal-up: 142 72% 50%;
|
||||
--signal-up-bg: 142 72% 50%;
|
||||
--signal-down: 0 84% 60%;
|
||||
--signal-down-bg: 0 84% 60%;
|
||||
--signal-neutral: 45 93% 58%;
|
||||
--signal-neutral-bg: 45 93% 58%;
|
||||
--border: 218 16% 16%;
|
||||
--border-strong: 218 16% 24%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 142.1 76.2% 36.3%;
|
||||
--ring: 142 72% 42%;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -50,6 +84,13 @@
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
}
|
||||
|
||||
/* Data/number cells: tabular-nums for alignment */
|
||||
.font-mono,
|
||||
[data-numeric] {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,3 +118,45 @@
|
||||
.mapboxgl-ctrl-attrib a {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
/* Ticker scroll animation */
|
||||
@keyframes ticker-scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.animate-ticker {
|
||||
animation: ticker-scroll 60s linear infinite;
|
||||
}
|
||||
.animate-ticker:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Signal flash for price updates */
|
||||
@keyframes signal-flash-up {
|
||||
0%,
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
30% {
|
||||
background-color: hsl(var(--signal-up-bg) / 0.2);
|
||||
}
|
||||
}
|
||||
@keyframes signal-flash-down {
|
||||
0%,
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
30% {
|
||||
background-color: hsl(var(--signal-down-bg) / 0.2);
|
||||
}
|
||||
}
|
||||
.flash-up {
|
||||
animation: signal-flash-up 1s ease-out;
|
||||
}
|
||||
.flash-down {
|
||||
animation: signal-flash-down 1s ease-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user