Skip to content

Commit 7124632

Browse files
praxstackpraxstack
committed
feat: Aurora glassmorphism UI overhaul + Midnight theme
1 parent 6c14ea1 commit 7124632

16 files changed

Lines changed: 1121 additions & 506 deletions

‎packages/ui/src/styles/animations.css‎

Lines changed: 147 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
1+
/* ============================================
2+
OpenCode Animation System
3+
Refined micro-interactions & motion design
4+
============================================ */
5+
16
:root {
7+
/* Animation tokens */
8+
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
9+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
10+
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
11+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
12+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
13+
14+
/* Duration tokens */
15+
--duration-instant: 75ms;
16+
--duration-fast: 120ms;
17+
--duration-normal: 200ms;
18+
--duration-slow: 300ms;
19+
--duration-slower: 450ms;
20+
21+
/* Existing pulse animations */
222
--animate-pulse: pulse-opacity 2s ease-in-out infinite;
323
--animate-pulse-scale: pulse-scale 1.2s ease-in-out infinite;
424
}
525

26+
/* ---- Pulse animations ---- */
27+
628
@keyframes pulse-opacity {
729
0%,
830
100% {
@@ -33,6 +55,8 @@
3355
}
3456
}
3557

58+
/* ---- Entrance animations ---- */
59+
3660
@keyframes fadeUp {
3761
from {
3862
opacity: 0;
@@ -44,98 +68,145 @@
4468
}
4569
}
4670

