Skip to content

Commit cf91f57

Browse files
Gerome-ElassaadGerome-Elassaad
committed
Fix dark mode design system - improve depth contrast and dropdown visibility
1 parent c40893e commit cf91f57

File tree

4 files changed

+54
-54
lines changed

4 files changed

+54
-54
lines changed

‎app/components/@settings/core/AvatarDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
4646
<DropdownMenu.Content
4747
className={classNames(
4848
'min-w-[240px] z-[250]',
49-
'bg-white dark:bg-[#141414]',
49+
'bg-white dark:bg-codinit-elements-background-depth-3',
5050
'rounded-lg shadow-lg',
5151
'border border-gray-200/50 dark:border-gray-800/50',
5252
'animate-in fade-in-0 zoom-in-95',

‎app/components/workbench/CodeModeHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const CodeModeHeader = memo(
4242
</button>
4343
</DropdownMenu.Trigger>
4444
<DropdownMenu.Content
45-
className="min-w-[240px] z-[250] bg-codinit-elements-background-depth-2 dark:bg-[#141414] rounded-lg shadow-xl border border-codinit-elements-borderColor animate-in fade-in-0 zoom"
45+
className="min-w-[240px] z-[250] bg-codinit-elements-background-depth-3 rounded-lg shadow-xl border border-codinit-elements-borderColor animate-in fade-in-0 zoom"
4646
sideOffset={5}
4747
align="start"
4848
>

‎app/components/workbench/PreviewHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export const PreviewHeader = memo(
133133
</button>
134134
</DropdownMenu.Trigger>
135135
<DropdownMenu.Content
136-
className="min-w-[240px] z-[999] bg-codinit-elements-background-depth-2 dark:bg-[#141414] rounded-lg shadow-xl border border-codinit-elements-borderColor animate-in fade-in-0 zoom"
136+
className="min-w-[240px] z-[999] bg-codinit-elements-background-depth-3 rounded-lg shadow-xl border border-codinit-elements-borderColor animate-in fade-in-0 zoom"
137137
sideOffset={5}
138138
align="start"
139139
>

‎app/styles/variables.scss‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,14 @@
135135
/* Color Tokens Dark Theme */
136136
:root,
137137
:root[data-theme='dark'] {
138-
/* Pure neutral gray with blue accents */
139-
--codinit-elements-borderColor: #333333; /* Neutral gray border */
138+
/* Pure neutral gray with blue accents - improved contrast */
139+
--codinit-elements-borderColor: #3a3a3a; /* Neutral gray border - slightly lighter for visibility */
140140
--codinit-elements-borderColorActive: #3b82f6; /* Blue active border */
141141

142-
--codinit-elements-bg-depth-1: #191919; /* Main background - pure neutral */
143-
--codinit-elements-bg-depth-2: #1f1f1f; /* Content surfaces - neutral */
144-
--codinit-elements-bg-depth-3: #252525; /* Distinction elements - neutral */
145-
--codinit-elements-bg-depth-4: #2a2a2a; /* Buttons/inputs - neutral */
142+
--codinit-elements-bg-depth-1: #121212; /* Main background - darker base */
143+
--codinit-elements-bg-depth-2: #1a1a1a; /* Content surfaces */
144+
--codinit-elements-bg-depth-3: #242424; /* Distinction elements */
145+
--codinit-elements-bg-depth-4: #2e2e2e; /* Buttons/inputs - more contrast */
146146

147147
/* Aliases for background-depth variables */
148148
--codinit-elements-background-depth-1: var(--codinit-elements-bg-depth-1);
@@ -155,54 +155,54 @@
155155
--codinit-elements-textSecondary: #cccccc; /* Neutral gray */
156156
--codinit-elements-textTertiary: #999999; /* Muted neutral */
157157

158-
--codinit-elements-code-background: #0d1117; /* Darker code background */
158+
--codinit-elements-code-background: #0a0a0a; /* Dark code background */
159159
--codinit-elements-code-text: #f0f6fc; /* Bright code text */
160160

161161
/* Primary Button - Blue accent */
162162
--codinit-elements-button-primary-background: #3b82f6; /* Blue background */
163163
--codinit-elements-button-primary-backgroundHover: #2563eb; /* Darker blue on hover */
164164
--codinit-elements-button-primary-text: #ffffff; /* White text for max contrast */
165165

166-
/* Secondary Button - Neutral gray */
167-
--codinit-elements-button-secondary-background: #252525; /* Matches depth-3 */
168-
--codinit-elements-button-secondary-backgroundHover: #2a2a2a; /* Matches depth-4 */
169-
--codinit-elements-button-secondary-text: #cccccc;
166+
/* Secondary Button - Neutral gray with better contrast */
167+
--codinit-elements-button-secondary-background: #2e2e2e; /* Matches depth-4 for visibility on containers */
168+
--codinit-elements-button-secondary-backgroundHover: #3a3a3a; /* Lighter hover for clear feedback */
169+
--codinit-elements-button-secondary-text: #e0e0e0;
170170

171171
/* Danger Button - Remains prominent */
172172
--codinit-elements-button-danger-background: rgba(248, 81, 73, 0.1);
173173
--codinit-elements-button-danger-backgroundHover: rgba(248, 81, 73, 0.2);
174174
--codinit-elements-button-danger-text: #f85149;
175175

176-
/* Item backgrounds and content - neutral gray */
177-
--codinit-elements-item-contentDefault: #999999;
176+
/* Item backgrounds and content - neutral gray with improved contrast */
177+
--codinit-elements-item-contentDefault: #a0a0a0;
178178
--codinit-elements-item-contentActive: #ffffff; /* White for active */
179-
--codinit-elements-item-contentAccent: #cccccc; /* Neutral gray accent */
179+
--codinit-elements-item-contentAccent: #d0d0d0; /* Neutral gray accent */
180180
--codinit-elements-item-contentDanger: #f85149; /* Remains prominent */
181-
--codinit-elements-item-backgroundDefault: #191919; /* Matches depth-1 */
182-
--codinit-elements-item-backgroundActive: #252525; /* Matches depth-3 */
183-
--codinit-elements-item-backgroundAccent: rgba(204, 204, 204, 0.1); /* Neutral accent background */
181+
--codinit-elements-item-backgroundDefault: transparent; /* Transparent for layering */
182+
--codinit-elements-item-backgroundActive: #2e2e2e; /* Matches depth-4 for clear hover/active */
183+
--codinit-elements-item-backgroundAccent: rgba(204, 204, 204, 0.08); /* Subtle neutral accent background */
184184
--codinit-elements-item-backgroundDanger: rgba(248, 81, 73, 0.1);
185185

186186
/* Loader - Higher contrast */
187187
--codinit-elements-loader-background: rgba(255, 255, 255, 0.1); /* Slightly more opaque */
188188
--codinit-elements-loader-progress: #79c0ff; /* Brighter progress color */
189189

190-
/* Artifacts - Neutral gray */
191-
--codinit-elements-artifacts-background: #191919; /* Matches depth-1 */
192-
--codinit-elements-artifacts-backgroundHover: rgba(255, 255, 255, 0.05); /* Subtle hover */
190+
/* Artifacts - Neutral gray aligned with new depth system */
191+
--codinit-elements-artifacts-background: var(--codinit-elements-bg-depth-1);
192+
--codinit-elements-artifacts-backgroundHover: rgba(255, 255, 255, 0.06); /* Subtle hover */
193193
--codinit-elements-artifacts-borderColor: var(--codinit-elements-borderColor);
194-
--codinit-elements-artifacts-inlineCode-background: #1f1f1f; /* Matches depth-2 */
194+
--codinit-elements-artifacts-inlineCode-background: var(--codinit-elements-bg-depth-3);
195195
--codinit-elements-artifacts-inlineCode-text: #ffffff;
196196

197-
/* Actions - Neutral gray */
198-
--codinit-elements-actions-background: #191919; /* Matches depth-1 */
199-
--codinit-elements-actions-code-background: #1f1f1f; /* Matches depth-2 */
197+
/* Actions - Neutral gray aligned with new depth system */
198+
--codinit-elements-actions-background: var(--codinit-elements-bg-depth-1);
199+
--codinit-elements-actions-code-background: var(--codinit-elements-bg-depth-2);
200200

201-
/* Messages - Neutral gray */
202-
--codinit-elements-messages-background: #191919; /* Matches depth-1 */
203-
--codinit-elements-messages-linkColor: #cccccc; /* Neutral gray link */
204-
--codinit-elements-messages-code-background: #0f0f0f; /* Darker code background */
205-
--codinit-elements-messages-inlineCode-background: #1f1f1f; /* Matches depth-2 */
201+
/* Messages - Neutral gray aligned with new depth system */
202+
--codinit-elements-messages-background: var(--codinit-elements-bg-depth-2);
203+
--codinit-elements-messages-linkColor: #d0d0d0; /* Slightly brighter link */
204+
--codinit-elements-messages-code-background: #0a0a0a; /* Darker code background */
205+
--codinit-elements-messages-inlineCode-background: var(--codinit-elements-bg-depth-3);
206206
--codinit-elements-messages-inlineCode-text: var(--codinit-elements-textPrimary);
207207

208208
/* Icons - Adjusted for dark theme contrast */
@@ -212,9 +212,9 @@
212212
--codinit-elements-icon-secondary: #c9d1d9; /* Bright */
213213
--codinit-elements-icon-tertiary: #8b949e; /* Subtle */
214214

215-
--codinit-elements-dividerColor: #30363d; /* Darker divider */
215+
--codinit-elements-dividerColor: #333333; /* Aligned with border color */
216216

217-
--codinit-elements-prompt-background: rgba(15, 15, 15, 0.8); /* Remains similar */
217+
--codinit-elements-prompt-background: rgba(18, 18, 18, 0.85); /* Aligned with depth-1 */
218218

219219
/* Sidebar - Blue accent */
220220
--codinit-elements-sidebar-buttonBackgroundDefault: rgba(59, 130, 246, 0.1); /* Blue accent background */
@@ -236,7 +236,7 @@
236236
--codinit-elements-terminals-background: var(--codinit-elements-bg-depth-1); /* Use depth-1 for terminal background */
237237
--codinit-elements-terminals-buttonBackground: var(--codinit-elements-bg-depth-3); /* Use depth-3 for buttons */
238238

239-
--codinit-elements-cta-background: rgba(255, 255, 255, 0.08); /* Slightly more opaque CTA */
239+
--codinit-elements-cta-background: var(--codinit-elements-bg-depth-3); /* Use depth-3 for CTA */
240240
--codinit-elements-cta-text: #ffffff;
241241

242242
/* Terminal Colors - Pure neutral gray */
@@ -251,7 +251,7 @@
251251
--codinit-terminal-magenta: #ff79c6; /* Brighter magenta */
252252
--codinit-terminal-cyan: #98d4ca; /* Brighter cyan */
253253
--codinit-terminal-white: #ffffff; /* Pure white */
254-
--codinit-terminal-brightBlack: #666666; /* Neutral gray */
254+
--codinit-terminal-brightBlack: #555555; /* Neutral gray */
255255
--codinit-terminal-brightRed: #ff7b72; /* Brighter red */
256256
--codinit-terminal-brightGreen: #76d974; /* Brighter green */
257257
--codinit-terminal-brightYellow: #e2e27a; /* Brighter yellow */
@@ -262,26 +262,26 @@
262262
--modern-scrollbar-thumb-background: rgba(153, 153, 153, 0.3); /* Neutral gray thumb */
263263
--modern-scrollbar-thumb-backgroundHover: rgba(153, 153, 153, 0.5); /* More opaque on hover */
264264

265-
/* Command/Dialog popover variables - Dark Theme */
266-
--background: 222.2 84% 4.9%;
267-
--foreground: 210 40% 98%;
268-
--card: 222.2 84% 4.9%;
269-
--card-foreground: 210 40% 98%;
270-
--popover: 222.2 84% 4.9%;
271-
--popover-foreground: 210 40% 98%;
265+
/* Command/Dialog popover variables - Dark Theme - neutral gray aligned */
266+
--background: 0 0% 7%; /* #121212 */
267+
--foreground: 0 0% 98%;
268+
--card: 0 0% 10%; /* #1a1a1a */
269+
--card-foreground: 0 0% 98%;
270+
--popover: 0 0% 10%; /* #1a1a1a */
271+
--popover-foreground: 0 0% 98%;
272272
--primary: 217.2 91.2% 59.8%;
273-
--primary-foreground: 222.2 84% 4.9%;
274-
--secondary: 217.2 32.6% 17.5%;
275-
--secondary-foreground: 210 40% 98%;
276-
--muted: 217.2 32.6% 17.5%;
277-
--muted-foreground: 215 20.2% 65.1%;
278-
--accent: 217.2 32.6% 17.5%;
279-
--accent-foreground: 210 40% 98%;
273+
--primary-foreground: 0 0% 98%;
274+
--secondary: 0 0% 14%; /* #242424 */
275+
--secondary-foreground: 0 0% 98%;
276+
--muted: 0 0% 14%; /* #242424 */
277+
--muted-foreground: 0 0% 64%;
278+
--accent: 0 0% 18%; /* #2e2e2e */
279+
--accent-foreground: 0 0% 98%;
280280
--destructive: 0 62.8% 30.6%;
281-
--destructive-foreground: 210 40% 98%;
282-
--border: 217.2 32.6% 17.5%;
283-
--input: 217.2 32.6% 17.5%;
284-
--ring: 224.3 76.3% 94.1%;
281+
--destructive-foreground: 0 0% 98%;
282+
--border: 0 0% 23%; /* #3a3a3a */
283+
--input: 0 0% 18%; /* #2e2e2e */
284+
--ring: 217.2 91.2% 59.8%;
285285
}
286286

287287
/*

0 commit comments

Comments
 (0)