root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(FN-1302): theme GitHub import issue list with proper dark/light mode support

Browse Source 
- Replace hardcoded colors with CSS custom properties (theme tokens) across GitHub import components
- Add accent-color to radio buttons using --in-progress token
- Add explicit light theme overrides via [data-theme="light"] selectors for tabs, toolbar, issues list, preview, labels, and state panels
- Style filter input with theme-aware border, background, focus ring, and placeholder colors
- Fix form-error background to use color-mix instead of hardcoded rgba
This commit is contained in:
gsxdsm
2026-04-08 22:40:44 -07:00
parent 48ece0a265
commit ac9f652b9d
2 changed files with 93 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
packages/dashboard/app/styles.css
View File

@@ -6343,6 +6343,27 @@ body {
.github-import-toolbar__zone--filter input {
width: 100%;
min-width: 0;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
padding: var(--space-sm) var(--space-md);
font-size: 13px;
}
.github-import-toolbar__zone--filter input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
outline: none;
}
.github-import-toolbar__zone--filter input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.github-import-toolbar__zone--filter input::placeholder {
color: var(--text-dim);
}
.github-import-toolbar__zone--action {
@@ -6568,7 +6589,7 @@ body {
flex-direction: column;
gap: var(--space-md);
padding: var(--space-lg);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%), var(--card);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
@@ -6704,7 +6725,7 @@ body {
.form-error {
margin: var(--space-md) 0;
padding: var(--space-sm) var(--space-md);
background: rgba(248, 81, 73, 0.1);
background: color-mix(in srgb, var(--color-error) 10%, transparent);
border: 1px solid var(--color-error);
border-radius: var(--radius-md);
color: var(--color-error);
@@ -6813,6 +6834,12 @@ body {
.issue-item input[type="radio"] {
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--in-progress);
}
.issue-item.imported input[type="radio"] {
opacity: 0.5;
cursor: not-allowed;
}
.issue-item:hover:not(.imported) {
@@ -6925,6 +6952,65 @@ body {
display: none;
}
/* Light theme overrides for GitHub import components */
[data-theme="light"] .github-import-tabs {
background: var(--bg-secondary);
}
[data-theme="light"] .github-import-tab.active {
background: var(--card);
border-color: var(--border);
box-shadow: 0 1px 3px rgba(31, 35, 40, 0.06);
}
[data-theme="light"] .github-import-toolbar {
background: var(--bg-secondary);
border-bottom-color: var(--border);
}
[data-theme="light"] .github-import-toolbar__zone--filter input {
background: var(--card);
border-color: var(--border);
}
[data-theme="light"] .github-import-toolbar__zone--filter input:focus {
border-color: var(--color-primary, var(--todo));
box-shadow: 0 0 0 2px rgba(var(--in-progress-rgb), 0.15);
}
[data-theme="light"] .issues-list {
background: var(--card);
border-color: var(--border);
}
[data-theme="light"] .issue-item:hover:not(.imported) {
background: var(--card-hover);
}
[data-theme="light"] .issue-item.selected {
background: rgba(var(--in-progress-rgb), 0.08);
box-shadow: inset 0 0 0 1px rgba(var(--in-progress-rgb), 0.3);
}
[data-theme="light"] .issue-item.imported input[type="radio"] {
opacity: 0.4;
}
[data-theme="light"] .github-import-state {
background: var(--bg-secondary);
border-color: var(--border);
}
[data-theme="light"] .issue-preview {
background: var(--bg-secondary);
border-color: var(--border);
}
[data-theme="light"] .label-chip {
background: var(--bg-secondary);
border-color: var(--border);
}
/* Responsive breakpoints */
@media (max-width: 860px) {
.github-import-modal {