harivansh-afk/sandbox-agent
1
0
Fork 0
mirror of https://github.com/harivansh-afk/sandbox-agent.git synced 2026-04-17 12:04:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Standardize Foundry frontend colors with semantic design tokens

Browse source 
Extract hardcoded colors from 15+ component files into a centralized
token system (tokens.ts + shared-styles.ts) so all UI colors flow
through FoundryTokens. This eliminates 160+ scattered color values
and makes light mode a single-file change in the future.

- Add FoundryTokens interface with dark/light variants
- Add shared style helpers (buttons, cards, inputs, badges)
- Bridge CSS custom properties for styles.css theme support
- Add useFoundryTokens() hook and ColorMode context
- Migrate all mock-layout/* and mock-onboarding components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nicholas Kissel 2026-03-11 20:51:40 -07:00
parent ed6e6f6fa5
commit 98cf7a7168
17 changed files with 887 additions and 523 deletions
Download patch file Download diff file Expand all files Collapse all files

38
foundry/packages/frontend/src/styles.css
View file

@ -3,8 +3,8 @@
:root {
color-scheme: dark;
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
background: #000000;
color: #ffffff;
background: var(--f-surface-primary, #000000);
color: var(--f-text-primary, #ffffff);
}
html,
@ -15,8 +15,8 @@ body,
body {
margin: 0;
background: #000000;
color: #ffffff;
background: var(--f-surface-primary, #000000);
color: var(--f-text-primary, #ffffff);
overflow: hidden;
}
@ -61,12 +61,12 @@ pre {
align-items: center;
gap: 8px;
padding: 8px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background: #111111;
border-bottom: 1px solid var(--f-border-default, rgba(255, 255, 255, 0.12));
background: var(--f-surface-secondary, #111111);
}
.mock-diff-path {
color: #fafafa;
color: var(--f-text-primary, #fafafa);
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
font-size: 13px;
font-weight: 600;
@ -80,11 +80,11 @@ pre {
}
.mock-diff-added {
color: #7ee787;
color: var(--f-status-success, #7ee787);
}
.mock-diff-removed {
color: #ffa198;
color: var(--f-status-error, #ffa198);
}
.mock-diff-body {
@ -109,11 +109,11 @@ pre {
.mock-diff-row[data-kind="hunk"] {
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid var(--f-border-default, rgba(255, 255, 255, 0.12));
}
.mock-diff-row[data-kind="hunk"]:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid var(--f-border-default, rgba(255, 255, 255, 0.12));
}
.mock-diff-gutter {
@ -129,7 +129,7 @@ pre {
.mock-diff-line-number {
display: block;
color: #71717a;
color: var(--f-text-tertiary, #71717a);
opacity: 0.5;
}
@ -137,7 +137,7 @@ pre {
flex: 1;
padding: 0 10px;
overflow: hidden;
color: #a1a1aa;
color: var(--f-text-secondary, #a1a1aa);
font-size: 12px;
font-weight: 400;
line-height: 20px;
@ -146,15 +146,15 @@ pre {
}
.mock-diff-row[data-kind="add"] .mock-diff-line-text {
color: #7ee787;
color: var(--f-status-success, #7ee787);
}
.mock-diff-row[data-kind="remove"] .mock-diff-line-text {
color: #ffa198;
color: var(--f-status-error, #ffa198);
}
.mock-diff-row[data-kind="hunk"] .mock-diff-line-text {
color: #71717a;
color: var(--f-text-tertiary, #71717a);
}
.mock-diff-row[data-kind="hunk"] .mock-diff-line-text {
@ -171,7 +171,7 @@ pre {
padding: 0;
border: 0;
background: transparent;
color: #ff4f00;
color: var(--f-accent, #ff4f00);
cursor: pointer;
opacity: 0;
pointer-events: none;
@ -185,7 +185,7 @@ pre {
.mock-diff-row:not([data-kind="hunk"]):hover .mock-diff-attach-button {
opacity: 1;
pointer-events: auto;
background: rgba(255, 79, 0, 0.1);
background: var(--f-accent-subtle, rgba(255, 79, 0, 0.1));
}
.mock-diff-row:not([data-kind="hunk"]):hover .mock-diff-line-number {
@ -198,7 +198,7 @@ pre {
}
.mock-diff-empty-copy {
color: #71717a;
color: var(--f-text-tertiary, #71717a);
font-size: 14px;
line-height: 1.4;
}