47-
.fade-up-text {
48-
animation: fadeUp 0.4s ease-out forwards;
49-
opacity: 0;
50-
51-
&:nth-child(1) {
52-
animation-delay: 0.1s;
53-
}
54-
&:nth-child(2) {
55-
animation-delay: 0.2s;
56-
}
57-
&:nth-child(3) {
58-
animation-delay: 0.3s;
59-
}
60-
&:nth-child(4) {
61-
animation-delay: 0.4s;
62-
}
63-
&:nth-child(5) {
64-
animation-delay: 0.5s;
65-
}
66-
&:nth-child(6) {
67-
animation-delay: 0.6s;
68-
}
69-
&:nth-child(7) {
70-
animation-delay: 0.7s;
71-
}
72-
&:nth-child(8) {
73-
animation-delay: 0.8s;
74-
}
75-
&:nth-child(9) {
76-
animation-delay: 0.9s;
77-
}
78-
&:nth-child(10) {
79-
animation-delay: 1s;
80-
}
81-
&:nth-child(11) {
82-
animation-delay: 1.1s;
83-
}
84-
&:nth-child(12) {
85-
animation-delay: 1.2s;
86-
}
87-
&:nth-child(13) {
88-
animation-delay: 1.3s;
71+
@keyframes fadeIn {
72+
from {
73+
opacity: 0;
8974
}
90-
&:nth-child(14) {
91-
animation-delay: 1.4s;
75+
to {
76+
opacity: 1;
9277
}
93-
&:nth-child(15) {
94-
animation-delay: 1.5s;
78+
}
79+
80+
@keyframes fadeInScale {
81+
from {
82+
opacity: 0;
83+
transform: scale(0.95);
9584
}
96-
&:nth-child(16) {
97-
animation-delay: 1.6s;
85+
to {
86+
opacity: 1;
87+
transform: scale(1);
9888
}
99-
&:nth-child(17) {
100-
animation-delay: 1.7s;
89+
}
90+
91+
@keyframes slideInFromRight {
92+
from {
93+
opacity: 0;
94+
transform: translateX(8px);
10195
}
102-
&:nth-child(18) {
103-
animation-delay: 1.8s;
96+
to {
97+
opacity: 1;
98+
transform: translateX(0);
10499
}
105-
&:nth-child(19) {
106-
animation-delay: 1.9s;
100+
}
101+
102+
@keyframes slideInFromLeft {
103+
from {
104+
opacity: 0;
105+
transform: translateX(-8px);
107106
}
108-
&:nth-child(20) {
109-
animation-delay: 2s;
107+
to {
108+
opacity: 1;
109+
transform: translateX(0);
110110
}
111-
&:nth-child(21) {
112-
animation-delay: 2.1s;
111+
}
112+
113+
@keyframes slideInFromBottom {
114+
from {
115+
opacity: 0;
116+
transform: translateY(12px);
113117
}
114-
&:nth-child(22) {
115-
animation-delay: 2.2s;
118+
to {
119+
opacity: 1;
120+
transform: translateY(0);
116121
}
117-
&:nth-child(23) {
118-
animation-delay: 2.3s;
122+
}
123+
124+
/* ---- Subtle glow for active/focus states ---- */
125+
126+
@keyframes subtleGlow {
127+
0%,
128+
100% {
129+
box-shadow: 0 0 0 0 transparent;
119130
}
120-
&:nth-child(24) {
121-
animation-delay: 2.4s;
131+
50% {
132+
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--border-selected) 25%, transparent);
122133
}
123-
&:nth-child(25) {
124-
animation-delay: 2.5s;
134+
}
135+
136+
/* ---- Shimmer for loading states ---- */
137+
138+
@keyframes shimmer {
139+
0% {
140+
background-position: -200% 0;
125141
}
126-
&:nth-child(26) {
127-
animation-delay: 2.6s;
142+
100% {
143+
background-position: 200% 0;
128144
}
129-
&:nth-child(27) {
130-
animation-delay: 2.7s;
145+
}
146+
147+
/* ---- Spin ---- */
148+
149+
@keyframes spin {
150+
from {
151+
transform: rotate(0deg);
131152
}
132-
&:nth-child(28) {
133-
animation-delay: 2.8s;
153+
to {
154+
transform: rotate(360deg);
134155
}
135-
&:nth-child(29) {
136-
animation-delay: 2.9s;
156+
}
157+
158+
/* ---- Staggered fade-up text ---- */
159+
160+
.fade-up-text {
161+
animation: fadeUp 0.4s var(--ease-out-expo) forwards;
162+
opacity: 0;
163+
164+
&:nth-child(1) { animation-delay: 0.05s; }
165+
&:nth-child(2) { animation-delay: 0.1s; }
166+
&:nth-child(3) { animation-delay: 0.15s; }
167+
&:nth-child(4) { animation-delay: 0.2s; }
168+
&:nth-child(5) { animation-delay: 0.25s; }
169+
&:nth-child(6) { animation-delay: 0.3s; }
170+
&:nth-child(7) { animation-delay: 0.35s; }
171+
&:nth-child(8) { animation-delay: 0.4s; }
172+
&:nth-child(9) { animation-delay: 0.45s; }
173+
&:nth-child(10) { animation-delay: 0.5s; }
174+
&:nth-child(11) { animation-delay: 0.55s; }
175+
&:nth-child(12) { animation-delay: 0.6s; }
176+
&:nth-child(13) { animation-delay: 0.65s; }
177+
&:nth-child(14) { animation-delay: 0.7s; }
178+
&:nth-child(15) { animation-delay: 0.75s; }
179+
&:nth-child(16) { animation-delay: 0.8s; }
180+
&:nth-child(17) { animation-delay: 0.85s; }
181+
&:nth-child(18) { animation-delay: 0.9s; }
182+
&:nth-child(19) { animation-delay: 0.95s; }
183+
&:nth-child(20) { animation-delay: 1s; }
184+
&:nth-child(21) { animation-delay: 1.05s; }
185+
&:nth-child(22) { animation-delay: 1.1s; }
186+
&:nth-child(23) { animation-delay: 1.15s; }
187+
&:nth-child(24) { animation-delay: 1.2s; }
188+
&:nth-child(25) { animation-delay: 1.25s; }
189+
&:nth-child(26) { animation-delay: 1.3s; }
190+
&:nth-child(27) { animation-delay: 1.35s; }
191+
&:nth-child(28) { animation-delay: 1.4s; }
192+
&:nth-child(29) { animation-delay: 1.45s; }
193+
&:nth-child(30) { animation-delay: 1.5s; }
194+
}
195+
196+
/* ---- Reduced motion preference ---- */
197+
198+
@media (prefers-reduced-motion: reduce) {
199+
*,
200+
*::before,
201+
*::after {
202+
animation-duration: 0.01ms !important;
203+
animation-iteration-count: 1 !important;
204+
transition-duration: 0.01ms !important;
205+
scroll-behavior: auto !important;
137206
}
138-
&:nth-child(30) {
139-
animation-delay: 3s;
207+
208+
.fade-up-text {
209+
opacity: 1;
210+
animation: none;
140211
}
141212
}

‎packages/ui/src/styles/aurora.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* ================================================================
2+
AURORA DESIGN SYSTEM — "Code illuminated from within"
3+
================================================================
4+
5+
This file previously contained 1174 lines of !important overrides
6+
for the Aurora theme. Those have been absorbed into the native
7+
architecture:
8+
9+
Token pipeline (resolve.ts):
10+
--accent-*, --glow-*, --glass-*, --border-accent-*, --card-*,
11+
--message-*, --prompt-*, --dialog-*, --popover-*, --code-*,
12+
--scroll-*, --selection-*, --thinking-*, --progress-*,
13+
--empty-bg, --permission-glow, --radius-*, --ease-*, --duration-*
14+
15+
Component CSS files (23 files):
16+
button, icon-button, dialog, card, dock-surface, session-turn,
17+
popover, dropdown-menu, context-menu, text-field, checkbox,
18+
switch, progress, spinner, tooltip, toast, collapsible,
19+
accordion, tag, hover-card, logo, keybind, resize-handle
20+
21+
Global styles (base.css):
22+
::selection, :focus-visible, cursor:pointer, prefers-reduced-motion
23+
24+
Typography + spacing (theme.css):
25+
--font-family-display, --text-xs through --text-4xl,
26+
--space-*, --gap-*, --padding-*, --max-prose-width
27+
28+
================================================================ */
29+
30+
/* Aurora-specific font override: prefer JetBrains Mono Nerd Font for full
31+
Unicode coverage (arrows ←→↑↓, box-drawing ╭╮╰╯, math ∑∫≤≥±√∞, icons) */
32+
html[data-theme="aurora"] {
33+
--font-family-mono:
34+
"JetBrains Mono Nerd Font Mono", "JetBrains Mono", "GeistMono Nerd Font Mono", "SF Mono", "Fira Code",
35+
"CaskaydiaCove Nerd Font Mono", "IBM Plex Mono", ui-monospace, monospace;
36+
}

‎packages/ui/src/styles/base.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ html,
3434
font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */
3535
font-variation-settings: var(--font-family-sans--font-variation-settings, normal); /* 6 */
3636
-webkit-tap-highlight-color: transparent; /* 7 */
37+
-webkit-font-smoothing: antialiased; /* 8 - Crisp font rendering */
38+
-moz-osx-font-smoothing: grayscale; /* 8 */
39+
text-rendering: optimizeLegibility; /* 9 - Better kerning */
40+
scroll-behavior: smooth; /* 10 - Smooth scrolling */
3741
}
3842

3943
/*
@@ -402,3 +406,39 @@ input:where([type="button"], [type="reset"], [type="submit"]),
402406
font-size: 16px !important;
403407
}
404408
}
409+
410+
/* ─── Aurora: Global selection accent ─── */
411+
::selection {
412+
background: var(--selection-accent);
413+
color: inherit;
414+
}
415+
416+
/* ─── Aurora: Focus-visible accent ─── */
417+
:focus-visible {
418+
outline: 2px solid var(--accent-base);
419+
outline-offset: 2px;
420+
}
421+
422+
:focus:not(:focus-visible) {
423+
outline: none;
424+
}
425+
426+
/* ─── Aurora: Cursor mandate for interactive elements ─── */
427+
button,
428+
[role="button"],
429+
a,
430+
summary {
431+
cursor: pointer;
432+
}
433+
434+
/* ─── Aurora: Reduced motion ─── */
435+
@media (prefers-reduced-motion: reduce) {
436+
*,
437+
*::before,
438+
*::after {
439+
animation-duration: 0.01ms !important;
440+
animation-iteration-count: 1 !important;
441+
transition-duration: 0.01ms !important;
442+
scroll-behavior: auto !important;
443+
}
444+
}

‎packages/ui/src/styles/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,4 @@
6363

6464
@import "./utilities.css" layer(utilities);
6565
@import "./animations.css" layer(utilities);
66+
@import "./aurora.css" layer(utilities);

0 commit comments

Comments
 (0)